HTML Label标签

在HTML中，<label>标签用于定义表单元素的标签。

<label>标签通常与<input>元素一起使用，以便向用户解释该表单元素的用途。 当用户点击此标签时，浏览器通常将焦点转移到与标签关联的表单元素上。

语法

<label for="id">text</label>

• for属性定义关联的表单元素
• text是显示在标签中的文本内容

<input type="text" id="name">
<label for="name">Name:</label>

使用

当for属性与id属性相同时

当label元素中的for属性与input元素中的id属性值相同时，"Name:"标签将与文本输入框相关联。

<label for="name">Name:</label>
<input type="text" id="name">

直接嵌套

也可以在label元素中直接嵌套input元素。当用户单击标签时，与标签相关联的输入框会获得焦点。

<label>
  Name:
  <input type="text" id="name">
</label>

隐藏标签

有时，您需要在标签中包含input元素，但不希望显示标签文本。可以使用CSS将标签文本隐藏。

<label for="name" class="sr-only">Name:</label>
<input type="text" id="name">

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

示例

基本示例

<form action="#">
  <label for="name">Name:</label>
  <input type="text" id="name">
</form>

隐藏标签示例

<form action="#">
  <label for="name" class="sr-only">Name:</label>
  <input type="text" id="name">
</form>

总结

<label>标签是一个定义表单元素标签的标签。它可将标签与表单元素关联起来，以便向用户解释表单元素的用途。使用时，需要指定表单元素的id属性，或者直接将表单元素嵌套在标签中。在某些情况下，可能需要隐藏标签文本。