工作中发现html label标签的一些特性
今天项目中发现一个问题,就是页面中有两个input输入框,始终无法选中第二个input输入框。
开始还以为是哪里的JS控制了,后来把所有的JS都去掉还有这问题。
看了结构后发现是有一个label标签将两个input包含起来了,结构如下:
<html>
<body>
<label>
<input type="text" /><input type="text" />
</label>
</body>
</html>
后来将label标签去掉就没这问题了,查了下label标签的文档发现是由于label标签的特性引起的!
唉,都是自己对html标签的特性不熟悉导致,虽然是很简单的一个标签,但都有相应的规则,是不能随便乱用的!
IE中不会这种情况,是否算个Bug呢? Firefox,Opera,safari,中都有该现象。。
总结:
label标签中只能包含一个input标签,在没有写for属性的情况下如果包含多个input,那么点击label后始终会选中默认的input,也就是第一个input。
label标签中有多个input时,没有设置for属性时,会把第一个input设为默认。