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
html form <label>标签基础语法结构与使用案例教程(转载)的更多相关文章
- 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认识 ...
- html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 <dl> 标签用于定义列表类型标签. dl dt dd目录 dl dt dd介绍 结构语法 dl dt dd案例 dl dt dd总结 一. ...
- Spring MVC-表单(Form)标签-列表框(Listbox)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_listbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例 ...
- Spring MVC-表单(Form)标签-单选按钮集合(RadioButtons)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_radiobuttons.htm 说明:示例基于Spring MVC 4.1.6. ...
- Spring MVC-表单(Form)标签-密码框(Password)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_password.htm 说明:示例基于Spring MVC 4.1.6. 以下示 ...
- Swift超详细的基础语法-结构体,结构体构造器,定义成员方法, 值类型, 扩充函数
知识点 基本概念 结构体的基本使用 结构体构造器(构造函数/构造方法) 结构体扩充函数(方法), 又称成员方法 结构体是值类型 1. 基本概念 1.1 概念介绍 结构体(struct)是由一系列具有相 ...
- sass编写高质量的css---(基础语法结构)
一:基础1.Sass:最早也是最成熟的CSS预处理语言2.Less:兼容CSS的最流行的css预处理语言3.Stylus:主要用于node.js社区 二:scss写法1)混入@mixin alert( ...
- JS基础语法---Math对象的案例
系统Max求最大值: var result= Math.max(10,20,30,40); console.log(result); 练习1:自己定义一个对象,实现系统的max的方法 //例子:自 ...
- 前端 HTML body标签相关内容 常用标签 表单标签 form里面的 label标签介绍
定义:<label> 标签为 input 元素定义标注(标记). label标签功能:关联input标签文本与表达元素,点击input标签文本时,如同点击表单元素一样. label标签是行 ...
随机推荐
- linux下的webserver BOA及CGIC库的使用指南(转帖)
我把网页挂载到nfs 下面的文件中(需要新建一个文件www ),不过这样很方便! 安装过程 ====================================================== ...
- Unix/Linux运维首选工具Xmanager Enterprise 3.0的使用教程
管理Uinx和Linux服务器的兄弟们应该很熟悉Xmanager,一个窗口可以同时控制上百台Linux和Unix服务器,功能非常强大!^_^请看: manager是一个简单易用的高性能的运行在Wind ...
- json格式键盘编码对照表
整理了一份JSON格式的键盘编码对照表.欢迎转载,但请注明出处,谢谢! { VK_BACK: 8, //退格键 VK_TAB: 9, //TAB键 VK_RETURN: 13, //回车键 VK_SH ...
- 《A First Course in Probability》-chaper5-连续型随机变量-均匀随机变量
在连续随机变量这部分,有一种特殊的随机变量X,对于X所有可能取值,P(X)都相等,我们称其为均匀随机变量. 基于均匀随机变量的定义,我们容易看到,其密度函数f(x)必然是一条平行于x轴的直线,因为这样 ...
- poj3469 最小割构图
题目链接:http://poj.org/problem?id=3469 #include <cstdio> #include <cmath> #include <algo ...
- H - Cow Contest
有N头牛,编号从1到N,参与一个变成比赛(大牛编程比赛,一般水水平敢参加???),一些牛的代码比较出色,每头牛都有一个独一无二的技能等级在这些竞争者中. 比赛循环进行在任意两头牛之间(姑且这么翻译吧) ...
- JavaBean基础
JavaBean的概念 JavaBean是一种可重复使用.且跨平台的软件组件.JavaBean可分为两种:一种是有用户界面(UI,User Interface)的JavaBean:还有一种是没有用户界 ...
- css倒三角的几种实现方式
在网页中,你在很多地方都能看到倒三角,比如tooltips,下拉菜单等.大家有几种方式来实现呢? 1.BASE64编码 图片 假如你已经有了三角形的图片,并且减少HTTP请求,那么将这个图片转换成一个 ...
- 南阳理工ACM-OJ 分数加减法 最大公约数的使用
http://acm.nyist.net/JudgeOnline/problem.php?pid=111 简单模拟: #include <iostream> #include <st ...
- 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/ ...