我应该把标签标签内的input标签吗？
我只是想知道是否有关于标签和input标签的最佳做法：
经典之道：
<label for="myinput">My Text</label> <input type="text" id="myinput" /> 要么
<label for="myinput">My Text <input type="text" id="myinput" /> </label>
从W3：标签本身可以位于相关控制之前，之后或周围。
<label for="lastname">Last Name</label> <input type="text" id="lastname" />
我更喜欢
<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对于嵌套元素非常适用。
但这是我想的一个口味问题。
如果您需要更多样式选项，请添加跨度标签。
<label> <span>Firstname</span> <input name="firstname" /> </label> <label> <span>Lastname</span> <input name="lastname" /> </label>
在我看来，代码仍然看起来更好。
如果将input标签包含在标签标签中，则不需要使用“for”属性。
也就是说，我不喜欢在我的标签中包含input标签，因为我认为它们是单独的，不包含实体。
行为差异：点击标签和input之间的空白处
如果您单击标签和input之间的空白，只有当标签包含input时，才会激活input。
这是有道理的，因为在这种情况下，空间只是标签的另一个字符。
<p>Inside:</p> <label> <input type="checkbox" /> |<----- Label. Click between me and the checkbox. </label> <p>Outside:</p> <input type="checkbox" id="check" /> <label for="check">|<----- Label. Click between me and the checkbox.</label>
就我个人而言，我喜欢把标签保存在外面，就像你的第二个例子。 这就是为什么FOR属性在那里。 原因是我经常将样式应用到标签上，如宽度，以使表单看起来很漂亮（下面简写）：
<style> label { width: 120px; margin-right: 10px; } </style> <label for="myinput">My Text</label> <input type="text" id="myinput" /><br /> <label for="myinput2">My Text2</label> <input type="text" id="myinput2" />
这样做，我可以避免表格和所有垃圾在我的forms。
有关W3的build议，请参阅http://www.w3.org/TR/html401/interact/forms.html#h-17.9 。
他们说可以这样做。 他们将这两种方法描述为显式的（对元素的id使用“for”）和隐式的（将元素embedded到标签中）：
明确：
for属性显式地将一个标签与另一个控件相关联：for属性的值必须与相关控制元素的id属性的值相同。
隐式：
要隐式地将标签与另一个控件关联，控件元素必须位于LABEL元素的内容中。 在这种情况下，LABEL可能只包含一个控制元素。
两者都是正确的，但是将input放在标签内使得使用CSS进行样式devise时不那么灵活。
首先， 一个<label>被限制在它可以包含的元素中 。 例如，如果<input>不在<label> ，则只能在<input>和标签文本之间放置一个<div> <label> 。
其次，虽然有一些解决方法可以使样式更容易，如使用跨度包装内部标签文本，但某些样式将从父元素inheritance，这会使样式更加复杂。
一个值得注意的“gotcha”指出，你永远不要在<label>元素中包含多于一个input元素，并带有显式的“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>
虽然这可能是诱人的自定义文本值是一个单选button或checkbox次要的formsfunction，标签元素的点击焦点function将立即把焦点的元素，其中的ID是明确定义在其'for'属性，使得用户几乎不可能点击包含的文本字段来input一个值。
就个人而言，我尽量避免input孩子的标签元素。 标签元素包含的不仅仅是标签本身，它在语义上似乎是不合适的。 如果您将input嵌套到标签中以获得某种美感，则应该使用CSS代替。
我通常与前两个选项。 我已经看到了使用第三个选项时的场景，当embedded到标签中的广播select和CSS包含的东西
label input { vertical-align: bottom; }
以确保无线电适当的垂直alignment。
正如大多数人所说的那样，两种方式的确行得通，但我认为只有第一个方法才行。 在语义上严格，标签不“包含”input。 在我看来， 标记结构中的遏制（父/子）关系应该反映在视觉输出中的遏制。 即在标记中围绕另一个的元素应该在浏览器中围绕该元素绘制。 据此，标签应该是input的兄弟，而不是父母。 所以选项二是任意的和混乱的。 每个读过Python的人都可能会认同（Flat比嵌套更好，Sparse比密集好，应该有一个 – 最好只有一个 – 明显的方法来做…）。
由于像W3C和主要浏览器厂商那样的决定（允许“以任何一种方式来做这件事”，而不是“正确的做法”），就是networking今天如此混乱，我们的开发人员必须处理纠结以及如此多样的遗留代码。
参考WHATWG （ 编写一个表单的用户界面 ），将input字段放在标签内并不是错误的。 这样可以节省代码，因为label的for属性不再需要。
我非常喜欢在我的<label>包装元素，因为我不必生成id。
我是一个JavaScript开发人员，React或Angular被用来生成可以被我或其他人重用的组件。 那么很容易在页面中复制一个id ，导致奇怪的行为。
