超过 1 个选择标签的标签标签

Question

我正在学习网络开发。我在html表单。 我知道我们可以使用

<label>a:
<input type="text">
</label>

或者同样的事情可以这样完成

<label for="name">a:</label>
<input id="name" type="text">

对于选项的选择说我们希望用户从下拉菜单中选择 DOB 我们可以使用<label>tag 第一种方式：-

<label>Birthday:

<select><option>1<option><option>2<option></select>
<select><option>jan<option><option>feb<option></select>
<select><option>2001<option><option>2002<option></select>

</label>

或

但是我们如何使用这种格式在for=""使用什么@

<label for="birthday?????">Birthday:</label>
<select id="day"><option>1<option><option>2<option></select>
<select id="month"><option>jan<option><option>feb<option></select>
<select id="year"><option>2001<option><option>2002<option></select>

Answer 1

您不能将标签元素与多个控件相关联。这在definition of label 中有描述。

你可以给每个选择元素自己的标签。

更好的方法是为日期设置一个文本输入字段。那么标签就没有问题了。这意味着更多的工作，因为您必须在服务器端解析数据，并且还应该在客户端解析它（用于检查，以便用户可以立即被告知问题）。但它具有更好的可用性（输入日期肯定比使用三个笨拙的下拉菜单更快）和更好的可访问性。您需要确定日期格式并清楚地告诉用户预期的格式是什么。

Answer 2

标签将一些文本与一个输入字段相关联。因此，在您的情况下，您将不得不像这样拆分它。您还可以添加一个字段集来对多个表单元素进行分组（并使用图例来描述组）：

<fieldset>
 <legend> Enter your birthdate</legend>
 <label for="day">Day:</label>
 <select id="day"><option>1<option><option>2<option></select>
 <label for="month">Month:</label>
 <select id="month"><option>1<option><option>2<option></select>
 <label for="year">Year:</label>
 <select id="year"><option>1<option><option>2<option></select>
</fieldset>

Answer 3

您还可以使用 aria-labelledby 并反转命名参考（我认为这更接近您正在寻找的约定）：

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

或

    <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>

参考链接：-https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute