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

经典的方式:

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

or

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

当前回答

我非常喜欢将元素包装在<label>中,因为我不需要生成id。

我是一名Javascript开发人员,使用React或Angular生成可以被我或其他人重用的组件。然后很容易在页面中复制一个id,导致奇怪的行为。

其他回答

将输入嵌套到标签中有几个优点,特别是带有单选/复选框字段时,

.unchecked,支票{显示:没有;} 标签输入:not(:checked) ~ .unchecked{display:inline;} 标签输入:checked ~ .checked{display:inline;} <标识> <input type="checkbox" value="something" name="my_checkbox"/> . <span class="unchecked">Not Checked</span> <span class="checked">Is checked </span> . < / >标签

正如你从演示中看到的,在输入字段之前嵌套其他元素允许,

要单击以激活字段的文本 输入字段后面的元素将根据字段的状态动态设置样式。

此外,HTML std允许多个标签与一个输入字段相关联,但这会使屏幕阅读器感到困惑,解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。

参考WHATWG(编写表单的用户界面),将输入字段放在标签内并没有错。这样可以节省代码,因为不再需要标签中的for属性。

我非常喜欢将元素包装在<label>中,因为我不需要生成id。

我是一名Javascript开发人员,使用React或Angular生成可以被我或其他人重用的组件。然后很容易在页面中复制一个id,导致奇怪的行为。

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

label input {
    vertical-align: bottom;
}

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

来自W3的HTML4规范:

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


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

or

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

or

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

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

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