HTML 表单表单标签 基础语法详解

HTML 表单的核心标签是 form 标签，它是整个表单的容器标签，所有输入框 单选框 复选框 下拉菜单 提交按钮这些表单控件，都要写在 form 标签内部，作用是把用户填写的数据收集起来，按照设定的提交方式发送给后端服务器，网页里登录页 注册页 留言页 搜索框全部都是依靠 HTML 表单标签实现。很多新手刚开始学习的时候，会混淆 form 标签和里面的 input 控件，input 只是单个输入组件，form 标签才是负责提交行为的外层容器，如果没有 form 标签包裹，点击提交按钮就没办法把整组数据统一发送，这也是初学者最常踩坑的地方。HTML 表单标签除了 form 主标签之外，还有配套辅助标签，比如 label 标签用来绑定文字和输入框，fieldset 标签用来给表单分组，legend 标签是分组标题，select 下拉标签 textarea 多行文本标签 button 按钮标签，这些标签搭配 form 标签一起使用，让表单结构更规范，同时提升网页可访问性。

form 标签核心属性

配套表单标签详细说明

label 标签

用来给表单控件添加文字说明，通过 for 属性和 input 的 id 绑定，点击文字也可以激活输入框，提升操作体验，也可以直接把 input 包裹在 label 内部实现绑定，不需要写 for 属性。

input 标签

最常用表单控件，依靠 type 属性切换不同形态，包含 text 文本框 password 密码框 radio 单选 checkbox 复选框 submit 提交按钮 reset 重置按钮 file 文件上传 number 数字框 email 邮箱框 date 日期框。

textarea 标签

多行文本输入标签，适合留言 简介这类长文本，自带 rows 行数 cols 列数属性，和 input 不一样，它是双标签，内容写在开闭标签中间。

select 标签

下拉选择框，内部搭配 option 标签，每一个 option 就是一个下拉选项，可以设置 selected 默认选中项，还可以用 optgroup 给下拉选项分组。

button 标签

表单内按钮，type 属性分为 submit 提交 reset 重置 button 普通按钮，submit 类型在 form 内部默认会触发表单提交。

fieldset 和 legend 标签

fieldset 用来把一组相关表单控件框选分组，legend 是这个分组的标题，多用于复杂长表单，让页面结构清晰。

基础编写步骤

1 先书写 form 起始标签，填写 action 和 method 核心属性

2 在 form 内部依次添加 label 和对应的 input 控件，每一项控件设置 name 属性，name 是后端接收数据的关键字，非常关键

3 添加提交按钮，推荐使用 button 或者 input type submit

4 保存 html 文件，浏览器打开页面填写内容测试提交

5 如果需要文件上传，给 form 标签加上 enctype 属性，并且 input 的 type 设置为 file

get 和 post 提交方式区别

重要注意事项

1 表单里面每一个需要提交的数据控件，都必须写 name 属性，如果缺少 name，提交之后后端接收不到这项数据

2 单选 radio 同一组必须使用相同 name 属性，这样才能实现互斥选择

3 novalidate 属性可以关闭浏览器自带校验，但是不推荐完全放弃校验，最好搭配 js 补充校验逻辑

4 form 标签可以嵌套吗，HTML 规范不允许 form 标签互相嵌套，页面多个表单要并列分开写

5 现代前端开发经常使用 ajax 提交表单，这时候可以保留 form 标签结构，但是阻止表单默认跳转提交行为

【常见问题】

问题 1 HTML 表单表单标签 form 必须写 action 吗

回答 1 HTML 表单表单标签 form 不是强制必须写 action，如果不写 action，默认提交到当前页面地址，实际项目一般都会填写后端接口地址

问题 2 HTML 表单表单标签里面 input 为什么提交没有数据

回答 2 HTML 表单表单标签里面 input 缺少 name 属性就会提交失败拿不到数据，提交的数据是依靠 name 作为键名传递，只写 id 是无法提交的

问题 3 HTML 表单表单标签能不能嵌套另一个 form 标签

回答 3 HTML 表单表单标签不允许嵌套 form 标签，HTML 标准规范禁止 form 内部再写 form，多个表单需要并列放置

问题 4 HTML 表单表单标签 method 默认是什么提交方式

回答 4 HTML 表单表单标签 method 默认是 get 提交方式，如果不手动指定，表单数据会拼接在 url 地址栏后面

问题 5 HTML 表单表单标签上传文件需要修改哪个属性

回答 5 HTML 表单表单标签上传文件需要修改 enctype 属性，设置为 multipart form-data，同时 method 必须使用 post 方式

【免责申明】

本文是 HTML 表单表单标签基础语法教学内容，HTML 标准会随版本更新迭代，不同浏览器对表单标签的兼容表现存在差异，本文仅作为前端入门学习参考，实际项目开发请参考最新 W3C 规范，不构成项目上线的强制开发标准。