最简写法是或，二者均需置于内且表单须有action和method属性；推荐因其支持嵌套内容、语义更佳，但必须显式声明type="submit"以确保兼容性。
表单提交按钮的最简写法
不用 JavaScript，纯 HTML 就能触发提交，关键在 <input type="submit"> 或 <button type="submit"></button>。两者都能提交包裹它的 <form></form>，但语义和默认行为有差别。
推荐优先用 <button type="submit"></button>：它支持嵌套内容（比如图标+文字），可读性更好，且默认 type 就是 "submit" —— 但别省略显式声明，否则在某些老浏览器或框架里可能被当成 "button"（不提交）。
-
<input type="submit" value="提交">：简单直接，但只能显示纯文本，无法加<span></span>或 SVG -
<button type="submit">提交</button>：更灵活，样式控制更自由，点击时自动提交最近的父级<form></form> - 如果按钮不在
<form></form>内部，必须加form="form-id"属性指向对应表单 ID，否则不生效
为什么点按钮没反应？常见失效原因
最常遇到的是表单结构或属性缺失，不是代码写错了，而是“看不见的约束”没满足。
-
<form></form>缺少action属性：没有指定提交地址，浏览器会刷新当前页（GET）或报错（POST），看起来像没反应 - 按钮在
<form></form>外部却没配form="xxx"：此时按钮完全独立，点击无任何提交行为 - 用了
<button></button>但漏写了type="submit"：默认是"button"，只响应 click 事件，不触发表单提交 - 表单里存在
name为空的<input>（如<input name="">）：部分浏览器会忽略整个提交，或导致后端收不到数据
提交前想校验，又不想写 JS？用原生 HTML5 验证
不需要一行 JS，required、email、minlength 这些属性就能拦截无效提交。但注意：它们只在点击 type="submit" 按钮时触发，对 type="button" 无效。
-
<input required>：空值时阻止提交，并聚焦该字段 -
<input type="email" required>：格式不对（如缺少 @）时提示，但不会校验域名是否存在 -
<input minlength="6">：字符数不足时阻止，但需配合required否则空值仍可通过 - 所有验证失败时，浏览器会自动滚动到第一个出错字段，并显示 tooltip 提示 —— 这个行为不可关闭，也不可自定义文案
提交后页面跳转了，怎么留在当前页？
这是初学者最困惑的一点：HTML 表单默认走传统同步提交，必然跳转或刷新。想“不跳转”，本质是换成交互方式 —— 必须引入 JavaScript，用 fetch 或 XMLHttpRequest 替代原生提交。
- 不能只加
event.preventDefault()就完事：那只是阻止跳转，数据根本没发出去 - 正确做法是监听
submit事件，在回调里用fetch()手动发请求，再根据响应更新页面 - 如果后端返回 JSON，记得设
enctype="application/json"并手动构造 body；默认表单编码是application/x-www-form-urlencoded - 别忘了给按钮加 loading 状态（比如禁用 + 文字变“提交中”），否则用户可能连点多次
原生表单提交本身没有“异步”模式，所谓“不跳转”全是靠 JS 拦截并重做提交逻辑。这点容易被教程模糊带过，但实际开发中绕不开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
