Question

我正在学习Web开发。我在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>

OR

但是我们如何使用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

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

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

您不能将标签元素与多个控件相关联。 definition of label中对此进行了描述。

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

更好的方法是为日期使用单个文本输入字段。这样标签就没有问题了。这意味着需要做更多的工作，因为您必须解析服务器端的数据，并且还应该解析客户端的数据（以进行检查，以便可以将问题立即通知用户）。但是它具有更好的可用性（当然，键入日期比使用三个笨拙的下拉列表更快）和更好的可访问性。您需要确定日期格式，并明确告知用户期望的格式。

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

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

3 个答案: