表单（Form）是网页、应用或软件中用于收集用户输入信息的交互组件，是用户与系统之间传递数据的核心载体，简单来说就是让用户填写、选择信息的 “电子表单 / 问卷”，提交后数据会被系统接收、处理（如存储、验证、反馈）。
表单是前端开发的基础交互模块，也是前后端数据交互的重要入口，几乎所有需要用户输入的场景都离不开表单，比如注册登录、订单提交、信息填报、搜索框、问卷调研等。
如下图，用户注册页面：
上述页面收集了用户名、密码、确认密码、姓名和邮箱信息，点击“提交注册”，这些信息将发送到后端服务器，验证通过后会保存到数据库。
那么，在 HTML 中，如何制作一个表单呢？一个表单由那些部分组成呢，我们先看一个简单的例子，后续将逐步介绍表单中的各个组件（元素）：
<form action="/" method="post">
<!-- 使用 table 布局，不使用 CSS，依靠 table 自身特性规整表单 -->
<table border="1" width="500" cellspacing="0" cellpadding="8" align="center">
<!-- 1. 用户名输入行 -->
<tr>
<td><label for="name">用户名:</label></td>
<td>
<input type="text" id="name" name="name" required>
</td>
</tr>
<!-- 2. 密码输入行 -->
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<!-- 3. 性别单选按钮行 -->
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</td>
</tr>
<!-- 4. 订阅复选框行 -->
<tr>
<td></td> <!-- 空单元格，保持和上方元素对齐 -->
<td>
<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">订阅推送信息</label>
</td>
</tr>
<!-- 5. 国家下拉列表行 -->
<tr>
<td><label for="country">国家:</label></td>
<td>
<select id="country" name="country">
<option value="cn">CN</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
</td>
</tr>
<!-- 6. 提交按钮行 -->
<tr>
<td></td> <!-- 空单元格，保持和上方元素对齐 -->
<td><input type="submit" value="提交"></td>
</tr>
</table>
</form>运行示例，效果如下图：
从上图可知，这是一个非常简单的注册表单，下面将逐一介绍表单中的各个元素。
<form> 元素是所有表单元素的容器，负责定义一个表单区域，同时指定表单数据的提交规则。
表单属性：
action：指定表单数据提交到的后台服务器地址（URL），比如 action="https://xxx.com/api/login"。若暂时没有后台地址，可设为 action="#"（表示提交后跳转到当前页面顶部，用于测试）。
method：指定表单数据的提交方式，常用值有两个：
get（默认）：数据会拼接到 action 地址的末尾（以 ? 分隔，键值对形式，如：https://xxx.com/api/login?key1=value&key2=value2&...），可见性高，适合提交少量、非敏感数据（如搜索查询）。
post：数据会在请求体中传输，不会显示在地址栏，安全性更高，适合提交大量、敏感数据（如登录密码、注册信息）。
enctype：指定表单数据的编码格式，仅在 method="post" 时有效，常用值：
application/x-www-form-urlencoded（默认）：适合提交普通文本数据（如输入框、单选框）。
multipart/form-data：适合提交二进制文件（如上传图片、文档）。
简单示例：
<!-- 一个简单的表单容器 -->
<form action="#" method="post">
<!-- 表单元素（输入框、按钮等）会放在这里 -->
</form>表单的交互功能依赖于内部的各类表单元素，下面是最常用的元素：
单行输入框（<input type="text" />）用于收集用户的普通单行文本（如用户名、姓名）。
常用属性：
name：表单元素的唯一标识，后台通过该属性获取对应的值（必须设置，否则数据无法被提交）。
placeholder：输入框内的提示文字，用户输入时会自动消失。
value：输入框的默认值。
disabled：禁用输入框（无法输入，数据也无法提交）。
required：设置该字段为必填项，提交表单时若为空会提示用户。
示例：
<form action="/" method="post">
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名" required>
</form>运行示例，效果如下图：
密码输入框（<input type="password">）用于收集敏感的单行文本（如密码），输入的内容会被隐藏（显示为圆点 / 星号）。
常用属性和单行输入框一致。
示例：
<form action="#" method="post">
<label>密码：</label>
<input type="password" name="pwd" placeholder="请输入6-16位密码" required>
</form>运行示例，效果如下图：
单选框（<input type="radio">）用于让用户从多个选项中选择一个（如性别、学历）。
注意，一组单选框必须设置相同的 name 属性，否则无法实现 “互斥选择”（即只能选一个）。
属性说明：
value：设置该选项对应的提交值（后台获取到的就是这个值）。
checked：设置该选项为默认选中状态。
当我们搭配 <label> 标签使用时，点击标签文字也能选中对应单选框，这可以提升用户体验。
示例：
<form action="#" method="post">
<label>性别：</label>
<input type="radio" name="gender" value="male" id="male" checked>
<label for="male">男</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
</form>注意，<label> 元素的 for 属性值要和对应 <input> 的 id 属性值一致，才能实现 “点击文字选中选项”。
运行示例，效果如下图：
复选框（<input type="checkbox">）用于让用户从多个选项中选择一个或多个（如爱好、商品规格）。
注意，一组复选框建议设置相同的 name 属性（后台会以数组形式接收多个选中值）。
属性说明：
value：设置该选项对应的提交值。
checked：设置该选项为默认选中状态。
示例：
<form action="#" method="post">
<label>我的爱好：</label>
<input type="checkbox" name="hobby" value="reading" id="read" checked>
<label for="read">阅读</label>
<input type="checkbox" name="hobby" value="running" id="run">
<label for="run">跑步</label>
<input type="checkbox" name="hobby" value="coding" id="code">
<label for="code">编程</label>
</form>运行示例，效果如下图：
下拉选择框用于从较多选项中选择一个（或多个），比单选框更节省页面空间（如地区、生日月份）。
下拉选择框有两个核心标签：
<select>：下拉框容器，对应 name 属性。
<option>：下拉框中的单个选项，value 为提交值，标签内的文字为显示值。
常用属性：
<select> 的 multiple：设置后可多选（按住 Ctrl 键点击）。
<option> 的 selected：设置该选项为默认选中。
示例：
<form action="#" method="post">
<label>所在城市：</label>
<select name="city" title="城市列表" required>
<option value="">-- 请选择城市 --</option>
<option value="beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="guangzhou">广州</option>
</select>
</form>运行示例，效果如下图：
多行文本框（<textarea>）用于收集用户的多行文本输入（如留言、备注、反馈意见）。
常用属性：
name：表单元素标识（必填）。
rows：设置文本框的默认显示行数（高度）。
cols：设置文本框的默认显示列数（宽度）。
placeholder：提示文字。
注意：<textarea> 没有 value 属性，默认值直接写在标签内部，例如 <textarea>默认值</textarea>。
示例：
<form action="#" method="post">
<label>留言反馈：</label>
<br>
<textarea name="feedback" rows="5" cols="30"
placeholder="请输入你的留言内容..."></textarea>
</form>运行示例，效果如下图：
在实际场景中，文件上传是一个很常用的表单功能，如上传头像、身份证、附件等。
文件上传依赖 <input type="file"> 标签，它会渲染出一个 “选择文件” 的按钮，点击后可打开系统文件选择窗口。
文件上传属性说明：
name 表单元素标识，后台通过该属性获取文件数据，必填（否则无法提交）。
accept 限制可选文件类型，只允许选择指定格式的文件，提升用户体验（如 image/* 仅允许图片）。
multiple 允许多选文件，加上该属性后，可按住 Ctrl（Windows）/ Command（Mac）选择多个文件。
required 设置文件为必填项，提交表单时若未选择文件，会提示用户。
注意（重点）：
表单必须满足以下两个条件，否则文件无法成功提交：
（1）<form> 标签的 method 属性必须设置为 post，因为 get 方式无法传输二进制文件数据。
（2）<form> 标签必须添加 enctype="multipart/form-data" 指定表单以二进制编码格式提交，适配文件传输。这是因为普通表单（仅提交文本）的默认 enctype 是 application/x-www-form-urlencoded，无法处理文件二进制数据，所以文件上传必须手动修改该属性。
示例：
<h3>上传用户头像（单文件）</h3>
<!-- 必须设置 method="post" 和 enctype="multipart/form-data" -->
<form action="#" method="post" enctype="multipart/form-data">
<div>
<label>选择头像：</label>
<!-- 单文件上传，限制仅允许图片格式 -->
<input type="file" name="avatar" accept="image/*" required>
<p style="color: #666; margin-top: 5px;">支持 JPG、PNG、GIF 等图片格式</p>
</div>
<div>
<button type="submit">提交头像</button>
</div>
</form>运行示例，效果如下图：
提交按钮用于触发表单提交，将表单数据发送到 action 指定的地址。
提交按钮有两种写法，如下：
<input type="submit" value="提交">：值通过 value 设置，无法嵌套其他内容。
<button type="submit">提交</button>：更灵活，可嵌套文字、图标等。
示例：
<form action="#" method="post">
<!-- 输入框省略 -->
<input type="submit" value="提交表单（input版）">
<br><br>
<button type="submit">提交表单（button版）</button>
</form>运行示例，效果如下图：
重置按钮用于清空表单中所有用户输入的内容，恢复到默认状态。
重置按钮也有两种写法，如下：
<input type="reset" value="重置">：值通过 value 设置，无法嵌套其他内容。
<button type="reset">重置</button>：更灵活，可嵌套文字、图标等。
示例：
<form action="#" method="post">
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入用户名">
<br><br>
<input type="reset" value="重置（input版）">
<button type="reset">重置（button版）</button>
</form>运行示例，效果如下图：
注意，当你在用户名输入框中输入内容后，点击“重置”按钮，会自动将用户名中的内容清除掉，这就是重置的作用。
下面是一个包含多种表单元素的完整注册表单：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML教程</title>
<style>
/* 省略样式，点击试一试可以查看 */
</style>
</head>
<body>
<div class="form-container">
<h2 class="form-title">用户信息登记表</h2>
<form action="/" method="post">
<!-- 1. 用户名 -->
<div class="form-group">
<label for="username">用户名 <span style="color: #e74c3c;">*</span></label>
<input type="text" id="username" name="username" class="form-control" required placeholder="请输入3-16位字母或数字">
</div>
<!-- 2. 密码 -->
<div class="form-group">
<label for="password">密码 <span style="color: #e74c3c;">*</span></label>
<input type="password" id="password" name="password" class="form-control" required placeholder="请输入6-20位密码">
</div>
<!-- 3. 性别（单选框） -->
<div class="form-group">
<label>性别 <span style="color: #e74c3c;">*</span></label>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男</label>
</div>
<div class="radio-item">
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
<div class="radio-item">
<input type="radio" id="other" name="gender" value="other">
<label for="other">其他</label>
</div>
</div>
</div>
<!-- 4. 兴趣爱好（复选框） -->
<div class="form-group">
<label>兴趣爱好</label>
<div class="checkbox-group">
<div class="checkbox-item">
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="coding" name="hobby" value="coding" checked>
<label for="coding">编程</label>
</div>
<div class="checkbox-item">
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音乐</label>
</div>
</div>
</div>
<!-- 5. 所在城市（下拉框） -->
<div class="form-group">
<label for="city">所在城市 <span style="color: #e74c3c;">*</span></label>
<select id="city" name="city" class="form-control" required>
<option value="" disabled selected>请选择城市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
<option value="hangzhou">杭州</option>
</select>
</div>
<!-- 6. 个人简介（文本域） -->
<div class="form-group">
<label for="intro">个人简介</label>
<textarea id="intro" name="intro" class="form-control" placeholder="请简要介绍一下自己（选填）"></textarea>
</div>
<!-- 7. 按钮组 -->
<div class="btn-group">
<button type="submit" class="btn btn-submit">提交表单</button>
<button type="reset" class="btn btn-reset">重置信息</button>
</div>
</form>
</div>
</body>
</html>运行示例，效果如下图：
表单看上去是不是挺好看，这都归功于 CSS，想要了解 CSS 相关知识，请学习 CSS 教程。
关于更多HTML相关知识请学习后续教程……
川公网安备51010802032098