HTML 表单标签有两个选项

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 中)或者我是否必须做一些愚蠢的解决方法，我无法解决比如将第二个 select 粘贴到它自己的 label 中。

Answer 1

MDN on <label> says:

The HTML Element represents a caption for an item in a user interface. It can be associated with a control either by using the for attribute, or by placing the control element inside the label element. Such a control is called the labeled control of the label element.

和

No labelable elements other than the labeled control are allowed.

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

您可以将第二个控件放在标签外面，或者都放在标签外面并制作一个 for对于第一个输入元素，或者是的，您可以为两个输入字段制作两个单独的标签，当您指定 for 时，任何这些组合都应该有效属性。