我应该把输入元素放在标签元素里面吗?

是否有关于标签和输入HTML元素嵌套的最佳实践?

经典的方式:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

当前回答

我通常会选择前两个。我曾见过使用第三个选项的场景，当无线电选项嵌入到标签和css包含类似的内容时

label input {
    vertical-align: bottom;
}

为了确保无线电的垂直对齐。

其他回答

您需要考虑的一件事是复选框和无线电输入与javascript的交互。

使用下面的结构:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

当用户点击“标签文本”时，controlCheckbox()函数将被触发一次。

但是，当输入标记被单击时，controlCheckbox()函数可能会在一些较老的浏览器中被触发两次。这是因为输入和标签标签都会触发附加到复选框的onclick事件。

然后您的checkboxState中可能会有一些错误。

我最近在IE11上遇到了这个问题。我不确定现代浏览器是否有这种结构的问题。

如果在label标签中包含input标签，则不需要使用'for'属性。

也就是说，我不喜欢在标签中包含input标签，因为我认为它们是独立的，不包含实体。

来自W3的HTML4规范:

标签本身可以放置在标签的前面、后面或周围相关的控制。

<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>

<标识> <input type="text" name="lastname" /> 姓 < / >标签

请注意，当表格用于布局时，标签在一个单元格中，其关联的表单字段在另一个单元格中，则不能使用第三种技术。

任何一个都是有效的。我喜欢使用第一个或第二个示例，因为它提供了更多的样式控制。

我通常会选择前两个。我曾见过使用第三个选项的场景，当无线电选项嵌入到标签和css包含类似的内容时

label input {
    vertical-align: bottom;
}

为了确保无线电的垂直对齐。

有关W3的建议，请参阅http://www.w3.org/TR/html401/interact/forms.html#h-17.9。

他们说这两种方法都可以。他们将这两个方法描述为显式(使用“for”和元素的id)和隐式(将元素嵌入到标签中):

明确:

for属性显式地将一个标签与另一个控件关联:for属性的值必须与相关联的控件元素的id属性的值相同。

隐式:

若要隐式地将一个标签与另一个控件关联，该控件元素必须位于label元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。

推荐文章