关于单文本框与多文本框表单无提交按钮的提交差异咨询

这其实是浏览器为了提升用户体验而内置的默认交互规则，我来给你拆解清楚：

核心原因：浏览器的表单提交触发逻辑 #

浏览器会根据表单内的输入控件数量和类型，决定是否允许通过回车键触发默认提交：

• 当表单只有一个单行输入控件（比如type="text"、search、email这类单行文本输入框）时，浏览器认为用户的操作目标很明确——输入完成后直接提交，因此会自动绑定回车提交的行为，哪怕没有显式的提交按钮。这也是为啥你第二个单文本框的例子能正常提交。
• 当表单包含多个可交互的输入控件（比如多个文本框、文本框+单选框/复选框等）时，浏览器会默认禁用回车提交的行为。因为这时候无法确定用户按下回车是想提交表单，还是只是想切换到下一个输入框、或者在输入内容里换行（虽然单行文本框不能换行，但浏览器会统一遵循这个逻辑），所以必须要有显式的提交按钮来触发提交，这就是你第一个多文本框例子无法提交的原因。

对应你的示例验证 #

• 无法提交的多文本框表单：两个<input type="text">属于多个单行输入控件，浏览器没有默认回车提交逻辑，所以按回车不会触发表单提交。
• 可以提交的单文本框表单：只有一个单行输入控件，浏览器自动启用回车提交，所以按回车就能提交。
• 添加提交按钮后的多文本框表单：有了显式的提交触发元素，不管输入控件数量多少，用户点击按钮或者聚焦到提交按钮后按回车，都能触发表单提交；部分浏览器甚至允许在任意输入框按回车时自动触发提交（因为存在提交按钮，浏览器明确了提交的触发方式）。

额外技巧：让多输入框表单无提交按钮也能回车提交 #

如果你确实需要多输入框表单在没有提交按钮时也支持回车提交，可以通过JavaScript手动监听回车事件来触发表单提交：

// 获取表单元素
const form = document.querySelector('form');
// 监听键盘按下事件
form.addEventListener('keydown', function(e) {
  // 判断是否按下回车键
  if (e.key === 'Enter') {
    // 阻止默认行为（避免冲突）
    e.preventDefault();
    // 手动提交表单
    this.submit();
  }
});

不过要注意：如果表单里包含<textarea>（多行文本框），这种方式会干扰用户在多行文本框里换行的操作，这时候需要额外判断当前聚焦的元素是不是<textarea>，再决定是否触发提交。

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