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

转载于:https://www.cnblogs.com/lijinwen/p/5561535.html

html form label标签基础语法结构与使用案例教程(转载)相关推荐

AST语法结构树初学者完整教程
AST语法结构树初学者完整教程编写你的第一个 Babel 插件不太喜欢上来就讲大道理,先来个小栗子,做个简单而又实用的功能,做完后,理论你就理解一大半了. 我们需要antd里面的一个组件Butto ...
Spring MVC-表单（Form）标签-单选按钮集合（RadioButtons）示例（转载实践）
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_radiobuttons.htm 说明:示例基于Spring MVC 4.1.6. ...
用dl元素编辑html个人信息,html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法一.dl dt dd认识 - TOP html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与tabl ...
c++ 结构体初始化_【干货】c语言基础语法——结构体
1.关于C语言结构体的引入学习环境搭建1_Linux C语言_嵌入式开发工程师-创客学院www.makeru.com.cn 在实际问题中有时候我们需要几种数据类型一起来修饰某个变量. 例如一个学生 ...
java语法结构是什么意思_java - 基础 - 语法结构
1. 顺序结构 2. 分支结构 if(){ } else{ } switch: class test{ public static void main(String[] args){ int x = ...
sass编写高质量的css---（基础语法结构）
一:基础 1.Sass:最早也是最成熟的CSS预处理语言 2.Less:兼容CSS的最流行的css预处理语言 3.Stylus:主要用于node.js社区二:scss写法 1)混入 @mixin a ...
javascript入门及基础语法结构
1.什么是变量? 如何声明变量?变量名的命名规则变量: 可变的量 var 变量名=变量值; 变量的组成: (1)字母 _ $ 不能以数字开头 ,(2)变量名不能是JavaScript关键字和保留字开 ...
前端学习笔记之1 基础语法及标签
引言 : 博主目前是一名iOS开发者, 所会的语言有Objective-C 和 Swift, 目前正在学习前端, 增强一下技术能力, 等学会点皮毛之后打算接触一下React Native; 这篇文章只 ...
前端 day01 常用基础语法
目录基础语法-文本标签基础语法-列表标签基础语法-实体字符基础语法-图片标签案例-表格案例-表单标签基础语法-文本标签 <!DOCTYPE html> <html la ...

html form label标签基础语法结构与使用案例教程(转载)

html form label标签基础语法结构与使用案例教程(转载)相关推荐

最新文章

热门文章