无Submit按钮与JS的表单触发提交，是否为预期行为？

你遇到的这个情况完全符合HTML的默认规则，我来给你拆解一下背后的原因：

1. 按钮的默认类型是submit #

你代码里的<button>ok</button>没有指定type属性，在HTML规范里，<button>元素的默认type值就是submit——也就是说，这个按钮本质上就是一个提交按钮，只是你没显式写出type="submit"而已。所以点击它的时候，浏览器会默认触发表单的提交行为。

2. 输入框回车触发提交的规则 #

当表单里存在可提交的控件（比如这个默认的submit按钮），并且某个输入框处于聚焦状态时，按下回车键也会自动触发表单提交。这是浏览器为提升用户操作便捷性设计的默认行为。

怎么解决这个问题？ #

根据你的需求（只需要password字段，不想触发表单提交导致页面重载），有两种简单的方案：

方案一：给按钮指定type="button" #

把按钮改成这样，它就不会再触发表单提交了：

<button type="button">ok</button>

方案二：阻止表单的默认提交行为 #

如果之后你可能需要用到表单的其他逻辑，但又不想让它默认重载页面，可以给表单添加提交事件监听，阻止默认行为：

document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault();
  // 这里可以写你自己的逻辑，比如获取密码值
  const password = document.querySelector('input[type="password"]').value;
  console.log(password);
});

另外补充一下：你为了消除Chrome警告添加的隐藏username输入框和form标签的做法是合理的，这个和提交行为没有冲突~

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