HTML 表单标签有两个选项答案

【问题标题】：HTML form label has two optionsHTML 表单标签有两个选项
【发布时间】：2013-07-17 08:33:02
【问题描述】：

我通常按格式设置表单样式

<label for="CompanyNameTextBox">
    <span>Company</span>
    <input name="CompanyNameTextBox" type="text" id="CompanyNameTextBox" />
</label>

这样我可以像这样设置 CSS 样式：

.input[type=text] span
{
    display: inline-block;
    width: 200px;
}

我得到了一个很好的并排排列，我的标签位于表单元素的左侧。这适用于我应该添加的所有元素。

现在，我有一个字段：信用卡到期日期。

这很特别，我在一个标签中有两个选择列表：

<label>
    <span>Expiry Date</span>
    <select name="ExpiryDateMonthDropDownList" id="ExpiryDateMonthDropDownList">
        ...
    </select>
    <select name="ExpiryDateYearDropDownList" id="ExpiryDateYearDropDownList">
        ...
    </select>
</label>

如果我尝试选择后者（年），它会默认选择第一个（月），即使我没有在标签上指定 for 属性。

所以问题是，我能做什么？如果我做错表格（我实际上不应该将input 放在label 中）或者我必须做一些愚蠢的解决方法，比如将第二个select 放在它自己的里面，我无法解决label.

【问题讨论】：

为什么不将元素移到标签之外呢？我不明白...执行此操作的正常方法是使用label 元素的for 属性。你仍然会有相同的视觉输出，如果你点击标签，指定的元素将被聚焦。
@JohnKrommidas 我认为过去我发现了我目前正在使用的技术并坚持使用它，直到现在才成为问题。正如其他一些答案所述，在我尝试做一些与规范略有不同的事情之前，它似乎确实是一种有效的技术。

标签： html css forms

【解决方案1】：

MDN on <label> says:

HTML 元素代表用户中项目的标题界面。它可以通过使用 for 与控件相关联属性，或者通过将控制元素放置在标签元素内。这样的控件称为标签元素的标签控件。

和

除了带标签的控件之外，不允许有任何可标记的元素。

因此，如果您将控制元素放在标签中，则与在此元素中编写标签for 相同，因此当您在标签中放置两个输入字段时，您会看到问题出现在哪里。

您可以将第二个控件放在外面，或者都放在标签外面并为第一个输入元素制作for，或者是的，您可以为两个输入字段制作两个单独的标签，任何这种组合都应该在以下情况下起作用你指定forattribute。

【讨论】：

【解决方案2】：

HTML5“w3.org: 4.10.6 The label element”的规范说：

如果未指定 for 属性，但 label 元素具有可标记元素后代，则按树顺序排列的第一个此类后代是 label 元素的带标签控件。

对于 HTML 4 "w3.org: 17.9.1 The LABEL element 更加严格：

label 元素可用于将信息附加到控件。每个label 元素只与一个表单控件相关联。

因此您可能必须将两者包装在一个容器中才能获得相同的视觉输出：

<div class="multiple_inputs">
    <label>
        <span>Expiry Date</span>
        <select name="ExpiryDateMonthDropDownList"></select>
    </label>
    <select name="ExpiryDateYearDropDownList"></select>
</div>

当然，您也可以在第二个字段中添加另一个 <label>。

【讨论】：

【解决方案3】：

正如Should I put input tags inside a label tag? 中已经说过的那样，根据 w3，这完全有效，但可能会产生 WCAG 和某些浏览器实现的问题。

在这种情况下，您在一个标签内有两个输入元素，这是不好的，因为每个输入元素都应该有一个标签。所以我的建议是添加另一个标签并在每个标签中放置一个元素。

【讨论】：

该页面上的引用：I like to use either the first or second example, as it gives you more style control。我想我可能以我目前做事的方式（在那篇文章中提到的第三种技术）把自己逼到了一个角落。

【解决方案4】：

如果表单元素在标签中，它可能默认选择第一个元素。但是您可以将第二个字段指定为属性（可能是特定于浏览器的，适用于 firefox 22）。

【讨论】：