HTML 表单

这一课你将能做到

1. 写出带 label、fieldset、legend 的完整语义化表单，知道 label 的两种关联方式
2. 使用 text/email/password/number/date/file 等 10+ 种 input 类型，并配置 placeholder、required、pattern、min/max 等验证属性
3. 用 select/optgroup/option、textarea、button 构建复杂表单控件，理解 GET/POST 提交差异和文件上传的 enctype

为什么要学

表单是用户与网站交互的唯一入口：登录注册、搜索、下单、评论、文件上传。一个表单做不好，用户流失、数据错误、安全漏洞全来了。HTML5 提供了丰富的 input 类型和内置验证，但很多初学者还在用 <input type="text"> 收邮箱、用 onclick 做提交按钮——既浪费浏览器能力，又增加 JS 负担。

人话：表单是网站的「收银台」。收银台设计得好，用户顺畅结账；设计得烂，用户到门口掉头就走。

先建立图像

表单的三大核心关系：

form（容器）
  ├── action：提交到哪
  ├── method：GET / POST
  ├── enctype：application/x-www-form-urlencoded（默认）
  │            / multipart/form-data（文件上传）
  │            / text/plain（纯文本，几乎不用）
  │
  ├── label（标签）──for──→ input（控件）
  │      │                    ├── type：text/email/password/...
  │      │                    ├── name：提交时的 key
  │      │                    ├── value：默认值
  │      │                    ├── required/pattern/min/max：验证
  │      │                    └── placeholder：提示
  │      └── 或 label 包裹 input
  │
  ├── fieldset（分组）── legend（组标题）
  │
  └── button（提交）
        ├── type="submit"：提交表单
        ├── type="button"：纯按钮，配合 JS
        └── type="reset"：重置

跟着做

步骤 1：最小可用表单

新建 forms.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单演示</title>
</head>
<body>
    <form action="/submit" method="POST">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>

        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email" required>

        <button type="submit">注册</button>
    </form>
</body>
</html>

核心规则：

• label for="id" 与 input id="id" 关联，点击 label 聚焦 input。
• name 是提交时的 key，没有 name 的控件不会被提交。
• required 触发浏览器内置必填验证。

步骤 2：label 的两种写法

<!-- 方式一：for/id 关联（推荐，结构清晰） -->
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">

<!-- 方式二：label 包裹（隐式关联，无需 id） -->
<label>
    确认密码：
    <input type="password" name="confirm">
</label>