Question

我通常以

格式设置表单样式

<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内）或者我必须做一些愚蠢的解决方法，比如坚持第二个{{ 1}}在其内部select。

Answer 1

MDN on <label> says:

HTML元素表示用户中项目的标题接口。它可以通过使用for与控件相关联属性，或将控制元素放在label元素中。这种控制称为标签元素的标记控制。

和

不允许使用标记控件以外的可标记元素。

因此，如果将一个控制元素放在标签内，则与编写此元素的标签for相同，这样您就可以看到在标签内放置两个输入字段时问题出现的位置。

您可以将第二个控件放在标签之外或两者之外，并为第一个输入元素设置for，或者是，您可以为两个输入字段创建两个单独的标签，这些组合中的任何一个都应该指定for属性时工作。

Answer 2

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

如果未指定for属性，但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>。

Answer 3

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

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

Answer 4

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

HTML表单标签有两个选项

4 个答案: