做單選按鈕的正確方法？

所以..我一直試圖在我的web開發項目中不惜一切代價避免單選按鈕，因爲我只是不能找出正確的方式來編寫它們。做單選按鈕的正確方法？

您是否爲單選按鈕設置了標籤？如果是這樣，屏幕閱讀器如何工作？

我一直在做的大部分表單的方式是使用無序列表。每個輸入都是一個列表項。做單選按鈕時我總是遇到麻煩。我永遠無法讓它在所有瀏覽器中都看起來正確。

例如，請看http://usfultimate.com/index.php/hatter/register。這種結構是否有意義？

連結結構樣品：

<ul> 
    <li> 
    <label for='first_name'>First Name:</label> 
    <input type="text" name="first_name" value="" /> 
    </li> 
    <li> 
    <label for='last_name'>Last Name:</label> 
    <input type="text" name="last_name" value="" /> 
    </li> 
    <li> 
    <label for='email'>Email Address:</label> 

    <input type="text" name="email" value="" /> 
    </li> 

    <li class="radio"> 
    <ul> 
     <li> 
     <input type="radio" name="skill" value="Never Played" id="neverPlayed" /> 
     <label for="neverPlayed">Never Played</label> 
     </li> 

     <li> 
     <input type="radio" name="skill" value="Unorganized Pickup" 
      id="unorganizedPickup" /> 
     <label for="unorganizedPickup">Unorganized Pickup</label> 
     </li> 
     <li> 
     <input type="radio" name="skill" value="Organized Pickup/League Play" 
      id="organizedPickup" /> 
     <label for="organizedPickup">Organized Pickup or League Play</label> 
     </li> 
     <li> 
     <input type="radio" name="skill" value="Played on a Competative Team" 
      id="competativeTeam" /> 
     <label for="competativeTeam">Competative Team</label> 
     </li> 

     <li> 
     <input type="radio" name="skill" value="Baller Shot Caller" id="baller" /> 
     <label for="baller">Baller Shot Caller</label> 
     </li> 
    </ul> 
    </li> 
</ul>

任何指針將不勝感激！

來源

2009-09-28 Roeland

一個指針，考慮格式化您的代碼塊以避免水平滾動，這使得它們更容易閱讀和響應。我冒昧地重新格式化你的例子以適應。 – 2009-09-28 21:54:09

出於輔助功能：

整理單選按鈕爲fieldset，並給它一個legend屬性，以便於屏幕閱讀器瞭解各組單選按鈕的手段。
爲每個單選按鈕指定一個ID，並使用相關聯的label元素的for=""屬性中的ID。這不僅適用於輔助功能 - 這也意味着您可以通過單擊標籤來選擇一個單選按鈕（它比單選按鈕本身更大更容易打）

然後，使用CSS來設置樣式fieldset，legend和label屬性來匹配您的網站設計，因爲在這個例子中：

<html> 
    <head> 
     <style> 
     body { 
      font-family: arial; 
      font-size: 15px; 
      line-height: 1.4em; 
     } 
     fieldset.radioGroup { border: none; } 
     fieldset.radioGroup legend { font-weight: bold; } 

     /* Make each radio/label render on a new line */ 
     fieldset.radioGroup label { display: block; } 

     /* add some horizontal spacing between radio buttons and their label text */ 
     fieldset.radioGroup label input { margin-right: 32px; } 
     </style> 
    </head> 
<body> 
    <fieldset class="radioGroup"> 
     <legend>Skill Level</legend> 
     <label for="neverPlayedRadioButton"> 
      <input type="radio" name="skill" value="neverPlayed" id="neverPlayedRadioButton" /> 
      Never Played 
     </label> 
     <label for="unorganizedPickupRadioButton"> 
       <input type="radio" name="skill" value="unorganizedPickup" id="unorganizedPickupRadioButton" /> 
       Unorganized Pickup 
     </label> 
     <label for="organizedPickupRadioButton"> 
      <input type="radio" name="skill" value="organizedPickup" id="organizedPickupRadioButton" /> 
      Organized Pickup/League Play 
     </label> 
    </fieldset> 
</body> 
</html>

來源

2009-09-28 22:35:23

可以將字段集放入字段集中嗎？因爲我想爲更大的輸入組使用字段集..可能有2個文本輸入和2個無線電輸入區..全部在1個字段集中。所以然後我會有一個字段集內的字段集。 – Roeland 2009-09-29 01:54:00

是的 - 根據W3C驗證程序，嵌套字段集在HTML 4.01 Transitional和XHTML 1.0中都是有效的標記。 – 2009-09-29 07:59:06

很好的回答，迪倫！我總是忘記如何連接標籤和按鈕，以便點擊標籤，現在我可以隨時來到這裏。 – 2009-12-23 00:31:17

