HTML 输入标签

介绍

HTML <label> 标签用于为网页上的任何 HTML 元素添加标题或标签文本。在本实验中，我们将学习如何在 HTML 中使用 <label> 标签。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

为输入元素添加标签

1. 在你喜欢的文本编辑器中打开 index.html 文件。
2. 添加以下代码以创建一个带有标签的输入元素：

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

3. label 元素的 for 属性应与它关联的输入元素的 id 属性相匹配。

使用 Label 元素创建可点击区域

1. 在你喜欢的文本编辑器中打开 index.html 文件。
2. 添加以下代码以在输入元素周围创建一个可点击区域：

<label>
  <input type="checkbox" />
  Click here to select
</label>

3. 现在点击 "Click here to select" 文本将选中复选框。

将标签与表单元素关联

1. 在你喜欢的文本编辑器中打开 index.html 文件。
2. 添加以下代码以创建一个带有标签的表单元素：

<form action="/" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Submit" />
</form>

3. label 元素的 for 属性应与它关联的表单元素的 id 属性相匹配。

为标签添加样式

1. 在你喜欢的文本编辑器中打开 index.html 文件。
2. 添加以下代码以创建一个带有 CSS 类的 label 元素：

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

3. 在你的样式表中添加以下 CSS 来为 label 添加样式：

.large-label {
  font-size: 24px;
  font-weight: bold;
}

使用 Label 元素提升可访问性

1. 在你喜欢的文本编辑器中打开 index.html 文件。
2. 添加以下代码以创建一个带有标签的输入元素，以提升屏幕阅读器的可访问性：

<label for="name">Name:</label>
<input type="text" id="name" name="name" aria-label="Enter your name" />

3. aria-label 属性为输入元素提供了一个文本标签，该标签对屏幕阅读器是可访问的。

总结

在本实验中，我们学习了如何使用 HTML <label> 标签为网页上的 HTML 元素添加标题或标签文本。<label> 标签对于提升可访问性和增加元素的可点击区域非常有用。我们还学习了如何将标签与表单元素关联，以及如何使用 CSS 为标签添加样式。