1

我通常以格式设置我的表单

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

4

4 回答 4

4

MDN 上<label>说：

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

和

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

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

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

于 2013-07-17T08:43:18.700 回答
2

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

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

对于 HTML 4 " w3.org: 17.9.1 的 LABEL 元素，它更加严格：

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

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

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

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

于 2013-07-17T08:45:26.097 回答
1

正如我应该将输入标签放在标签标签中吗？根据 w3，这是完全有效的，但可能会产生 WCAG 和某些浏览器实现的问题。

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

于 2013-07-17T08:45:17.530 回答
0

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

于 2013-07-17T08:43:15.887 回答