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

经典的方式:

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

or

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

当前回答

来自W3的HTML4规范:

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


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

or

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

or

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

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

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

其他回答

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

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

来自W3的HTML4规范:

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


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

or

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

or

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

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

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

我更喜欢

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

over

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

主要是因为它使HTML更具可读性。实际上,我认为我的第一个例子更容易用CSS来设置样式,因为CSS可以很好地处理嵌套元素。

但我想这只是个人品味的问题。


如果需要更多样式选项,请添加span标记。

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

在我看来,代码看起来还是更好。

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

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

使用下面的结构:

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

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

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

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

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