html form label标签基础语法结构与使用案例教程(转载)

在表单布局中会遇到label标签的使用，label没有任何样式效果，有触发对应表单控件功能。
比如我们点击单选按钮或多选框前文字对应选项就能被选中，这个就是对文字加了<label>标签实现。

点击<label>标签文字时，实现对应控件被选择，需要对应表单控件id的值与label标签内的for值相同。

 

请看下面代码

<form action="" method="get"> 性别：<br /> <input name="sex" id="man" type="radio" value="" /> <label for="man">男</label> <input name="sex" id="woman" type="radio" value="" /> <label for="woman">女</label> </form>

 

下面是代码效果，因为文字和input的id相同，点击文字，同样可以选中对应id的按钮；

性别：男 女

 还有另外一种方式,用label将文字和文本框一起包起来。效果相同

性别<br /> <label>男<input type = "radio" name = "sex" value = "man"></label> <label>女<input type = "radio" name = "sex" value = "woman"></label>

 性别: 男   女

 

 

转载自http://www.divcss5.com/html/h489.shtml#top

转载于:https://www.cnblogs.com/lijinwen/p/5561535.html

总结

以上是生活随笔为你收集整理的html form label标签基础语法结构与使用案例教程(转载)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。