第 4 课：label与文本输入框

日期：2026-09-03
课程序号：第 4 课
知识点：input、label、id 与 name

用途

为学习计划建立一个可识别、可聚焦的文本输入字段。

核心概念

label 的 for 与 input 的 id 完全一致才能建立显式关联；id 在页面内应唯一。
name 表示提交时的字段名。placeholder 只是提示，不能替代可见标签。

最小代码或操作示例

html

<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8"><title>学习计划输入</title></head>
<body>
  <label for="topic">今天学习什么？</label>
  <input id="topic" name="topic" type="text" placeholder="例如：循环">
</body>
</html>

3～5 分钟练习

保存为 HTML 并打开，点击标签看是否聚焦；再增加“练习备注”字段，不能重复使用 topic 作为 id。

参考答案

html

<label for="note">练习备注</label>
<input id="note" name="note" type="text">
<!-- 点击各自标签，焦点应进入对应输入框。本课没有提交或保存功能。 -->

与上一课的联系

上一课用列表组织阅读内容；本课加入输入控件，同时保持语义明确。