html5中<label>标签的for属性使用方式方法详细分
介绍的内容是html5中<label>标签的for属性使用方式方法详细分析。
在freecodecamp上HTML教程的Create a Set of Radio Buttons
这一节中,看到这样一段话,
It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.https:www.cqxftyyj.com
大概的意思是:最好的做法,是给label
标签,添加for
属性,其值与input
标签的id
属性的值相同,以在label和input之间创建关联。
同时,给出一段示例代码,如下:
<!-- Code 1 --> <label for="indoor"> <input id="indoor" type="radio" name="indoor-outdoor">Indoor </label>
代码中,label的for属性值与input的id属性值相同。从这段代码中,并不能看出关联在何处。
关于label的for属性的定义如下:
The for attribute specifies which form element a label is bound to.
译文:for属性指定label与表单中的哪个元素进行绑定。
示例代码:
<!-- Code 2 --> <form action="/action_page.php"> <input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label> <br> <input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label> <br> <input type="radio" name="gender" id="other" value="other"> <label for="other">Other</label> <br> <input type="submit" value="Submit"> </form>
对比两段代码,不难发现,
-
label与input标签的包含关系不同。Code 1 的label和input,属于包含关系,Code 2 的label和input相对独立。
-
label与input在页面上的排列方式不同。通过Chrome的开发者工具不难发现,Code 1 的运行结果,label标签将input标签遮盖,Code 2 的运行结果,label标签与input标签并列。
-
label与input一一对应。点击label的内容,对应的单端按钮都会被选中。
如果,我们将两段代码中label的for属性删除,则之前的第1点和第2点不变,变化的是第3点。Code 1 的运营结果,点击label的内容,照旧能够选中单选按钮。而 Code 2 的则不同,点击label的内容,无法选中单选按钮。
经过简单的代码运行结果对比,我们能够验证文章开头引用的那段话是正确的。为label添加for属性的这个做法,能够提高代码质量。
原文地址:https://www.cnblogs.com/zqw111/p/12928940.html
- JavaScript之Style属性学习
- JavaScript之充实文档的内容
- 快速入门系列--WCF--01基础概念
- JavaScript之insertBefore()和自定义insertAfter()的用法。
- 比较一下UG,CATIA,PRO/E,和SOLIDWORKS的优缺点?
- JavaScript之向文档中添加元素和内容的方法
- 编程的三个境界
- 单点登录系统实现
- JavaScript之共享onload
- 那些年我们写过的T-SQL(下篇)
- [原创]WCF入门级使用教程(转载请注明出处)
- JavaScrtip之JS最佳实践
- SQL学习之用通配符进行数据过滤
- 那些年我们写过的T-SQL(中篇)
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 几个IDEA高级调试技巧,完全是bug杀手啊
- Spring Security 实战干货:从零手写一个验证码登录
- LaTex学习笔记
- 聊聊dubbo-go的metricsFilter
- 配置.gitignore
- 同样的GitHub包你就下载失败
- Linux编译C++
- 聊聊dubbo-go的tracingFilter
- JDBC - 第一天
- JavaSE - 排序算法
- JavaSE - 多态的本质
- Result Maps collection does not contain value for XXX 错误
- 当端口被占用如何kill占用端口的进程
- 将本地仓库同步到Github上的远程仓库
- 毫不留情地揭开 ArrayList 和 LinkedList 之间的神秘面纱