HTML表单中回车键（Return）的默认行为是什么？

现象成因 #

该现象是HTML标准定义的表单隐式提交的正常行为，核心诱因是示例中第一个<button>未显式指定type属性：<button>元素默认的type值为submit，属于表单的提交按钮，浏览器在输入框回车触发隐式提交时，会优先触发表单内DOM顺序第一个可交互提交按钮的点击事件，而非直接触发表单提交。

具体运行机制 #

表单输入框按下回车后的执行逻辑如下：

• 浏览器识别到用户在表单关联的可输入控件中按下回车键，触发表单隐式提交逻辑
• 检索当前表单内所有符合要求的提交按钮：包含type="submit"的<button>/<input>元素、未设置disabled属性、处于可交互状态
• 取DOM顺序中第一个符合要求的提交按钮，触发其click事件
• 若该click事件的回调中调用了event.preventDefault()，则终止整个提交流程；若未被阻止，才会继续触发表单的submit事件

你提供的示例中，id为troublesome的按钮是第一个提交按钮，且它的click回调调用了preventDefault()，所以整个流程在触发它的点击后就终止了，不会触发表单提交。如果要让该按钮不参与提交逻辑，给它添加type="button"属性即可。

相关规范来源 #

该行为在HTML官方标准的表单提交章节有明确规定：隐式提交表单时，必须先激活表单的默认提交按钮（即DOM顺序第一个可交互的提交按钮），仅当激活过程未被阻止时，才会执行后续的表单提交操作。

内容的提问来源于stack exchange，提问作者jameshfisher