如何为多个选择框设置一个标签？

我对这张支票形式：如何为多个选择框设置一个标签？

<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

如何为多个选择框设置一个标签？

回答

相关问题