label标签中的for属性

1. 使用介绍

label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。

<label for="test">label标签</label>
<input type="text"  id="test">

如上所示，该label便签和input便签完成了绑定，当鼠标点击“label标签”时，input元素会被触发，用户即可完成输入。

2. 为什么要给label标签加上for属性呢？

label标签加上for属性绑定了表单元素后，可以提高用户体验。
当点击label标签内的文本后，就会触发绑定的表单元素。也就是说，当用户渲染该标签时，浏览器就会自动将焦点转到绑定的表单控件上。

ps：表单控件

input、select、textarea、button和h5的datalist、keygen、output。
其中当label标签和select标签绑定后，点击label标签文本内容，不能触发select便签。

label标签中的for属性相关推荐

html.textboxfor属性,label标签中的for属性与form属性
HTML中的label标签是干什么的?在讲这个标签之前先来做一个示范,请点击以下的文本框控件: 你的姓名是: 大家都知道上面的文本框使用的是input元素,当鼠标点击文本框时就能输入文本,若是点击文本 ...
[html] html标签中的lang属性有什么作用？
[html] html标签中的lang属性有什么作用? 根据lang属性来设定不同语言的css样式,或者字体告诉搜索引擎做精确的识别让语法检查程序做语言识别帮助翻译工具做识别帮助网页阅读程序做识别等等 ...
script标签中的crossorigin属性
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助. 而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 . 但是对于跨域的资源 , ...
html标签中的lang属性
写在html标签中的lang属性作用:声明当前页面的语言类型. 如: <html lang='en'></html> //英文 <html lang='zh'>&l ...
html中label如何居中,怎么让label标签中的文字居中显示
label标签如何使用 html页码中的 label标签使用方法: 其实很多人都一样,喜欢的不是学校,不是班级,而是坐在教室的那群人请点击文本标记之一,就可以触发相关控件: HTML代码中的labe ...
[暑假]＜script＞标签中的type属性详解
type属性是必须写的属性吗? 不写的情况: <script>标签中的type属性不是必须写的属性, 因为按照惯例,这个值始终都是"text/javascript", ...
c:out标签中的escapeXML属性
<c:out>标签中的escapeXML属性在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...
cout标签中的escapeXML属性
<c:out>标签中的escapeXML属性在<c:out>中,escapeXML属性默认为true. 当设置escapeXML的属性为true时,将value中的值以字符串 ...
Vue的label标签中for的作用
先上代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...

label标签中的for属性

label标签中的for属性相关推荐

最新文章

热门文章