label 属性有什么作用？如何使用？ ​

题干 ​

• label 属性

题解 ​

label 属性是 HTML 中的一个属性，它用于为 input 元素定义标注（标记）。label 元素可以提高用户界面的可用性，因为它可以让用户点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这样可以扩大元素的可点击区域，让用户更容易操作。

使用 label 属性有两种方法：

• 第一种方法是给 input 元素一个 id 属性，然后给 label 元素一个 for 属性，其值和 input 的 id 一样。这样就可以将 label 和 input 关联起来。例如：

<label for="name">姓名</label>
<input type="text" id="name" name="name">

• 第二种方法是直接将 input 元素放在 label 元素里面，这样就不需要 for 和 id 属性，因为关联已经隐含存在。例如：

<label>性别
  <input type="radio" name="gender" value="male">男
  <input type="radio" name="gender" value="female">女
</label>

label 属性的好处是：

• 可以提高用户体验，让用户更容易选择或填写表单。
• 可以提高无障碍性，让使用辅助技术的用户更容易理解应输入什么数据。当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让用户知道这个输入框的含义。
• 可以提高代码的可读性和可维护性，让开发者更容易理解表单的结构和逻辑。

注意事项：

• 不要在 label 元素内部放置可交互的元素，比如锚点或按钮。这样会让用户更难激活或触发与 label 相关联的表单输入元素。
• 不要在一个 label 元素内部放置标题元素（heading elements），会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）。
• 如果 <input> 元素声明了 type="button" 和有效的 value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。 <button> 元素也一样。

相关 ​

在 input 里，name 属性有什么作用？

placeholder 属性有什么作用？

type=hidden 隐藏域有什么作用？

贡献者 ​

isboyjc