是否有关于标签和输入HTML元素嵌套的最佳实践?
经典的方式:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
是否有关于标签和输入HTML元素嵌套的最佳实践?
经典的方式:
<label for="myinput">My Text</label>
<input type="text" id="myinput" />
or
<label for="myinput">My Text
<input type="text" id="myinput" />
</label>
当前回答
我更喜欢
<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,导致奇怪的行为。
我更喜欢
<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的HTML4规范:
标签本身可以放置在标签的前面、后面或周围 相关的控制。
<label for =“姓氏”>姓氏</label> <输入类型=“文本” id=“姓氏” />
or
<输入类型=“文本” id=“姓氏” /> <label for =“姓氏”>姓氏</label>
or
<标识> <input type="text" name="lastname" /> 姓 < / >标签
请注意,当表格用于布局时,标签在一个单元格中,其关联的表单字段在另一个单元格中,则不能使用第三种技术。
任何一个都是有效的。我喜欢使用第一个或第二个示例,因为它提供了更多的样式控制。
就个人而言,我喜欢把标签放在外面,就像你的第二个例子一样。这就是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" />
这样我就可以避免表格和表单中的所有垃圾。
如果在label标签中包含input标签,则不需要使用'for'属性。
也就是说,我不喜欢在标签中包含input标签,因为我认为它们是独立的,不包含实体。