HTML--form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子:
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form> 练习:

HTML--form表单中的label标签的更多相关文章
- 在学习HTML——form表单中的label标签时的一点小体会
在我啃了一遍书本之后,开始了在慕课看视频的过程,从最开始的HTML+CSS的基础课程看起,在第5-9小节讲到了form表单的label标签, 首先看一下慕课的讲解: label 标签不会向用户呈现任 ...
- form表单中的label标签
小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用. label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性.如果你在 labe ...
- form表单中使用a标签代替button或commit进行数据提交
1.申明form的id:xxx 2.在<a>标签内书添加属性 onclick="document:xxx.submit()"
- Unieap3.5-禁用Form表单中的全部标签
var form=unieap.byId('customerForm'); var children=form.getDescendants(); dojo.forEach(children,func ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jQuery中设置form表单中action值的方法
jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈 html代码: <form id="myFormId&quo ...
- form表单中button按钮返回上一页解决办法
解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...
随机推荐
- 编写函数,第一个参数指定今天是星期几(1 ~ 7),第二个参数指定天数n,返回n天后是星期几
def week(today, n): s = n % 7 + today return "n天后是星期:{}".format(s) print(week(1, 3))
- Webstorm如何配置自动补全前缀--autoprefixer
我们在写样式代码时,对不同平台会有不同的兼容性写法,会在代码前加前缀,但是手动加前缀很费时间而且很容易弄错.Webstorm编辑器是有自带补全前缀功能的,那为什么还要写这篇配置博客,因为Webstor ...
- springboot学习-jdbc操作数据库--yml注意事项--controller接受参数以及参数校验--异常统一管理以及aop的使用---整合mybatis---swagger2构建api文档---jpa访问数据库及page进行分页---整合redis---定时任务
springboot学习-jdbc操作数据库--yml注意事项--controller接受参数以及参数校验-- 异常统一管理以及aop的使用---整合mybatis---swagger2构建api文档 ...
- UVALive 6511 Term Project
Term Project Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Origi ...
- HDU 1220 简单数学题
题目大意是 在魔方上找到有多少对小立方块它们之间连接的点不超过两个 因为任意两个立方块之间相连的点就只有0,1,2,4 这样4种情况 那么我们只需要考虑总共的组成立方块对数 sum = C(2 , n ...
- Memcached启动提示:cann't run as root without the -u switch
如果没有带 -u root 的话就会报: can't run as root without the -u switch 解决方法: 带-u root就行了. 出现的原因: 1.可能在root用户下启 ...
- Spring Boot中使用Swagger2生成RESTful API文档(转)
效果如下图所示: 添加Swagger2依赖 在pom.xml中加入Swagger2的依赖 <!-- https://mvnrepository.com/artifact/io.springfox ...
- SQL Server memory – Internals
https://blogs.msdn.microsoft.com/karthick_pk/2013/03/16/sql-server-memory-internals/
- vue2源码浏览分析02
1.组件初始化方法 init Vue.prototype._init = function (options) { /* istanbul ignore if */ if ("develop ...
- spring boot日期转换
spring boot 作为微服务简易架构.拥有其自身的特点.快速搭建架构 简单 快捷.这里我只是简单的介绍下我遇到的其中的 两个问题.第一前台页面传递的时间类型 无法自动映射到Java的 Date ...