输入框的标签

本课属于 Coddy HTML 学习旅程的“基础知识”单元。第 39 课，共 60 课。

如果没有标签，输入框的用途并不总是一目了然。标签能清楚地提示用户该字段需要输入什么类型的内容。标签使用 <label> 标签创建。

基本语法如下：

<label for="field">Label text</label>
<input type="text" id="field">

<label>：用于创建标签的标记。

for：用于连接标签和表单字段。for 的值应与表单字段的 id 匹配。

标签文本：说明表单字段用途的文字。

<input>：标签所指向的表单字段。

id：表单字段的唯一标识符，与标签中的 for 属性匹配。

关联后，点击标签文本就会将光标定位到（聚焦）对应的输入框中，也为用户提供了更大的可点击区域。

挑战

简单

在 <form> 标签内添加以下标签：

添加一个 <label>，文本为 'First Name:'，并将 for 属性设为 'firstname'。
添加一个 <input> 字段，并设置 type="text"。
<input> 字段的 id 应与标签的 for 属性匹配。

亲手试试

<!DOCTYPE html>
<html>
    <body>
        <form>
        <!-- 在这里编写代码 -->
        
        </form>
    </body>
</html>

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

基础知识中的所有课

1HTML 基础

什么是 HTML？HTML 的基本结构标签和元素嵌套标签和闭合标签 HTML 中的注释

4食谱卡片

7个人资料页

10表格

2文本与格式设置

标题段落换行粗体和斜体再次练习粗体和斜体回顾：格式设置

5添加内容

HTML 属性链接新页面链接图片图片属性

8表单和输入，第 1 部分

表单基础文本输入框输入属性密码输入框输入框的标签回顾：基础表单

11活动报名页面

3使用列表

6页面布局

div 元素行内 span 语义化标签 section 和 article 元素布局回顾

9表单和输入，第 2 部分

单选按钮复选框下拉菜单按钮表单中的按钮回顾：表单 #1 回顾：表单 #2

12最终挑战

简单个人资料卡活动邀请卡简单文章页面最喜欢的书籍列表

自己练习： Web 在线编辑器