HTML5表单提交是网页交互中非常基础且重要的功能，通过合理的表单结构配置和提交方式选择，就能实现用户数据向服务端的传递，同时还能借助HTML5的新特性减少额外的验证代码编写。
HTML5表单的基础结构
HTML5的表单主要通过<form>标签来定义，内部可以放置各类表单控件，比如<input>、<textarea>、<select>等，这些控件用于收集用户输入的数据。一个最基础的表单结构如下：
<form action="/submit" method="post"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <button type="submit">提交</button> </form>
这里的<form>标签有两个核心属性，action用来指定表单提交的目标地址，method用来指定提交使用的HTTP方法，常用的有get和post两种。
HTML5表单的提交方式
1. get方式提交
get方式会将表单数据拼接在action指定的URL后面，以查询参数的形式传递，适合提交非敏感、数据量小的场景。比如上面的表单如果改成method="get"，提交后URL会变成类似/submit?username=test&password=123456的形式。
<form action="/search" method="get"> <label for="keyword">搜索关键词：</label> <input type="text" id="keyword" name="keyword"> <button type="submit">搜索</button> </form>
2. post方式提交
post方式会将表单数据放在HTTP请求体中传递，不会显示在URL里，适合提交敏感数据或者数据量较大的场景，比如用户登录、文件上传等。上面的基础示例就是使用post方式提交。
HTML5自带的数据验证功能
HTML5新增了很多表单输入类型和验证属性，可以在提交前自动校验用户输入的数据，减少前端JS验证的代码量。
required：表示该字段为必填项，不填写无法提交type="email"：自动校验输入内容是否符合邮箱格式type="number"：限制只能输入数字，可配合min、max限制数值范围pattern：可以自定义正则表达式来校验输入内容
下面是一个带验证的表单示例：
<form action="/register" method="post">
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="120" required>
<label for="phone">手机号：</label>
<input type="text" id="phone" name="phone" pattern="^1[3-9]d{9}$" required>
<button type="submit">注册</button>
</form>
使用JS控制表单提交
有时候我们需要在提交前做更多自定义的处理，比如拼接额外参数、异步提交不刷新页面，这时候可以通过JS来监听表单的提交事件，手动控制提交流程。
// 获取表单元素
const form = document.querySelector('form');
// 监听提交事件
form.addEventListener('submit', function(e) {
// 阻止默认提交行为
e.preventDefault();
// 获取表单数据
const formData = new FormData(form);
// 可以添加额外参数
formData.append('timestamp', Date.now());
// 使用fetch异步提交
fetch('/submit', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
console.log('提交成功', data);
})
.catch(error => {
console.error('提交失败', error);
});
});
后端接收表单数据的示例
表单数据提交到服务端后，后端需要根据提交方式来接收数据，下面是Node.js Express框架的接收示例：
const express = require('express');
const app = express();
// 解析post表单数据的中间件
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
// 处理post提交的表单
app.post('/submit', (req, res) => {
const username = req.body.username;
const password = req.body.password;
console.log('接收到的用户名：', username);
console.log('接收到的密码：', password);
res.json({ code: 0, msg: '接收成功' });
});
// 处理get提交的表单
app.get('/search', (req, res) => {
const keyword = req.query.keyword;
console.log('接收到的搜索关键词：', keyword);
res.json({ code: 0, msg: '搜索成功' });
});
app.listen(3000, () => {
console.log('服务运行在3000端口');
});
常见问题说明
如果表单提交后页面刷新，是默认的同步提交行为，如果需要无刷新提交，可以使用上面的JS异步提交方式。另外如果表单中包含文件上传，需要给<form>标签添加enctype="multipart/form-data"属性，否则文件数据无法正确传递。