是否应将输入元素放在标签元素内? [英] Should I put input elements inside a label element?

问题描述

是否有关于label和input HTML元素嵌套的最佳实践?

Is there a best practice concerning the nesting of label and input HTML elements?

经典方式:

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

或

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

推荐答案

标签本身可以放置在标签之前，之后或周围 关联的控件.

The label itself may be positioned before, after or around the associated control.

---

---

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

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

Note that the third technique cannot be used when a table is being used for layout, with the label in one cell and its associated form field in another cell.

任何一个有效.我喜欢使用第一个或第二个示例，因为它可以为您提供更多的样式控制.

Either one is valid. I like to use either the first or second example, as it gives you more style control.

这篇关于是否应将输入元素放在标签元素内?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！