HTML label 标签

🌙
手机阅读
本文目录结构
axihe

HTML <label> 标签功能

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。

不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。

就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

HTML <label> 标签使用

带有两个输入字段和相关标记的简单 HTML 表单:

<form action="?">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="提交">
</form>

HTML <label> 标签演示




浏览器支持

目前大多数浏览器支持 <label> 标签。


提示和小技巧

提示:”for” 属性可把 label 绑定到另外一个元素。请把 “for” 属性的值设置为相关元素的 id 属性的值。


HTML4 与 HTML5 之间的差异

“form” 属性是 HTML5 的新属性。


属性

New:HTML5 新属性。

属性描述
forelement_id规定 label 与哪个表单元素绑定。
formNewform_id规定 label 字段所属的一个或多个表单。

全局属性

<label> 标签支持全局属性,查看完整属性表 HTML 全局属性。


事件属性

<label> 标签支持所有 HTML 事件属性。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang