多个选择标签的标签标签

Question

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

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

或者同样的事情可以这样做

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

对于选项的选择，例如我们希望用户从下拉菜单中选择D.O.B，我们是否可以首先使用<label>标签：-

<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

不能将label元素与多个控件关联。这在标签的定义中有描述。

您可以为每个select元素赋予自己的标签。

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

Answer 2

标签将一些文本与one输入字段关联起来。所以在你的情况下，你必须像这样把它分开。您还可以添加一个字段集来分组多个also元素(并使用图例来描述gruop)：

<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

您还可以使用并反向命名引用(我认为它更接近您正在寻找的约定)：

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

参考链接:- 属性