码迷,mamicode.com
首页 > Web开发 > 详细

html form <label>标签基础语法结构与使用案例教程

时间:2017-06-13 21:44:55      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:action   htm   http   tle   man   form   案例   使用   需要   

在表单布局中会遇到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>

 性别:    

 

html form <label>标签基础语法结构与使用案例教程

标签:action   htm   http   tle   man   form   案例   使用   需要   

原文地址:http://www.cnblogs.com/zhengyuan1314/p/7003548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!