请勿使用保留字来命名网页元素

转载自 Opera中国

最近，我处理了一个网友报上来的问题，问题提到“Opera 不支持通过 JavaScript 来提交表单”。这个 Bug 很诡意，在接下来的时间里，我动手编写了一段简单的 HTML，代码如下：

<form id="form1" action="" method="get">
    <input name="parameter1" type="text">
</form>

<input onclick="document.getElementById('form1').submit()" 
value="My Submit" type="button">

很显然，点击 My Submit 按钮是可以提交的。但是，通过参考了网上某个论坛系统的 HTML 代码，我发现了一个问题。如下的代码，只是在原有基础上添加了一个表单的提交按钮。

<form id="form1" action="" method="get">
    <input type="text" name="parameter1"/>
    <input type="submit" name="submit"/>
</form>

<input onclick="document.getElementById('form1').submit()" 
value="My Submit"  type="button">

但是，所添加的这行 HTML 代码，将造成已有 My Submit 按钮功能的失效。细心的朋友，也许已经发现了，这个新添加的提交按钮，其 name 也为 submit，这就是造成问题的原因所在。

对于表单中的某个元素，我们可以通过 DOM 方式逐级引用。假设，我想引用上面的 submit 提交按钮，我应该书写成：

document.getElementById('form1').submit
那假如，我想通过 JavaScript 使用 form1 完成提交表单的动作呢，我应该书写成：
document.getElementById('form1').submit()


这就怪了，提交表单的代码竟然与引用 submit 按钮的代码如此相似，以至于浏览器认为 submit 为 form1 的某个元素，而不是可以完成提交动作的方法。其实，是网站代码的编写者不小心造成了这种未期待的后果，且这一现象在其他浏览器中同样存在。

建议

由此，我们可以看到简单地对表单元素使用保留字命名，是多么不严谨的一件事情。Web 标准化不光是简单地使用 CSS 和 HTML，更多的非标准化问题是由于不正确使用几种简单技术产生的。因此，为了让技术更容易地为我们所有，就让我们更严谨地对待技术吧。