<label for="baller">Baller Shot Caller</label> 
<input type="radio" name="skill" value="Baller Shot Caller" id="baller" />

至於屏幕閱讀器，它取決於它的只是文本。

來源

2009-09-28 21:48:41

我把標籤放在收音機後面，所以看起來會更好..我在這裏看到的唯一改變就是你改變了它。所以即時通訊正確的方式..只是反標籤？ – Roeland 2009-09-28 21:59:43

+1標籤中的for與輸入中的id匹配。讓你點擊所有瀏覽器中的文字。返回的變量是技能，具有取決於單選按鈕的值。這是做單選按鈕的正確方法。 – 2009-09-28 22:02:43

另外文本通常是在單選按鈕之後。 – 2009-09-28 22:03:14

您還可以使用'fieldset'標籤來組織您的屏幕。它將很好地分組不同的單選按鈕。

來源

2009-09-28 21:53:34 Anax

您可以使用for屬性將label與表單元素（如複選框或單選按鈕）進行明確關聯，如示例中所示。

此外，在HTML 4.01還可以隱含一個label有一個表單元素通過（從鏈接W3C網頁例子）做以下關聯：

<FORM action="..." method="post"> 
<P> 
<LABEL> 
    First Name 
    <INPUT type="text" name="firstname"> 
</LABEL> 
<LABEL> 
    <INPUT type="text" name="lastname"> 
    Last Name 
</LABEL> 
</P> 
</FORM>

這有時是更方便，但並不總是合適的，如在您的label與HTML中的表單元素不相鄰的情況下（例如：在表格中）。

來源

2009-09-28 22:07:00

您的代碼不正確，在輸入標籤是你的標籤要素中。理想情況下，標籤只能包含文字。否則你的代碼是完全正確的。

有些事情要記住的是，使用屏幕閱讀器的用戶無法爲一系列單選按鈕和一些建立該共同上下文的文本建立公共上下文。其他人已經指出將你的單選按鈕放在一個字段集中，並使用圖例元素來建立這個上下文。然而，可訪問性的理想解決方案是確保文本的價值和標籤足夠清晰，以便自己完全理解。從你的例子來看，一個盲人用戶可能會很難知道「無組織的拾取」是與技能水平相關的選擇。換句話說，像「無組織的拾取技能水平」這樣的說法更容易理解。那麼關於單選按鈕的內容絕對不會混淆。

您已使用無序列表來構造您的單選按鈕。沒事兒。您也可以使用分組在字段集或div容器下的段落。重要的是你希望如何傳達這些元素的結構。一個無序列表提出了一系列的列表，這些列表並不相關，但是系列中的元素對於表示整個系列的價值是必要的。一組段落提出了正式的內容聲明，其中每個段落打算用於明確的消費，而不會立即考慮到該組中的其他類似元素，這些元素的順序或這些元素的數量，只要每個段落被單獨使用。語義結構非常重要，但更重要的是希望通過這種結構進行交流，從而幫助需要分析和解析代碼的技術。

您的代碼符合XHTML的更嚴格要求。好。不要僅僅因爲這種無能是被允許的，就會偏離對靈活無能的統一嚴格。

來源

2009-09-29 02:18:13

等待，我感到困惑..在我的代碼中，輸入標籤在我的標籤元素之外，你指的是Justin發佈的代碼嗎？使標籤具有如此描述性的唯一問題是它會產生重複（字技能水平會一遍又一遍地重複）。如果我使用帶有圖例的字段集來分隔它們，屏幕閱讀器是否會將該圖例與單選按鈕組相關聯？我想我能做的其他事情是把「技能水平」部分放在一個對普通瀏覽器隱藏的範圍內，但仍然可以在屏幕閱讀器中工作。 – Roeland 2009-09-29 03:54:42

你說得對。我可能正在查看Dylan Beattie發佈的代碼。我同意詳細的規範可能聽起來是重複的。仍然有必要更好地協助使用屏幕閱讀器的用戶。您也可以將標籤文字加以剔除，使其不完全重複。屏幕閱讀器將宣佈該圖例，並將宣佈單選按鈕位於字段集中，但不會明確宣佈任何進一步的關係。這是HTML的SGML形式的限制。對瀏覽器隱藏更具體的文本是強烈建議的可訪問性技巧。 – 2009-09-29 08:25:16

只是不要使用內聯樣式隱藏文本。屏幕閱讀器能夠讀取顯示內容：無內容和可視性：內聯寫入時隱藏。他們這樣做是爲了遵守可以隱藏和顯示文本的JavaScript，這與可視化用戶會經歷的方式相同。 – 2009-09-29 08:26:41

做單選按鈕的正確方法？

回答

相關問題