您的位置:CSS5 > HTML >

 

html <label>标签

 

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

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

一、点击文字,对应选择上控件

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

二、label语法

<label for="man">男</label>

Label标签内文字更加需要填写
Label标签内for属性的值为自定义,一般与想实现点击会触发控件对象的ID对应相同。

三、label案例

HTML代码片段如下:

<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的值与label标签内for的值对应。

html label标签用法案例
html label标签用法案例截图

label用法案例查看案例

总结:
一般要实现点击单选按钮框文字或多选按钮框文字对应选择按钮被选择,使用label标签即可,注意for与id值相同即可实现。Label标签默认情况下是没有任何样式,可以使用CSS设置css宽度css高度css边框等样式。

扩展知识
1、html checkbox多选框

标签(Tag): label
本文分享URL地址:http://css5.com.cn/html/489.shtml

更多

上一页: 上一篇:html checkbox 复选框form控件元素
下一页: 下一篇:html <radio>单选按钮控件标签

 

CSS必备基础教程 - TOP

 

热门信息

 

CSS5更新 - TOP

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期::2013-04-29     点击:
原创:CSS5     来源网址:http://css5.com.cn/html/489.shtml
本文css5.com.cn(DIV CSS) CSS5版权所有,欢迎转载,并注明出处来源及URL!