国际访客建议访问 Primers 编程伙伴 国际版站点 > HTML 教程 > label 以获得更好的体验。

# HTML 的 <label> 标签

请查看 HTML 元素帮助手册 了解更多 HTML 元素。

HTML 的 <label> 元素(标签)表示用户界面中某个元素的说明。

# 属性

请查看 HTML 元素的全局属性 了解 HTML 元素的全局属性。
  • for: 即和 <label> 元素在同一文档中的 可关联标签的元素 的 id。文档中第一个 id 值与 <label> 元素 for 属性值相同的元素,如果可关联标签(labelable),则为已关联标签的控件,其标签就是这个 <label> 元素。如果这个元素不可关联标签,则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同,for 属性对这些元素也没有影响。

  • form: 表示与 label 元素关联的 <form> 元素(即它的表单拥有者)。如果声明了该属性,其值应是同一文档中 <form> 元素的 id。因此你可以将 label 元素放在文档的任何位置,而不仅作为 <form> 元素的后代。

# 示例

<fieldset>
    水果(多选):
    <input type="checkbox" id="pineapple" name="pineapple"/> <label for="pineapple">菠萝</label>
    <input type="checkbox" id="watermelon" name="watermelon"/> <label for="watermelon">西瓜</label>
    <input type="checkbox" id="strawberry" name="strawberry"/> <label for="strawberry">草莓</label>
</fieldset>

<fieldset>
    水果(单选):
    <!-- 使用相同的 name 表示一个选择的不同选项 -->
    <input type="radio" name="fruit" id="pineapple" value="pineapple"/> <label for="pineapple">菠萝</label>
    <input type="radio" name="fruit" id="watermelon" value="watermelon"/> <label for="watermelon">西瓜</label>
    <input type="radio" name="fruit" id="strawberry" value="strawberry"/> <label for="strawberry">草莓</label>
</fieldset>

# 推荐阅读

本文 更新于: 2025-11-27 09:38:03 创建于: 2025-11-27 09:38:03