在HTML中实现提交按钮并完成表单数据提交，核心是通过form标签构建表单容器，再搭配input或button标签定义提交按钮，同时正确配置相关属性即可实现功能。提交按钮的作用是将表单内用户输入的数据发送到指定的服务端地址，是前端与后端交互的基础环节。
一、HTML提交按钮的两种实现方式
1. 使用input标签创建提交按钮
这是最常用的提交按钮创建方式，将input的type属性设置为submit即可，还可以通过value属性设置按钮上显示的文本。
<form action="/submit" method="post"> <label>用户名：<input type="text" name="username"></label><br> <label>密码：<input type="password" name="password"></label><br> <!-- input类型的提交按钮 --> <input type="submit" value="提交数据"> </form>
2. 使用button标签创建提交按钮
button标签的type属性默认值是submit，放在form标签内时会自动触发表单提交，也可以显式设置type="submit"明确按钮功能，按钮内部可以放置文本或其他内联元素。
<form action="/submit" method="get"> <label>邮箱：<input type="email" name="email"></label><br> <!-- button类型的提交按钮 --> <button type="submit">点击提交</button> </form>
二、表单数据提交的核心配置
要实现正确的数据提交，需要给form标签配置两个关键属性，同时保证表单内的输入元素有正确的name属性。
1. form标签的属性配置
- action属性：指定表单数据提交的服务器地址，比如可以设置为
/api/login，如果是本地测试也可以用http://127.0.0.1:3000/submit。 - method属性：指定数据提交的HTTP方法，常用值为get和post。get会将数据拼接在action地址后面，适合提交非敏感的小数据；post会将数据放在请求体中，适合提交敏感数据或大量数据。
2. 输入元素的name属性
表单内的所有输入、选择类元素都必须设置name属性，否则提交时该元素的数据不会被发送到服务端。name属性的值会作为数据的键，用户输入的内容会作为值，组成键值对提交。
三、提交按钮的额外配置选项
除了基础功能，提交按钮还支持一些额外属性来满足不同的需求。
| 属性名 | 作用 | 示例 |
|---|---|---|
| disabled | 禁用提交按钮，点击不会触发表单提交 | <input type="submit" value="提交" disabled> |
| form属性 | 指定按钮关联的表单id，即使按钮不在form标签内也能触发表单提交 | <input type="submit" value="提交" form="myForm"> |
四、完整示例演示
下面是一个包含多种输入项、正确配置提交按钮的完整表单示例，提交后会把数据发送到指定的服务端地址。
<form id="userForm" action="http://127.0.0.1:8080/user/info" method="post">
<p>
<label>姓名：<input type="text" name="name" required></label>
</p>
<p>
<label>年龄：<input type="number" name="age" min="1" max="120"></label>
</p>
<p>
<label>性别：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</label>
</p>
<p>
<label>爱好：
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="music">音乐
</label>
</p>
<!-- 提交按钮 -->
<input type="submit" value="提交个人信息">
<!-- 重置按钮，用于清空表单内容 -->
<input type="reset" value="重置">
</form>需要注意的是，如果要在提交前对表单数据进行校验，可以添加onsubmit事件到form标签上，返回false可以阻止表单提交，返回true则正常提交。
// 表单提交前校验
document.getElementById("userForm").onsubmit = function() {
const name = this.elements.name.value;
if (name.trim() === "") {
alert("姓名不能为空");
return false; // 阻止提交
}
return true; // 允许提交
};