如何爲多個選擇框設置一個標籤？

我對這張支票形式：如何爲多個選擇框設置一個標籤？

<label>Check in date </label> 
<select id="day"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<select id="month"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 
<select id="year"> 
    <option value="1">2012</option> 
    <option value="2">2013</option> 
</select>

正如你所看到的，用戶會選擇月，日和不同的選擇框的一年，然而，只有一個標籤應該存在於所有三種。

用HTML做這件事的正確方法是什麼？

更新：我關心的是我們在開發類似上面的代碼時可能遇到的可訪問性問題。我的意思是，一個盲人用戶應該能夠聽取每個標籤，以填補這個表格...

來源

2012-08-28 MEM

沒有看到你有什麼問題。任何你會期望的原因嗎？ – scrappedcola

其工作fine.IS有什麼具體的，你想..？ http://jsfiddle.net/B2MrM/ – heretolearn

您不能label元素與多個控制關聯。這在definition of label中描述。

你可以給每個select元素自己的標籤。

更好的方法是爲某個日期設置單個文本輸入字段。然後label沒有問題。這意味着更多的工作，因爲您必須解析數據服務器端，並且還應該解析它在客戶端（用於檢查，以便用戶可以立即通知問題）。但它更好的可用性（當然，鍵入日期比使用三個笨拙的下拉鍵更快）和更好的可訪問性。您需要決定日期格式，並明確告訴用戶預期的格式是什麼。

來源

2012-08-28 20:00:17

有問題的可用性建議國際海事組織，而不是真正解決問題的辦法，只是一個方法。 –

有沒有正確的方法;標籤是指一個元素。只要把它指向第一個。

<label for="day">Check in date </label>

你也可以使用一個專門風格<fieldset>如果你喜歡的語義，但我認爲這是一個有點矯枉過正。一個<input type="date">可能是最好的選擇，因爲它是<label>可以指向的一個元素，它更具語義性，如果你實現了一個好的日期選擇器，它可以更友好一點。

如果您想堅持使用<select>，請嘗試給每個人一個title屬性以獲取可訪問性。

來源

2012-08-28 17:43:26 Ryan

對所有三個輸入框使用一個標籤的問題是，一個不具視力的用戶不會知道焦點所在的三個框中的哪一個，因爲在每種情況下都會讀出相同的文本。有許多可能的方法。也許最安全的是爲每個盒子設置一個標籤，但將這些標籤隱藏到視口的左側。另一種可能性這應該工作，但我沒有測試過會是這樣：

<fieldset> 
    <legend>Check in date</legend> 
    <select id="day" aria-label="day"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
    <select id="month" aria-label="month"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </select> 
    <select id="year" aria-label="year"> 
     <option value="1">2012</option> 
     <option value="2">2013</option> 
    </select> 
</fieldset>

來源

2012-08-28 18:40:32 Alohci

不知道詠歎號標籤的財產。非常感謝。 – MEM

這裏只需使用詠歎調標籤即可。 –

與@Alohci答案之後，您還可以使用aria-labelledby和反向命名引用（我認爲這是一個有點接近你要找的慣例）：

<label id="date">Check in date</label> 
<select aria-labelledby="date"> 
    <!-- ... --> 
</select> 
<select aria-labelledby="date"> 
    <!-- ... --> 
</select> 
<select aria-labelledby="date"> 
    <!-- ... --> 
</select>

還要注意，按the W3C上labelled-by：

如果標籤文字顯示在屏幕上，作者SHOULD使用aria-labelledby和不應該使用aria-label。只有當界面不可能在屏幕上顯示可見標籤時，才使用aria-label。在計算可訪問的名稱屬性時，用戶代理優先於aria-labelledby而不是aria-label。

來源

2013-01-21 05:30:04 Dan

努力提高@Bracketworks答案：

<label id="date">Check in date</label> 
<label for="day" id="label_day">Day</label> 
<select id="day" aria-labelledby="date label_day"> 
    <!-- ... --> 
</select> 
<label for="month" id="label_month">Month</label> 
<select id="month" aria-labelledby="date label_month"> 
    <!-- ... --> 
</select> 
<label for="year" id="label_year">Year</label> 
<select id="year" aria-labelledby="date label_year"> 
    <!-- ... --> 
</select>

見例如1 MDN的「Using the aria-labelledby attribute」的。

來源

2013-01-30 18:38:31

HTML5的input type="date"也可能有用，特別是如果您使用月/日/年選擇框作爲限制日期選擇可能性的方法。此輸入元素支持min和max日期屬性，因此您可以應用您的限制。舊版瀏覽器不支持此功能，但我發現智能cookie使用jQueryUI's datepicker作爲墊片（通過使用capabilities detection來確定type="date"支持，然後僅在本機不支持時加載並調用日期選擇器）。

來源

2013-01-30 18:46:10

如何爲多個選擇框設置一個標籤？

回答

相關問題