📝 第八章：表单与用户输入

创建可交互的网页，收集用户数据

8.1 <form> 结构与提交机制

表单是网页与用户交互的主要方式，用于收集用户输入的数据。

<form action="/submit" method="POST">
    <!-- 表单控件 -->
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    
    <button type="submit">提交</button>
</form>

form 的重要属性

属性 说明 常用值
action 数据提交的目标 URL "/submit"、"process.php"
method HTTP 请求方法 "GET"、"POST"
enctype 编码类型（上传文件时使用） "multipart/form-data"
target 提交后在何处显示响应 "_self"、"_blank"
GET vs POST：

8.2 输入控件大全 (<input>)

<input> 是最常用的表单元素，通过 type 属性可以改变其功能。

文本类输入

type 用途 示例
text 单行文本 <input type="text">
password 密码（隐藏输入） <input type="password">
email 邮箱地址（自动验证） <input type="email">
tel 电话号码 <input type="tel">
url URL 地址（自动验证） <input type="url">
search 搜索框 <input type="search"> 
<!-- 文本类输入示例 -->
<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="email" name="email" placeholder="example@mail.com">
<input type="tel" name="phone" placeholder="138-0000-0000">
<input type="search" name="search" placeholder="搜索...">

数值类输入

type 用途 特殊属性
number 数字输入 min, max, step
range 滑块范围 min, max, step, value 
<!-- 数字输入 -->
<input type="number" name="age" min="0" max="150">

<!-- 滑块 -->
<input type="range" name="volume" min="0" max="100" value="50">

日期时间类输入

type 用途 示例值
date 日期选择器 2026-03-02
time 时间选择器 14:30
datetime-local 日期时间 2026-03-02T14:30
month 月份选择 2026-03
week 周选择 2026-W09 
<input type="date" name="birthday">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="expire">

选择类输入

复选框 (checkbox)

允许多选的选项。

<label>
    <input type="checkbox" name="hobbies" value="reading"> 阅读
</label>
<label>
    <input type="checkbox" name="hobbies" value="sports"> 运动
</label>
<label>
    <input type="checkbox" name="hobbies" value="music"> 音乐
</label>

单选框 (radio)

同一 name 的 radio 只能选择一个。

<label>
    <input type="radio" name="gender" value="male"> 男
</label>
<label>
    <input type="radio" name="gender" value="female"> 女
</label>
<label>
    <input type="radio" name="gender" value="other"> 其他
</label>

文件上传

<!-- 单文件上传 -->
<input type="file" name="avatar" accept="image/*">

<!-- 多文件上传 -->
<input type="file" name="documents" multiple>

<!-- 限制文件类型 -->
<input type="file" accept=".pdf,.doc,.docx">

其他输入类型

<!-- 颜色选择器 -->
<input type="color" name="favorite-color" value="#ff0000">

<!-- 隐藏字段 -->
<input type="hidden" name="user-id" value="12345">

8.3 标签关联 (<label>)

label 元素用于描述表单控件，提升用户体验和可访问性。

<!-- 方式 1：使用 for 属性关联（推荐）-->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方式 2：直接包裹（简洁）-->
<label>
    密码：
    <input type="password" name="password">
</label>
label 的好处：

8.4 其他表单元素

下拉菜单 (<select>)

<!-- 基本下拉菜单 -->
<label for="city">选择城市：</label>
<select id="city" name="city">
    <option value="">请选择</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

<!-- 分组选项 -->
<select name="food">
    <optgroup label="水果">
        <option>苹果</option>
        <option>香蕉</option>
    </optgroup>
    <optgroup label="蔬菜">
        <option>西红柿</option>
        <option>黄瓜</option>
    </optgroup>
</select>

<!-- 多选 -->
<select name="skills" multiple size="4">
    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>
    <option>Python</option>
</select>

多行文本 (<textarea>)

<label for="message">留言：</label>
<textarea id="message" name="message" 
          rows="5" 
          cols="50" 
          placeholder="请输入您的留言..."></textarea>

按钮 (<button> vs <input type="button">)

<!-- 提交按钮 -->
<button type="submit">提交表单</button>
<input type="submit" value="提交表单">

<!-- 重置按钮 -->
<button type="reset">重置</button>
<input type="reset" value="重置">

<!-- 普通按钮（用于 JavaScript）-->
<button type="button" onclick="doSomething()">点击我</button>

<!-- button 可以包含 HTML 内容 -->
<button type="submit">
    <img src="icon.png" alt="">
    <span>提交</span>
</button>

数据列表 (<datalist>)

为输入框提供自动完成建议。

<label for="browser">选择浏览器：</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
</datalist>

8.5 表单验证属性

HTML5 提供了内置的表单验证功能，无需 JavaScript。

属性 说明 示例
required 必填字段 <input required>
pattern 正则表达式验证 <input pattern="[0-9]{3}-[0-9]{4}">
min / max 最小/最大值 <input type="number" min="1" max="100">
minlength / maxlength 最小/最大长度 <input minlength="6" maxlength="20">
placeholder 提示文本 <input placeholder="请输入..."> 
<!-- 必填字段 -->
<input type="text" name="username" required>

<!-- 正则验证（手机号）-->
<input type="tel" name="phone" 
       pattern="1[3-9]\d{9}" 
       placeholder="请输入11位手机号">

<!-- 长度限制 -->
<input type="password" name="password" 
       minlength="8" maxlength="20" 
       required>

8.6 表单分组 (<fieldset>, <legend>)

用于将相关的表单控件分组。

<form>
    <fieldset>
        <legend>个人信息</legend>
        
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
    </fieldset>
    
    <fieldset>
        <legend>收货地址</legend>
        
        <label for="address">详细地址：</label>
        <input type="text" id="address" name="address">
        
        <label for="zipcode">邮编：</label>
        <input type="text" id="zipcode" name="zipcode">
    </fieldset>
    
    <button type="submit">提交</button>
</form>

🎯 表单分组演示

个人信息

✏️ 动手练习

创建一个完整的用户注册表单，包含：

  1. 使用 fieldset 分组：
    • 账户信息（用户名、密码、确认密码）
    • 个人信息（姓名、邮箱、电话、生日）
    • 偏好设置（兴趣爱好复选框、性别单选）
  2. 所有字段添加适当的验证属性
  3. 使用 label 正确关联所有输入框
  4. 添加提交和重置按钮
  5. 使用 datalist 为某个字段添加自动完成
← 上一章：HTML5 语义化布局 下一阶段：Head 进阶与 SEO →