是否有关于标签和输入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的建议，请参阅http://www.w3.org/TR/html401/interact/forms.html#h-17.9。
他们说这两种方法都可以。他们将这两个方法描述为显式(使用“for”和元素的id)和隐式(将元素嵌入到标签中):
明确:
for属性显式地将一个标签与另一个控件关联:for属性的值必须与相关联的控件元素的id属性的值相同。
隐式:
若要隐式地将一个标签与另一个控件关联，该控件元素必须位于label元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。
其他回答
来自W3的HTML4规范:
标签本身可以放置在标签的前面、后面或周围 相关的控制。
<label for =“姓氏”>姓氏</label> <输入类型=“文本” id=“姓氏” />
or
<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>
or
<标识> <input type="text" name="lastname" /> 姓 < / >标签
请注意，当表格用于布局时，标签在一个单元格中，其关联的表单字段在另一个单元格中，则不能使用第三种技术。
任何一个都是有效的。我喜欢使用第一个或第二个示例，因为它提供了更多的样式控制。
参考WHATWG(编写表单的用户界面)，将输入字段放在标签内并没有错。这样可以节省代码，因为不再需要标签中的for属性。
我更喜欢
<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>
在我看来，代码看起来还是更好。
有关W3的建议，请参阅http://www.w3.org/TR/html401/interact/forms.html#h-17.9。
他们说这两种方法都可以。他们将这两个方法描述为显式(使用“for”和元素的id)和隐式(将元素嵌入到标签中):
明确:
for属性显式地将一个标签与另一个控件关联:for属性的值必须与相关联的控件元素的id属性的值相同。
隐式:
若要隐式地将一个标签与另一个控件关联，该控件元素必须位于label元素的内容中。在这种情况下，LABEL可能只包含一个控制元素。
如果在label标签中包含input标签，则不需要使用'for'属性。
也就是说，我不喜欢在标签中包含input标签，因为我认为它们是独立的，不包含实体。
