按钮默认 type 是 submit，易导致表单意外提交刷新页面；非提交按钮必须显式设 type="button"；推荐使用 而非 ，因其支持嵌套 html、无障碍更好；form 属性可跨区域绑定表单；reset 按钮应淘汰，改用 js 精准控制。

按钮默认 type 是 submit，不写就容易刷新页面

放在 <form></form> 里的 <button></button> 或 <input>，只要没显式声明 type，浏览器一律按 type="submit" 处理。点一下，表单就提交，页面立刻刷新——哪怕你只打算触发一个 fetch 请求或弹个提示框。

常见错误现象：

• JavaScript 点击事件执行了，但页面闪一下就跳走，console.log 都来不及看清
• 异步请求发出去了，但还没收到响应，页面已重载，DOM 被清空
• 表单验证没生效，因为提交被跳过或中断

解决办法很简单：所有非提交用途的按钮，必须写死 type="button"。

正确写法示例：

搜索 正式提交

用 还是 ？

<button></button> 更推荐，尤其当按钮内容不止是纯文本时。

差异点：

• <button type="button">✅</button> 可以嵌套图标、<svg></svg>、甚至 <span></span> 做状态文案（比如“提交中…”）
• <input type="button" value="文本"> 只能靠 value 属性设文字，无法插入 HTML
• <button></button> 的默认样式更一致，无障碍支持更好（自动带 role="button"）
• 两者都支持 disabled、form、formaction 等属性，但 <button></button> 的属性兼容性略优

所以除非旧项目强依赖 <input>，否则统一用 <button></button>。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

form 属性能让按钮脱离表单 DOM 位置仍关联提交

按钮不必嵌在 <form></form> 标签内部才能控制它——用 form 属性就能跨区域绑定。

适用场景：

• 模态框里的“确认提交”按钮，实际表单在页面其他位置
• 工具栏按钮需要复用多个表单逻辑
• 避免因 DOM 结构限制导致样式或布局别扭

示例：

保存用户

注意：form 属性值必须严格匹配目标 <form></form> 的 id；若目标表单无 id，这个属性就失效。

重置按钮（reset）基本该淘汰了

<button type="reset"></button> 或 <input type="reset"> 会把所有字段恢复成初始 value 或空值，但问题很多：

• 用户填了半页表单，误点就全丢，没二次确认机制
• 动态生成的字段（比如 JS 添加的行）、受控组件（React/Vue）可能不响应 reset
• 现代交互习惯更倾向“撤销某一项”或“清空当前字段”，而不是整表单回滚

替代方案：

• 用 JavaScript 实现精准清除：比如 document.getElementById('email').value = ''
• 封装一个带确认弹窗的清除函数，比原生 reset 更可控
• 真要保留重置功能，至少加 onclick="return confirm('确定清空？')"

真正难处理的是那些没设初始 value 的字段——它们 reset 后变空，但用户根本不知道“初始值”到底是什么。

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