合法html5表单结构须将输入框和按钮置于内，所有控件需有name属性，label与input通过for/id关联，button必须设type="submit"，且input类型应按语义选用（如email、tel等）。
怎么用 <form></form> 包住输入框和按钮才算合法 HTML5 结构
HTML5 要求表单控件必须在语义正确的上下文中工作，<form></form> 不只是“视觉分组”，而是数据提交的容器。如果把 <input> 或 <button></button> 写在 <form></form> 外面，即使看起来排在一起，也可能导致：提交时拿不到值、无障碍阅读器无法识别关联、JS 里用 form.elements 查不到字段。
正确结构是：
<form action="/submit" method="POST"> <label for="username">用户名</label> <input type="text" id="username" name="username"> <label for="email">邮箱</label> <input type="email" id="email" name="email"> <button type="submit">提交</button> </form>
-
name属性不能省——后端靠它收数据，没name的<input>默认不参与提交 -
id和for要配对——点标签就能聚焦输入框，提升可访问性 -
button必须设type="submit"——否则点击不会触发表单提交（默认是type="button"）
input 类型选错会导致移动端键盘/校验异常
HTML5 提供了十多种 type 值，不只是 text 一种。选错类型，轻则弹出错误键盘（比如想输邮箱却弹出数字键盘），重则浏览器自动拦截非法值（如 type="number" 里输字母直接被忽略）。
-
type="email"→ 弹出带 @ 符号的软键盘，且提交前自动检查格式（但不验证域名是否存在） -
type="tel"→ 弹出电话键盘，无内置校验，适合国内手机号（别用number，它会删掉开头的 0） -
type="search"→ 输入框右侧自动加清空按钮，部分浏览器加搜索图标 -
type="password"→ 内容掩码，但不加密——仅前端遮蔽，传输仍需 HTTPS
注意：type="number" 在 Safari 上会强制显示上下箭头，且无法通过鼠标滚轮修改值；若只要数字输入，更稳妥的是 inputmode="numeric" + pattern="[0-9]*" 组合。
立即学习“前端免费学习笔记（深入）”；
按钮放哪？<button></button> 和 <input type="submit"> 怎么选
两者都能提交表单，但行为细节不同。多数情况推荐用 <button></button>。
-
<button type="submit">提交</button>：内容可以是 HTML（比如加图标<button><i class="icon"></i> 登录</button>），样式控制更自由 -
<input type="submit" value="提交">：只能是纯文本，value 无法含标签，CSS 伪元素（如::before）也不生效 - 如果按钮不在
<form></form>内部，可以用form="myform"属性绑定：<button form="myform" type="submit">外部提交</button>，对应<form id="myform"></form>
常见坑：<button></button> 不写 type 属性时，某些老版本 IE 会当成 submit，现代浏览器默认是 button（不提交）。务必显式声明。
静态页没后端？用 onsubmit 拦截并读取值就够了
纯 HTML5 静态页没有服务器，action 提交会跳转或报 404。这时不需要删掉 <form></form>，只需用 JS 拦住默认行为，读取用户填的内容做下一步处理（比如发到第三方 API、存 localStorage、或仅做前端校验）。
<form id="contactForm">
<input type="text" name="name" required>
<button type="submit">发送</button>
</form>
<script>
document.getElementById('contactForm').onsubmit = function(e) {
e.preventDefault(); // 关键：阻止页面跳转
const data = new FormData(this);
console.log(Object.fromEntries(data)); // { name: "张三" }
};
</script>
注意：FormData 只收集有 name 的控件，且要求控件在 <form></form> 内；required 属性会触发浏览器原生提示，但只在调用 submit() 或点 submit 按钮时生效，JS 里用 FormData 不受其阻拦——校验逻辑得自己补。
最易被忽略的一点：所有交互都依赖用户是否真的「提交」了表单。如果只监听按钮 click，会漏掉回车提交；如果只监听 submit，又得确保按钮是 type="submit"。统一走 form.onsubmit 是最稳的路径。
