搜尋結果
HTML <label> 表單欄位標題 - HTML 語法教學 Tutorial. <label> 用來給表單的控制元件一個說明標題，可以搭配 <label> 的像是 input, textarea, select, button, meter, output, progress 這些表單元件。 舉個例子： <div> <label> Do you like cheese? </label> <input type="checkbox"> </div> <div> <label> Do you like peas? </label> <input type="checkbox"> </div> 顯示結果： Do you like cheese? Do you like peas?
- 尝试一下
- 属性
- 使用 CSS 样式
- 无障碍问题
- 浏览器兼容性
将一个 和一个 元素相关联主要有这些优点：
•标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
•你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
将一个 和一个 元素匹配在一起，你需要给 一个 id 属性。而 需要一个 for 属性，其值和 的 id 一样。
另外，你也可以将 直接放在 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：
其他使用事项：
该元素包含 全局属性。
for
即和 元素在同一文档中的 可关联标签的元素 的 id。文档中第一个 id 值与 元素 for 属性值相同的元素，如果可关联标签（labelable），则为已关联标签的控件，其标签就是这个 元素。如果这个元素不可关联标签，则 for 属性没有效果。如果文档中还有其他元素的 id 值也和 for 属性相同，for 属性对这些元素也没有影响。
form
元素没有特别的样式考虑——结构上， 是简单的行内元素，所以可使用和 或 元素大致相同的方式来应用样式。你也可以任意方式为 应用样式，只是不要让文本难以阅读。
交互内容
不要在 label 元素内部放置可交互的元素，比如 anchors 或 buttons。这样做会让用户更难激活/触发与 label 相关联的表单输入元素。
标题
在一个 元素内部放置标题元素（heading elements）会干扰许多辅助技术，原因是标题通常被用于辅助导航（a navigation aid）。若标签内的文本需要做视觉上的调整，应该使用适用于 元素的 CSS 类。 若一个 表单，或表单中的一部分需要一个标题，应使用 元素置于 元素中。
按钮
若 元素声明了 type="button" 和有效的 value 属性，则不需要为其添加标签。添加标签可能会影响辅助技术理解这个输入按钮的语义。 元素也一样。
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
Example. Three radio buttons with labels: <form action="/action_page.php">. <input type="radio" id="html" name="fav_language" value="HTML">. <label for="html"> HTML </label><br>. <input type="radio" id="css" name="fav_language" value="CSS">. <label for="css"> CSS </label><br>.
<label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<kbd> <legend> 定义和用法. <label> 标签为 input 元素定义标注（标记）。 label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。 如果您在 label 元素内点击文本，就会触发此控件。 就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 <label> 标签的 for 属性 应当与相关元素的 id 属性相同。 <label> 标签可为多个元素定义标签（标记）： 使用上述元素与 label 的正确方式将有益于以下用户： 屏幕阅读器用户（当用户聚焦在元素上时，将朗读标签） 难以点击非常小的区域（例如复选框）的用户 - 因为当用户单击 <label> 元素中的文本时，它会切换输入（这增加了点击区域） 另请参阅：
2024年2月22日 · The <label> HTML element represents a caption for an item in a user interface. Try it Associating a <label> with a form control, such as <input> or <textarea> offers some major advantages:
2023年10月27日 · 前端技術. HTML 初學者指南：探索 label for 屬性的用法. By 徐培鈞 2023 年 10 月 27 日. 更新日期： 2023 年 10 月 27 日. 基本語法. 在 HTML 中，使用 label for 屬性的基本語法，相對於其他語法直接且簡單。 for 屬性的值，應該是它所標籤的 form 元素的 id 屬性值。 以下是 label for 屬性的基本語法示例： <label for="element_id">標籤文字</label> <input type="text" id="element_id" /> 在上述例子中： <label> 標籤是用來為 form 元素提供文字標籤，它可以幫助使用者理解 form 元素的用途。
