HTML5 表单与表格完全指南
作者：燐妤
来源：CSDN
原文链接
目录
[HTML5 表单与表格完全指南](#HTML5 表单与表格完全指南)
[1.1 什么是表单](#1.1 什么是表单)
[1.2 form 标签](#1.2 form 标签)
[1.3 表单控件](#1.3 表单控件)
[input 标签](#input 标签)
[label 标签](#label 标签)
[下拉选框 select](#下拉选框 select)
[文本域 textarea](#文本域 textarea)
[表单分组 fieldset & legend](#表单分组 fieldset & legend)
[HTML5 新增：datalist 输入建议](#HTML5 新增：datalist 输入建议)
[2.1 基础表格结构](#2.1 基础表格结构)
[2.2 边框与样式优化](#2.2 边框与样式优化)
[2.3 单元格合并](#2.3 单元格合并)
[2.4 语义化表格标签](#2.4 语义化表格标签)
[2.5 表格默认特性](#2.5 表格默认特性)
[2.6 表格响应式处理](#2.6 表格响应式处理)
前言
上篇文章我们讲解了 HTML5 基础标签、列表和语义化标签等核心内容，也理解了网页的基本结构搭建方法。今天我们重点讲两块前后端交互和数据展示的核心内容：表单 和表格。
无论是做用户注册登录页、信息收集问卷，还是后台数据展示面板，这两个知识点都是必不可少的。
如果还没有了解HTML5 基础标签、列表和语义化标签等核心内容的兄弟，建议是翻看我上一篇的文章，对你有帮助，点击此处
OK，那就让我们开始今天的学习旅途！！！
一、表单
1.1 什么是表单
表单是网页与用户交互的核心入口，负责采集用户输入的数据并提交到后端服务器。常见应用场景包括：
- 用户注册/登录
- 在线调查问卷
- 搜索框输入
- 文件上传
- 订单或留言提交
1.2 form 标签
定义
<form> 标签用于定义表单区域，是所有表单控件的容器，本身不实现输入功能，仅负责包裹控件并定义提交规则。
写法与核心属性
html
<form action="提交地址" method="get" target="_blank" name="表单名" enctype="application/x-www-form-urlencoded">
<!-- 表单控件写在这里 -->
</form>| 属性 | 说明 |
|---|---|
| action | 表单提交的目标后端接口地址，不填则提交到当前页面 |
| method | 提交方式，可选 get（参数拼在 URL 后）、post（参数放在请求体，更安全） |
| target | 提交后后端返回页面的打开位置，可选 _blank（新标签页）、_self（当前页，默认） |
| name | 表单名称，用于 JS 获取表单对象 |
| enctype | 提交数据的编码类型，默认值为 application/x-www-form-urlencoded，上传文件时必须改为 multipart/form-data |
| novalidate | HTML5 新增属性，添加后禁止浏览器默认表单验证 |
小提示：get 方式提交的数据会在 URL 中明文显示，绝对不能用来传密码等敏感信息；post 方式更适合表单提交。
1.3 表单控件
表单控件负责采集用户输入，所有控件必须设置 name 属性（后端靠 name 识别字段）。除了单选按钮外，不同控件的 name 不要重复。
input 标签
input 是单标签，通过 type 属性切换不同功能。常用类型及 HTML5 新增类型示例：
html
<!-- 单行文本输入框 -->
<input type="text" name="username" placeholder="请输入用户名" />
<!-- 密码输入框 -->
<input type="password" name="pwd" placeholder="请输入密码" />
<!-- 单选按钮 -->
<input type="radio" name="sex" value="男" id="sex1" /><label for="sex1">男</label>
<input type="radio" name="sex" value="女" id="sex2" /><label for="sex2">女</label>
<!-- 多选框 -->
<input type="checkbox" name="hobby" value="篮球" id="hobby1" /><label for="hobby1">篮球</label>
<input type="checkbox" name="hobby" value="足球" id="hobby2" /><label for="hobby2">足球</label>
<!-- 重置按钮 -->
<input type="reset" value="清空重填" />
<!-- 普通按钮 -->
<input type="button" value="点击弹窗" />
<button type="button">点击弹窗</button>
<!-- 文件上传 -->
<input type="file" name="avatar" accept="image/*" />
<!-- 隐藏域 -->
<input type="hidden" name="user_id" value="123" />
<!-- 提交按钮 -->
<input type="submit" value="注册" />
<!-- HTML5 新增 input 类型 -->
<input type="email" name="email" placeholder="请输入邮箱" />
<input type="url" name="website" placeholder="请输入网址" />
<input type="number" name="age" min="1" max="120" placeholder="年龄" />
<input type="range" name="score" min="0" max="100" />
<input type="date" name="birthday" />
<input type="color" name="theme" />小技巧：
button标签的type默认是submit，放在form里会触发提交。如果只想做普通按钮，一定要设置type="button"。
label 标签
用于关联文字和表单控件，点击文字即可选中对应控件，提高用户体验：
html
<!-- 方式1：for属性对应input的id -->
<input type="radio" name="sex" value="1" id="sex1" />
<label for="sex1">男</label>
<!-- 方式2：直接包裹input -->
<label><input type="checkbox" name="hobby" value="篮球" />篮球</label>常用状态属性
| 属性 | 说明 |
|---|---|
| checked | 单选/多选框默认选中，如 <input type="radio" checked /> |
| disabled | 禁用控件，值不会随表单提交，样式变灰 |
| readonly | 只读，值可以提交，用户无法修改，仅适用于文本类输入框 |
| required | HTML5 新增，必填字段，未填会触发浏览器默认提示 |
| placeholder | HTML5 新增，输入提示文字，获得焦点后消失 |
下拉选框 select
html
<select name="city" multiple size="3">
<optgroup label="一线城市">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</optgroup>
<optgroup label="新一线城市">
<option value="cd">成都</option>
<option value="hz">杭州</option>
</optgroup>
</select>multiple：设置多选，下拉框可选多个size：设置默认显示选项数selected：默认选中optgroup：分组显示选项
文本域 textarea
html
<textarea name="intro" rows="5" cols="30" placeholder="请输入个人简介" maxlength="200"></textarea>rows/cols：设置默认行列，建议用 CSS 控制尺寸maxlength：限制最大输入字符数
表单分组 fieldset & legend
html
<form action="" method="post" name="regForm">
<fieldset>
<legend>账号信息</legend>
用户名：<input type="text" name="user" required />
密码：<input type="password" name="pwd" required />
</fieldset>
<fieldset disabled>
<legend>个人信息（暂未开放）</legend>
姓名：<input type="text" name="name" />
年龄：<input type="number" name="age" />
</fieldset>
<input type="submit" value="提交" />
</form>给
fieldset添加disabled属性，会让整个分组控件被禁用，值不会提交。
HTML5 新增：datalist 输入建议
html
<input type="text" name="city" list="cityList" placeholder="输入城市名" />
<datalist id="cityList">
<option value="北京"></option>
<option value="上海"></option>
<option value="广州"></option>
<option value="深圳"></option>
</datalist>二、表格
<table> 标签用于定义表格，现在仅用于结构化数据展示。
2.1 基础表格结构
html
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>28</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>25</td>
</tr>
</table>2.2 边框与样式优化
建议用 CSS 控制样式，避免使用废弃属性：
css
table {
border-collapse: collapse;
width: 100%;
text-align: center;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
th {
background-color: #f5f5f5;
}2.3 单元格合并
rowspan：纵向合并单元格colspan：横向合并单元格
html
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>90</td>
</tr>
<tr>
<td>数学</td>
<td>95</td>
</tr>
<tr>
<td>李四</td>
<td colspan="2">缺考</td>
</tr>2.4 语义化表格标签
html
<table border="1">
<caption>2024年期末成绩表</caption>
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">语文</th>
<th scope="col">数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>90</td>
<td>95</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td>88</td>
<td>92</td>
</tr>
</tfoot>
</table>scope属性可帮助屏幕阅读器识别，提高可访问性colgroup和col可设置整列样式，无需给每个单元格加样式
2.5 表格默认特性
- 单元格可嵌套表格
- 同行高度取最高单元格值
- 同列宽度取最宽单元格值
- 未设置宽度的列按内容分配剩余宽度
可用 display: table 相关属性让非表格元素拥有表格特性：
css
.table-box { display: table; width: 100%; }
.table-row { display: table-row; }
.table-cell { display: table-cell; vertical-align: middle; }2.6 表格响应式处理
css
.table-responsive { overflow-x: auto; }在移动端，表格宽度超过屏幕时，会出现横向滚动条，避免溢出。
三、总结与建议
表单和表格是 HTML 基础阶段的核心内容，重点掌握：
form标签核心属性，尤其是enctype、method的区别input各类型适用场景，HTML5 新增类型的用法- 表格的单元格合并、语义化标签使用
- 尽量用 CSS 控制样式，减少废弃标签属性
学习建议：
- 手写一个完整用户注册表单，包含所有控件类型和 HTML5 验证属性
- 用表格实现一个学生成绩表，完成单元格合并和样式优化
- 尝试给表单加 JS 自定义校验，替代浏览器默认校验
如果这篇文档对你的前端学习有帮助的话，动动发财的小手点个免费的赞赞吧，谢谢各位兄弟！！
每日励志文案：
勇敢就是接受已发生在你身上的事，把它尽力做到最好