我更喜欢

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

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

一个值得注意的“gotcha”指示你永远不应该在<label>元素中包含一个以上的输入元素，它具有显式的“for”属性，例如:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

虽然对于表单特性来说，自定义文本值是单选按钮或复选框的次要属性，但label元素的点击聚焦功能会立即将焦点转移到id在其'for'属性中显式定义的元素上，这使得用户几乎不可能单击包含的文本字段来输入值。

就我个人而言，我尽量避免使用带有输入子元素的标签。从语义上讲，标签元素包含标签本身以外的内容似乎不合适。如果在标签中嵌套输入是为了达到某种美学效果，那么应该使用CSS。

我非常喜欢将元素包装在<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>

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

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

使用下面的结构:

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

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

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

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

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