核心 · 前端第 2 课 / 共 8 课免费阅读

表单与无障碍 · 前端：HTML、CSS 与 JavaScript

网页怎么向用户要信息？

为什么需要它

直觉理解

表单就是一组输入框，再加一个把它们发出去的按钮：

<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Log in</button>
</form>

**type** 决定输入框的种类：text、email、password、number、checkbox…… 手机会弹出对应的键盘，浏览器也会帮你检查格式。
**name** 是服务器收到的键名：email=ada@example.com。
**<label for="email">** 给 id 为 email 的输入框起名字。点标签会聚焦到输入框，读屏软件也会把标签念出来。也可以把输入框直接放在 label 里面。
**required** 表示这一项为空时不能提交。

placeholder 只是提示，不是标签：一开始输入它就消失了。

定义

标签（label）

The visible name of an input, connected by for="id" or by wrapping the input. Screen readers announce it when the input is focused.
输入框的可见名称，用 for="id" 关联，或者把输入框包在里面。输入框获得焦点时，读屏软件会念出它。

无障碍

Making a page usable by everyone, including people using a keyboard only, a screen reader or a zoomed-in screen.
让每个人都能使用页面，包括只用键盘、用读屏软件或者把屏幕放大的人。

示例

一个登录表单

在互动课里运行

每个输入框都有标签、name，以及符合内容的 type。

<form action="/login" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <label for="pw">Password</label>
  <input id="pw" name="password" type="password" required>

  <button type="submit">Log in</button>
</form>

逐步执行

L1action 是数据发往哪里，method 是怎么发：post 不会把数据放进地址栏。
L2这个标签属于 id="email" 的输入框。
L6输入的字符显示成圆点。
L8点它（或按回车）提交表单。

选择项

在互动课里运行

复选框用于是/否，下拉框用于多选一。

<form>
  <label><input type="checkbox" name="news"> Send me the newsletter</label>

  <label for="size">Size</label>
  <select id="size" name="size">
    <option>Small</option>
    <option>Medium</option>
    <option>Large</option>
  </select>
</form>

逐步执行

L2输入框放在 label 里面，所以点文字也能勾选。
L5下拉框；每个 option 是一个选项。

常见错误

用 placeholder 代替标签

一开始输入提示就消失了，很多读屏软件也会跳过它。一定要加一个真正的 label。

用 div 假装按钮

<div onclick=…> 用 Tab 键到不了，也不会被念成按钮。请用 <button>。

忘了写 name

没有 name 的输入框根本不会随表单发送。

小测验

1. `<label for="zip">` 靠什么和输入框关联？

A输入框有 id="zip"
B输入框有 name="zip"
C标签就在输入框的上方

查看答案

答案：A

for 对应输入框的 id。name 是服务器收到的键名。

2. 哪种 type 会检查格式，并在手机上显示 @ 键？

Atype="email"
Btype="text"
Ctype="at"

查看答案

答案：A

type="email" 会弹出邮箱键盘，并拦下没有 @ 的内容。

动手练习

3 道练习，分三层：先预测程序的输出，再按新需求改程序，最后从零写一个。代码在浏览器里运行，提交马上判题。

预测输出哪些输入框有标签？
读屏软件依次聚焦到这几个输入框。哪些能念出标签？
改需求修好注册表单
这个表单看起来没问题，其实有三个毛病：一个标签指向了错误的 id，邮箱输入框不检查格式，密码直接显示在屏幕上。把三个都修好。
从零写订阅表单
写一个表单，用 method="post" 发送到 /subscribe。它需要：
- 一个邮箱输入框，name="email"，标记为 required，有标签
- 一个复选框，name="weekly"，有标签（「Weekly digest」）
- 一个提交按钮，文字是 Subscribe

在互动课里练这一课

打开互动课，这些例子都能直接改、直接运行，练习题提交马上判题。免费开始，不用注册。

打开互动课课程地图

互动课按顺序解锁：前面的课还没学，会先带你到课程地图。

本课术语

术语	中文	英文定义
Form	表单	A group of inputs whose values are sent together.
Label	标签（label）	The name of an input; linked with for="id".
Accessibility (a11y)	无障碍	Making pages usable by everyone, whatever device or ability.