为什么HTML表单无法通过名称为“submit”的按钮提交？

问题描述：

我正在尝试提交HTML表单，

I am trying to submit a HTML form,

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

上面的代码失败，但是如果我将按钮的名称更改为其他内容，例如

The code above failed, but if I change the name of button to something else, for example,

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

它有效。为什么？这两者之间的区别是什么？

it works. Why? What's the difference between these two?

答

表单中具有名称属性的交互式元素在DOM图形，表单DOM节点作为节点的属性。属性名称取自交互元素的name属性。

Interactive elements that are in a form and that have "name" attributes are associated in the DOM graph with the form DOM node as properties of the node. The property names are taken from the "name" attributes on the interactive elements.

因此，如果您通过开发人员控制台查看表单节点，您将看到属性对应于您的输入元素，按钮，textareas，选择等。因此，给定：

Thus, if you look at the form node via the developer console, you'll see properties corresponding to your input elements, buttons, textareas, selects, etc. So, given:

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

然后这可以在JavaScript上运行：

then this would work from JavaScript:

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

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

This weird behavior causes problems when you use names that collide with other useful properties on the form DOM node, like "submit". The reference to your button via the name "submit" has overridden the reference to the "submit" function that was there when the form node was "born".

为什么HTML表单无法通过名称为“submit”的按钮提交？

相关推荐