输入控件

上一节用 input 收集普通文字。现在我们为不同问题选择不同输入类型，帮助读者正确填写。input 的 type 决定控件类型，name 决定提交字段名，id 用来与 label 关联。继续保留可见 label，不要只在源码里给字段起名字。

根据内容选择 type

text 适合姓名等单行文字；email 适合电子邮箱，浏览器可检查基本格式；password 通常把输入内容遮住，但不会因此加密数据；number 适合需要数值运算或范围约束的数量；date 用来选择日期，控件外观可能随浏览器和系统变化。

电话号码、邮政编码虽然包含数字，却不一定适合 number：它们可能有前导零或符号，也不需要加减运算。电话可以使用 type="tel"，但这本身不会保证号码格式正确。

区分提示、默认值与限制

<label for="email">电子邮箱</label>
<input id="email" name="email" type="email" placeholder="[email protected]" required>

placeholder 是空字段中的示例提示，输入后就会消失，不能代替 label。value="..." 则设置初始实际值；用户不修改时，那个值仍属于字段内容。

required 表示必填，是一种布尔属性：写出它就表示启用，不需要加 ="true"。写 required="false" 也仍然启用。想取消必填，应该删除 required。

<label for="guests">参加人数（1 到 6）</label>
<input id="guests" name="guests" type="number" min="1" max="6" step="1" value="1">

min 和 max 限制数值范围，step="1" 指定步进为 1。控件有时仍允许暂时输入不合法内容，提交时才提示，这不代表限制失效。对于 text 等文字字段，maxlength 可以限制最大长度；不要把它当成 number 的数值上限。

多行文字用 textarea

textarea 适合较长留言，它有结束标签，初始文字写在开始与结束标签之间，而不是 value 属性中。可以用 rows 指定初始可见行数，并用 label 关联。

Lab 的第一组输入用于观察浏览器原生校验：尝试留空邮箱，或输入带 @ 但缺少域名的地址，如 a@，再点击提交。预览允许触发校验，但不会发送数据。浏览器校验帮助用户尽早发现错误，正式服务仍必须独立检查收到的数据。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet Club</title>
</head>
<body>
  <h1>Reserve a seat</h1>
  <form action="/register" method="post">
    <p><label for="email">Email</label>
    <input id="email" name="email" type="email" placeholder="[email protected]" required></p>
    <p><label for="guests">Guests (1 to 6)</label>
    <input id="guests" name="guests" type="number" min="1" max="6" step="1" value="1" required></p>
    <button type="submit">Check entries</button>
  </form>
</body>
</html>