我应该将输入元素放入标签元素中吗？

Question

我应该将输入元素放入标签元素中吗？在筑巢方面是否有最佳做法？label和inputHTML元素？经典方式：<label for="myinput">My Text</label><input type="text" id="myinput" />或<label for="myinput">My Text   <input type="text" id="myinput" /></label>

Answer 1

来自W3：标签本身可以定位在关联控件之前、之后或周围。

<label for="lastname">Last Name</label> <input type="text" id="lastname" />

或

<input type="text" id="lastname" /> <label for="lastname">Last Name</label>

或

<label> <input type="text" name="lastname" />    Last Name </label>

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

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

Answer 2

我更喜欢

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

过关

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

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