标签说明与按钮

我们已经在表单中配对使用 label 和 input。这一节专门检查：读者是否知道每个框该填什么，以及按钮是否执行符合预期的动作。表单的正确性不仅是“能输入文字”，还包括能用鼠标、触屏和键盘理解、操作。

label 给控件一个明确的名字

<label for="reader-name">姓名</label>
<input id="reader-name" name="readerName" type="text">

label 的 for 匹配 input 的 id，而不是 name。点击“姓名”两个字，输入框通常会获得焦点，你接着打字就会输入到这个框中。辅助技术也可以利用这个关联说明控件用途。如果把 for 写成 readerName，却保留 id="reader-name"，关联就断开了。

id 必须在同一文档中唯一。复制一段表单代码后，记得同时修改新控件的 id 和对应 label 的 for。label 也可以直接包住控件建立关联，本课程优先使用明确的 for/id 配对，方便逐项检查。

placeholder 不能代替说明

placeholder 输入后会消失，默认颜色也可能较浅，适合展示格式示例，不适合独自承担字段名称。把“电子邮箱”写在可见 label 中，再把 [email protected] 放在 placeholder 中，两者职责就清楚了。特殊要求如“最多四人”也应可见，不要只依靠悬停提示。

明确写出按钮类型

button 的标签内容是按钮上可见的文字，type 指定行为。submit 请求提交所属表单；reset 把表单控件恢复为初始值，未必是清空；button 没有默认提交行为，后续可以用 JavaScript 为它添加动作。

<button type="submit">提交报名</button>
<button type="reset">恢复初始值</button>
<button type="button">普通按钮</button>

在普通表单中，省略 type 的 button 通常默认是提交按钮。因此即使它写着“帮助”，也可能意外触发表单提交。现在就养成显式写 type 的习惯。reset 容易让人丢失已填写的内容，实际产品里应谨慎使用，本节通过它观察初始值的含义。

Lab 先提供正确关联，再提供故意写错 for 的版本。尝试点击说明文字、按 Tab 移动焦点，修正后再次比较。输入不同姓名后点击“Restore defaults”，检查它回到最初的 Lin，而不是变空。普通按钮在没有 JavaScript 时不会自动弹窗，这是预期行为。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <form action="/register" method="post">
    <p><label for="reader-name">Name (click this label)</label>
    <input id="reader-name" name="readerName" type="text" value="Lin" required></p>
    <button type="submit">Check entries</button>
    <button type="reset">Restore defaults</button>
    <button type="button">Ordinary button</button>
  </form>
</body>
</html>