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

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

请看下面代码

  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相同,点击文字,同样可以选中对应id的按钮;

性别: 男 女

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

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

性别: 男   女

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

html form <label>标签基础语法结构与使用案例教程(转载)的更多相关文章

  1. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一.dl dt dd认识 ...

  2. html dl dt dd标签元素语法结构与使用

    dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...

  3. Spring MVC-表单(Form)标签-列表框(Listbox)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_listbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...

  4. Spring MVC-表单(Form)标签-单选按钮集合(RadioButtons)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_radiobuttons.htm 说明:示例基于Spring MVC 4.1.6. ...

  5. Spring MVC-表单(Form)标签-密码框(Password)示例(转载实践)

    以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_password.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...

  6. Swift超详细的基础语法-结构体,结构体构造器,定义成员方法, 值类型, 扩充函数

    知识点 基本概念 结构体的基本使用 结构体构造器(构造函数/构造方法) 结构体扩充函数(方法), 又称成员方法 结构体是值类型 1. 基本概念 1.1 概念介绍 结构体(struct)是由一系列具有相 ...

  7. sass编写高质量的css---(基础语法结构)

    一:基础1.Sass:最早也是最成熟的CSS预处理语言2.Less:兼容CSS的最流行的css预处理语言3.Stylus:主要用于node.js社区 二:scss写法1)混入@mixin alert( ...

  8. JS基础语法---Math对象的案例

    系统Max求最大值: var result= Math.max(10,20,30,40); console.log(result); 练习1:自己定义一个对象,实现系统的max的方法   //例子:自 ...

  9. 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍

    定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...

随机推荐

  1. linux下的webserver BOA及CGIC库的使用指南(转帖)

    我把网页挂载到nfs 下面的文件中(需要新建一个文件www ),不过这样很方便! 安装过程 ====================================================== ...

  2. Unix/Linux运维首选工具Xmanager Enterprise 3.0的使用教程

    管理Uinx和Linux服务器的兄弟们应该很熟悉Xmanager,一个窗口可以同时控制上百台Linux和Unix服务器,功能非常强大!^_^请看: manager是一个简单易用的高性能的运行在Wind ...

  3. json格式键盘编码对照表

    整理了一份JSON格式的键盘编码对照表.欢迎转载,但请注明出处,谢谢! { VK_BACK: 8, //退格键 VK_TAB: 9, //TAB键 VK_RETURN: 13, //回车键 VK_SH ...

  4. 《A First Course in Probability》-chaper5-连续型随机变量-均匀随机变量

    在连续随机变量这部分,有一种特殊的随机变量X,对于X所有可能取值,P(X)都相等,我们称其为均匀随机变量. 基于均匀随机变量的定义,我们容易看到,其密度函数f(x)必然是一条平行于x轴的直线,因为这样 ...

  5. poj3469 最小割构图

    题目链接:http://poj.org/problem?id=3469 #include <cstdio> #include <cmath> #include <algo ...

  6. H - Cow Contest

    有N头牛,编号从1到N,参与一个变成比赛(大牛编程比赛,一般水水平敢参加???),一些牛的代码比较出色,每头牛都有一个独一无二的技能等级在这些竞争者中. 比赛循环进行在任意两头牛之间(姑且这么翻译吧) ...

  7. JavaBean基础

    JavaBean的概念 JavaBean是一种可重复使用.且跨平台的软件组件.JavaBean可分为两种:一种是有用户界面(UI,User Interface)的JavaBean:还有一种是没有用户界 ...

  8. css倒三角的几种实现方式

    在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...

  9. 南阳理工ACM-OJ 分数加减法 最大公约数的使用

    http://acm.nyist.net/JudgeOnline/problem.php?pid=111 简单模拟: #include <iostream> #include <st ...

  10. What is therelationship between @EJB and ejb-ref/ejb-local-ref?

    http://glassfish.java.net/javaee5/ejb/EJB_FAQ.html What is therelationship between @EJB and ejb-ref/ ...