按钮必须置于内且type="submit"才能触发表单提交；若在外部需用form属性绑定；禁用type="button"或省略type值；推荐原生校验+submit事件处理，fetch提交时仍应设type="submit"并preventdefault。

按钮必须放在 <form></form> 内部才能触发表单提交

很多初学者把 <button></button> 写在 <form></form> 外面，点击后页面没反应——浏览器根本不会把它和表单关联。只要按钮不在 <form></form> 标签内部，type="submit" 就无效。

正确写法示例：

登录

• type="submit" 是关键，缺省值虽是 submit，但显式声明更可靠
• 如果按钮在 form 外，可用 form 属性绑定：<button type="submit" form="myForm"></button> + 给 <form id="myForm"></form>
• 不要用 <input type="button">，它默认不提交，除非手动加 JS

button 的 type 值选错会导致表单静默失败

常见错误是写成 type="button" 或直接省略——这时按钮点击完全无提交行为，控制台也不报错，容易误以为 JS 出问题。

• type="submit"：触发表单原生提交（推荐用于简单场景）
• type="button"：纯触发 JS，需手动调用 form.submit() 或 fetch()
• type="reset"：清空表单字段，慎用，用户可能误点

特别注意：Vue/React 等框架中，若用 @click 或 onClick 绑定函数，仍建议保留 type="submit" 并在事件里 event.preventDefault()，否则可能双提交。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

提交前校验失败时，别只靠 JS 阻止，要配合 required 和 checkValidity()

单纯靠 onclick 里写 if (!valid) return 很脆弱：用户可右键“检查元素”删掉 JS，或禁用 JS 后直接提交脏数据。

• 基础校验优先用原生属性：<input required>、<input type="email">、<input min="18">
• 自定义校验逻辑应在 form.addEventListener('submit', ...) 中，而非按钮 click —— 因为回车提交也会触发 submit 事件
• 调用 form.checkValidity() 返回 false 时，浏览器自动聚焦首个无效字段并显示提示（无需额外 CSS/JS）

用 fetch 提交时，按钮仍该设为 type="submit"，但必须 preventDefault

现代项目常改用 fetch 替代原生提交，但很多人直接把按钮改成 type="button"，导致回车无法提交、无障碍支持变差、语义丢失。

• 保持 <button type="submit"></button>，在 form.onsubmit = e => { e.preventDefault(); /* fetch logic */ }
• 这样既支持键盘回车，又兼容屏幕阅读器（会读作“提交按钮”）
• 提交中状态建议用 button.disabled = true，而不是仅改文字——防止重复点击，且禁用后按钮自动失去焦点

原生提交和 fetch 不是二选一，而是语义层和交互层的分工：按钮负责“意图”，JS 负责“实现”。漏掉这层区分，后续加 loading、错误重试、离线缓存都会更难对齐。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！