HTML 表单完全指南 — 从基础输入到高级验证
全面掌握HTML表单：所有输入类型、表单属性、HTML5验证、最佳实践，构建用户友好的数据收集界面 · 难度：进阶 · +15XP
HTML 表单完全指南
表单是网页与用户交互的核心方式。登录注册、搜索过滤、问卷调查、在线购物——这一切都离不开表单。<form> 元素像一座桥梁，把用户输入的数据送到服务器处理。
表单基础结构
<form action="/api/submit" method="POST">
<!-- action: 数据提交到的URL -->
<!-- method: HTTP请求方法 GET(查询) / 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>
所有输入类型一览
| type值 | 用途 | 示例 |
|---|---|---|
text | 单行文本（默认） | 用户名、搜索框 |
email | 邮箱地址（自动验证格式） | 注册邮箱 |
password | 密码（输入内容被遮盖） | 登录密码 |
number | 数字（可设置min/max/step） | 年龄、数量 |
tel | 电话号码 | 手机号 |
url | 网址（自动验证URL格式） | 个人网站 |
date | 日期选择器 | 生日、预约日期 |
time | 时间选择器 | 预约时间 |
color | 颜色选择器 | 主题色选择 |
file | 文件上传 | 头像、附件 |
range | 滑块（范围选择） | 评分、价格区间 |
checkbox | 复选框（多选） | 兴趣爱好 |
radio | 单选按钮 | 性别、是否 |
hidden | 隐藏字段（用户看不见） | 用户ID、Token |
search | 搜索框（带清除按钮） | 站内搜索 |
常用表单控件（代码示例）
<form>
<!-- 文本域（多行文本） -->
<label for="bio">个人简介：</label>
<textarea id="bio" name="bio" rows="5" cols="40"
placeholder="请简单介绍一下自己..."></textarea>
<!-- 下拉选择 -->
<label for="city">所在城市：</label>
<select id="city" name="city">
<option value="">请选择城市</option>
<optgroup label="广西">
<option value="nanning">南宁</option>
<option value="liuzhou">柳州</option>
</optgroup>
<optgroup label="广东">
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</optgroup>
</select>
<!-- 自动补全输入（datalist） -->
<label for="language">喜欢的编程语言：</label>
<input type="text" id="language" name="language" list="languages">
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Python">
<option value="Java">
</datalist>
<!-- 单选按钮组 -->
<fieldset>
<legend>学习目标：</legend>
<label><input type="radio" name="goal" value="frontend"> 前端开发</label>
<label><input type="radio" name="goal" value="backend"> 后端开发</label>
<label><input type="radio" name="goal" value="fullstack"> 全栈开发</label>
</fieldset>
</form>
HTML5 表单验证
<form>
<!-- required: 必填字段 -->
<input type="text" name="username" required
placeholder="请输入用户名（必填）">
<!-- minlength / maxlength: 字符数限制 -->
<input type="password" name="pwd"
minlength="6" maxlength="20"
placeholder="密码长度6-20位">
<!-- min / max / step: 数值范围 -->
<input type="number" name="age"
min="1" max="150" step="1"
placeholder="请输入年龄">
<!-- pattern: 正则表达式验证（手机号） -->
<input type="text" name="phone"
pattern="1[3-9]\d{9}"
placeholder="请输入11位手机号"
title="请输入正确的手机号码">
<button type="submit">提交注册</button>
</form>
动手练习
- 制作注册表单：创建一个完整的用户注册表单，包含用户名、邮箱、密码、确认密码、手机号、性别（单选）、兴趣爱好（多选）、所在城市（下拉选择）、个人简介（文本域），所有字段添加HTML5验证。
- 搜索筛选表单：制作一个商品搜索表单，包含关键词搜索框、价格区间滑块（range）、分类下拉选择、排序方式单选按钮。
- 美化你的表单：使用CSS为上一题的表单添加样式：标签对齐、输入框圆角、聚焦高亮、提交按钮渐变背景、错误提示红色边框。