是否有关于标签和输入HTML元素嵌套的最佳实践?
经典的方式:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
当前回答
参考WHATWG(编写表单的用户界面)，将输入字段放在标签内并没有错。这样可以节省代码，因为不再需要标签中的for属性。
其他回答
您需要考虑的一件事是复选框和无线电输入与javascript的交互。
使用下面的结构:
<label>
<input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
<span>Label text</span>
</label>
当用户点击“标签文本”时，controlCheckbox()函数将被触发一次。
但是，当输入标记被单击时，controlCheckbox()函数可能会在一些较老的浏览器中被触发两次。这是因为输入和标签标签都会触发附加到复选框的onclick事件。
然后您的checkboxState中可能会有一些错误。
我最近在IE11上遇到了这个问题。我不确定现代浏览器是否有这种结构的问题。
我更喜欢
<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>
在我看来，代码看起来还是更好。
我非常喜欢将元素包装在<label>中，因为我不需要生成id。
我是一名Javascript开发人员，使用React或Angular生成可以被我或其他人重用的组件。然后很容易在页面中复制一个id，导致奇怪的行为。
将输入嵌套到标签中有几个优点，特别是带有单选/复选框字段时，
.unchecked,支票{显示:没有;} 标签输入:not(:checked) ~ .unchecked{display:inline;} 标签输入:checked ~ .checked{display:inline;} <标识> <input type="checkbox" value="something" name="my_checkbox"/> . <span class="unchecked">Not Checked</span> <span class="checked">Is checked </span> . < / >标签
正如你从演示中看到的，在输入字段之前嵌套其他元素允许，
要单击以激活字段的文本 输入字段后面的元素将根据字段的状态动态设置样式。
此外，HTML std允许多个标签与一个输入字段相关联，但这会使屏幕阅读器感到困惑，解决这个问题的一种方法是将输入字段和其他元素嵌套在一个标签元素中。
这两种方法都是正确的，但是将输入放在标签内会大大降低使用CSS进行样式化时的灵活性。
首先，<标签>限制了它可以包含的元素。例如，如果<input>不在<label>内，则只能在<input>和标签文本之间放置<div>。
其次，虽然有一些变通方法可以使样式更容易，比如用span包装内部标签文本，但有些样式将继承自父元素，这可能会使样式更复杂。
第三方编辑
根据我的理解，标签的html 5.2规范规定，标签内容模型是短语内容。这意味着只有内容模型为短语content <label>的标签才允许在</label>内。
内容模型必须包含的内容的规范描述 作为元素的子元素和子元素。 大多数被归类为措辞内容的元素只能 包含本身被归类为措辞内容的元素， 没有任何流内容。
