按钮的四种类型，与 Enter 何时触发提交
<button> 与 <input> 在 <form> 里都能当按钮，但它们的 type 决定点下去发生什么——而常见陷阱是：<button> 不写 type 时默认就是 submit，一个本想做交互的按钮会悄悄把整张表单提交、刷新页面。另一条同样隐蔽的链路是：用户根本没点按钮，只是在文本框里按了 Enter，表单也会提交——这套规则叫 implicit submission，触发条件取决于表单里有没有 submit 按钮、有几个文本字段。本页把两件事都当场点出来。
1 · 四种 type：submit / reset / button（以及 input 独有的 image）
下面是同一个 <form> 里的一排按钮。表单的 submit / reset 事件已被 preventDefault() 拦下（否则会真的跳转 / 刷新），只把发生了什么记到右侧。逐个点，注意第一个没写 type 的 <button> 同样触发了提交：
| 类型 | <button type> |
<input type> |
点击行为 |
|---|---|---|---|
| submit | ✓ 默认值 | ✓ | 提交 form（走校验，可被 JS 拦） |
| reset | ✓ | ✓ | 把各控件值还原为初始值 |
| button | ✓ | ✓ | 无默认行为，纯给 JS 挂事件 |
| image | ✗ 没有 | ✓ 独有 | 图形化 submit，额外提交点击坐标 name.x / .y |
「button 有没有 type=image？」——没有。 <button> 的 type 只有 submit / reset / button 三种，写 type="image" 是非法值，会被当成默认 submit。image 是
<input> 独有的：<input type="image" src="…"> 是一个用图片渲染的 submit 按钮，点击会提交表单，并额外带上点击位置的像素坐标 name.x /
name.y（历史上服务端用来做图像热区）。上面按钮组最后那个紫块就是它的等价物。
button vs input 的取舍。 <button> 的显示内容是子节点，可放图标 / 富文本，且 value 与显示文本分离（提交时发 value）；<input type=submit> 是自闭合的，显示文本就是 value，塞不进富内容。现代代码基本只用 <button>，但务必显式写 type。
2 · 典型错误：忘了 type 的按钮把页面刷掉了
React / 原生代码都会遇到同一个坑——给按钮挂了 onClick，却忘了写 type="button"。默认 type 是 submit，下面这个「清空」按钮点击后会先触发 form 的 submit 事件、整页刷新或跳转，clearInput() 里的逻辑只是一闪而过：
<form onsubmit="search()">
<input name="q" />
<button onclick="clearInput()">清空</button>
</form>
点击「清空」：<button> 默认 type="submit" → 先触发 form 的 submit → 整页刷新或跳转 → clearInput() 的效果一闪而过。修法是显式写 <button type="button" onclick="clearInput()">。
3 · Enter 何时触发提交：implicit submission
在单行文本框里按 Enter，浏览器可能隐式提交表单。是否触发，由规范的 implicit submission 算法决定，核心看两件事：表单里有没有submit 按钮（default button）、有几个会「阻断隐式提交」的字段。下面四个独立 mini-form，各演示一条规则——点进文本框按 Enter，看右下角「提交」计数是否 +1（submit 已被 preventDefault，不会真跳转）：
| 表单构成 | 在单行文本框按 Enter |
|---|---|
| 有 submit 按钮（default button） | 触发该按钮的 click → 提交；字段数任意 |
| 无 submit 按钮，恰好一个文本类字段 | 直接从 form 自身提交 |
| 无 submit 按钮，≥2 个文本类字段 | 什么都不做（防误提交） |
| 焦点在 textarea | 插入换行，从不隐式提交 |
什么字段算「阻断隐式提交」。 规范把这些 <input> type 列为 fields that block implicit submission：text · search · url · tel · email · password · date ·
month · week · time · datetime-local · number。当无 submit 按钮时，只有这类字段恰好一个才会让 Enter 直接提交；两个及以上则按下 Enter 静默无事。checkbox / radio /
<select> 不在此列。
default button = tree order 里第一个 submit 按钮。 一个表单若有多个 submit 按钮，Enter 隐式提交触发的是文档顺序最靠前的那个的 click（连带它的 name=value 一起提交），而非视觉上最近的那个。
IME 选字的 Enter 不该提交。 中文输入法组字期间按 Enter 是上屏选字，此时 keydown 的 keyCode 为 229、isComposing 为 true。若用 JS 接管 Enter 提交，必须先排除合成态，详见一次按键，触发哪些事件。本页 mini-form 用的是浏览器原生隐式提交，合成期不会误发。
为什么今天仍要懂这套原生语义。 早期前端讲 progressive enhancement：先让 <form> 的 name / value / action 在无 JS 时就能原生提交（Enter 隐式提交、浏览器校验、密码管理器识别随之一并获得），再用
submit 事件 + preventDefault() 接管、序列化 query、异步提交——JS 失效仍可降级回原生。MVVM 框架普及后，这套约定一度被 <div onClick> 与纯 state 取代，原生语义随之断档，本页开头两个 footgun（漏写 type 的按钮把整页刷掉、IME 选字的 Enter
误提交）正是断档的产物。而近年 HTML-first 的回归——Remix / React Router 的 <Form>、Next.js Server Actions、HTMX——又把 <form action method> 重新当作一等公民，在其上做增强而非替代。于是 button[type] 与 implicit submission
这些底层规则不再是历史包袱，而是用好这批新框架的前提。