html label标签的for属性有什么作用label标签的for属性
首先我们看看关于label标签的for属性介绍:
<label>专为input元素服务,为其定义标记。
for属性规定label与哪个表单元素绑定
label和表单控件绑定方式又两种:
1.将表单控件作为label的内容,这样就是隐士绑定。
此时不需要for属性,绑定的控件也不需要id属性。
隐式绑定:
<label>Date of Birth: <input type="text" name="DofB" /></label>
2.为<label>标签下的for属性命名一个目标表单的id,这就是显示绑定。
显式绑定:
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" />
为什么要给<label>加上for属性?
给<label>加了for属性绑定了input控件后,可以提高鼠标用户的用户体验。
如果在label元素内点击文本,就会触发此控件。就是说,当用户渲染该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
还有关于html label标签的for属性作用:
label标签的for属性的效果就是,鼠标点击“女”实现radio选中的效果,主要
归功于for=nv 而且必须要求input文本框的id也等于nv,男这个radio作对比,没有这个效果
<div>
<label for="nan1">男</label>
<input type="checkbox" />
<label for="nv">女</label>
<input type="checkbox" />
</div>
代码在浏览器中显示的效果如图:
图中是个可以多选的选框。大家都可以用着实验实验。
来看个html label标签的for属性实例
拥有两个带有标签的单选按钮的表单:
<form action="demo_form.asp">
<label for="male">学新通技术网</label>
<input type="radio" name="sex" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" value="female"/>
<input type="submit" value="Submit"/>
</form>
这个的效果如图:
这个图是个单选按钮,不能多选。
【小编推荐】
html tbody标签是块级元素吗?html tbody标签的基础用法
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tangfkhbb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01