欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > HTML >

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

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

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

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

二、label语法   -   TOP

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

三、label案例   -   TOP

HTML代码片段如下:

  1. <form action="" method="get"> 
  2. 性别:<br /> 
  3. <input name="sex" id="man" type="radio" value="" /> 
  4. <label for="man"></label> 
  5. <input name="sex" id="woman" type="radio" value="" /> 
  6. <label for="woman"></label> 
  7. </form> 

注意查看,input标签内id的值与label标签内for的值对应。

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

label用法案例查看案例

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

扩展知识
1、html checkbox多选框

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h489.shtml

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-14 17:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。