为什么不能通过名称为“提交”的按钮提交 HTML 表单？答案

【问题标题】：Why HTML form cannot be submitted by a button with name "submit"?为什么不能通过名称为“提交”的按钮提交 HTML 表单？
【发布时间】：2015-05-03 14:08:45
【问题描述】：

我正在尝试提交 HTML 表单，

<form action="go.php">
    <input id="I" type="button" name="submit" value="Go" onclick="this.form.submit()"/>
</form>

上面的代码失败了，但是如果我把按钮的名字改成别的，比如，

<form action="go.php">
    <input id="I" type="button" name="bt" value="Go" onclick="this.form.submit()"/>
</form>

它有效。为什么？这两者有什么区别？

【问题讨论】：

当你要提交时，为什么要使用 type="button"。使用 type="submit"
在您的浏览器控制台窗口中，您可能会看到如下消息：Uncaught TypeError: this.form.submit is not a function。这暗示了这个问题，下面@Pointy的回答最好地解释了它。

【解决方案1】：

表单中具有“名称”属性的交互元素在 DOM 图中与表单 DOM 节点相关联，作为节点的属性。属性名称取自交互元素的“名称”属性。

因此，如果您通过开发者控制台查看表单节点，您将看到与您的输入元素、按钮、文本区域、选择等相对应的属性。因此，给定：

<form id=myform>
  <input name=sometext value="hello world">
</form>

那么这将适用于 JavaScript：

var f = document.getElementById("myform");
alert(f.sometext.value); // "hello world"

当您使用与表单 DOM 节点上的其他有用属性（例如“提交”）冲突的名称时，这种奇怪的行为会导致问题。通过名称“提交”对您的按钮的引用覆盖了对表单节点“出生”时存在的“提交”函数的引用。

【讨论】：