不要把你的input元素设置为“action”或“submit” - 文章 - 伯乐在线
& 不要把你的input元素设置为“action”或“submit”
大多数的浏览器都有一个严格意义上来说不能算作bug的bug。实际上，浏览器的本意是让你的工作变得更简单，但是如果你（或者其他人）恰好以某种方式（其实是错误的方式）来写HTML代码的话，就会完全触发该问题。特别的，如果你指定input标签的id或者name属性值为“action”或“submit”，你可能就会触发非常隐藏的bug。
关于该“Bug”的介绍
去年我通读了John Resig 和Bear Bibeault著作的《》一书。顺便说一下，如果你想写高效、优雅的javascript代码，这绝对是一本非常棒的书。不管怎么样，在第11章，某些内容吸引了我的注意力。如果你在form表单里有一个拥有id和/或name属性的input元素，那么你可以直接通过form元素的某些属性获取到该input元素，该特性被作者称为是“贪婪的ID”（greedy IDs）。
&form id=&form& action=&url&&
&input type=&text& id=&textboxid& name=&textboxname&&
<form id="form" action="url">&&&&&&<input type="text" id="textboxid" name="textboxname">&&</form>
JavaScript
// Grab the form
var form = document.getElementById('form');
// Reference the text box directly from the form by its ID or name
// -& The input element
form. // -& The input element
<div class="crayon-num" data-line="crayon-58aef<div class="crayon-num crayon-striped-num" data-line="crayon-58aef<div class="crayon-num" data-line="crayon-58aef<div class="crayon-num crayon-striped-num" data-line="crayon-58aef<div class="crayon-num" data-line="crayon-58aef<div class="crayon-num crayon-striped-num" data-line="crayon-58aef
// Grab the form&&var form = document.getElementById('form');&&&// Reference the text box directly from the form by its ID or name&&form.textboxid;&& // -& The input element&&form.textboxname; // -& The input element
这真是一个相当酷的想法，但是这并不是很有必要，因为通过元素的id或者name属性来获取元素也是很容易的。而且，要注意一个非常重要的事实：如果form元素的某个属性名和input元素的id/name值一样，那么该form的属性就会被input元素的属性值所覆盖。
如果你的input元素的id/name属性值被设置为了“action”或“submit”，然后你尝试使用javascript控制提交，那么此时就会变得极其悲剧。现在，如果你想知道form表单数据提交 (通过 form.action提交)的URL，或者你只是想通过写js代码的方式来提交(通过form.submit提交)，那么你将会分别得到一个错误的值和直接报错。
我从来没想过我会遇到这个问题，但是我还是碰到了。也许解决该问题的最简单的方法是改写你的input，但是不幸的是有时你可能拿不到HTML代码，而有时你根本不会去拿。而且其他的代码也可能依赖于id/name来做一些事情。因此，如果你没法去直接修改HTML代码，这里还有其他的解决方案。
这种解决方案只能解决form表单元素的属性值是函数的情形。任意值不是函数的属性都将不起作用，即使你尝试用javascript代码去动态修改input元素的id/name属性也毫无用处。不管怎么样，重写值是函数的属性（比如submit），从元素对象的原型获取函数，并将该函数以你想执行的form表单元素为运行环境来执行就能解决问题。
&form id=&form& action=&url&&
&input type=&text& id=&submit&&
&lt;form id=&quot;form&quot; action=&quot;url&quot;&gt;&&&&&&&lt;input type=&quot;text&quot; id=&quot;submit&quot;&gt;&&&lt;/form&gt;
JavaScript
// Grab the form
var form = document.getElementById('form');
// Try to submit it the normal way
form.submit(); // Nope, that's an error
// Try to submit using the prototype
HTMLFormElement.prototype.submit.call(form); // Yay! It worked!
// Grab the form&&var form = document.getElementById('form');&&&// Try to submit it the normal way&&form.submit(); // Nope, that's an error&&&// Try to submit using the prototype&&HTMLFormElement.prototype.submit.call(form); // Yay! It worked!
我并没有在老版本的浏览器做测试，但是它应该在对较老HTML4支持较好的浏览器上都能正常运行，因为HTMLFormElement最初是在中被指定的。
在书中没有给出解决方案我感到有些惊讶。他们只是多少提到了说我们要避免使用这些ids/names（指action、submit等）:
“幸运的是，通过避免使用和标准的属性名冲突的较简单的id值，我们在自己的标记中可以避免这个问题，同时我们鼓励其他人也这么做。特别是id和name的值要避免用submit，这是一个导致让人费解的bug并令人沮丧的问题的常见来源。”
虽然这的确是一个合理的建议，正因如此我把它作为了文章的标题，但这种情况并不总是可以避免的，因此有一种简单的能解决一部分问题的方案总是好的。但无论如何，我希望你永远用不到这种解决方案。愿上帝保佑，祝你编程快乐！
打赏支持我翻译更多好文章，谢谢！
打赏支持我翻译更多好文章，谢谢！
任选一种支付方式
关于作者：
可能感兴趣的话题
关于伯乐在线博客
在这个信息爆炸的时代，人们已然被大量、快速并且简短的信息所包围。然而，我们相信：过多“快餐”式的阅读只会令人“虚胖”，缺乏实质的内涵。伯乐在线内容团队正试图以我们微薄的力量，把优秀的原创文章和译文分享给读者，为“快餐”添加一些“营养”元素。
新浪微博：
推荐微信号
（加好友请注明来意）
&#8211; 好的话题、有启发的回复、值得信赖的圈子
&#8211; 分享和发现有价值的内容与观点
&#8211; 为IT单身男女服务的征婚传播平台
&#8211; 优秀的工具资源导航
&#8211; 翻译传播优秀的外文文章
&#8211; 国内外的精选文章
&#8211; UI,网页，交互和用户体验
&#8211; 专注iOS技术分享
&#8211; 专注Android技术分享
&#8211; JavaScript, HTML5, CSS
&#8211; 专注Java技术分享
&#8211; 专注Python技术分享
& 2017 伯乐在线JavaScript 参考手册
HTML DOM Submit 对象
Submit 对象
Submit 对象代表 HTML 表单中的一个提交按钮 (submit button)。
在 HTML 表单中 &input type=&submit&& 标签每出现一次，一个 Submit 对象就会被创建。
在表单提交之前，触发 onclick 事件句柄，并且一个句柄可以通过返回 fasle 来取消表单提交。
您可以通过遍历表单的 elements[] 数组来访问某个提交按钮，或者通过使用document.getElementById()。
Submit 对象属性
W3C: W3C 标准。
设置或返回提交按钮是否应被禁用。
返回一个对包含此提交按钮的表单的引用。
设置或返回提交按钮的名称。
返回提交按钮的表单元素类型。
设置或返回在提交按钮上显示的文本。
标准属性和事件
Submit 对象同样支持标准的
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码解析&button&跟&input type=&button&& 的区别_读书人
解析&button&跟&input type=&button&& 的区别
&来源：读书人网&【读书人网()：综合教育门户网站】
解析button和input typebutton 的区别一、定义和用法button?标签定义的是一个按钮。在?button?元素
解析&button&和&input type=&button&& 的区别 一、定义和用法&button&?标签定义的是一个按钮。在?button?元素内部，可以放置文本或图像。这是&button&与使用?input?元素创建的按钮的不同之处。二者相比较，?&button&?控件提供了更为强大的功能和更丰富的内容。&button&?与?&/button&?标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。请始终为按钮规定?type?属性。Internet Explorer?的默认类型是?"button"，而其他浏览器中（包括?W3C?规范）的默认值是?"submit"。二、浏览器支持所有主流浏览器都支持?&button&?标签。重要事项：如果在?HTML?表单中使用?button?元素，不同的浏览器会提交不同的值。Internet Explorer?将提交?&button&?与?&button/&?之间的文本，而其他浏览器将提交?value?属性的内容。请在?HTML?表单中使用?input?元素来创建按钮。三、注意事项在使用&button&标签时很容易想当然的当成?&input type="button"&使用，这很容易产生以下几点错误用法：?1、通过$('#customBtn').val()获取&button id="customBtn" value="test"&按钮&/button& value的值?? ? 在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。?参加上面标红的第一句话。　　这一点要和&input type="button"&区分开。? ? ? ? ? ? ? ? ? ? ? ? ??? ? 通过这两种方式$('#customBtn').val()，$('#customBtn').attr('value')在不同浏览器的获得值，如下：?Browser/Value$('#customBtn').val()$('#customBtn').attr('value')Firefox13.0testtestChrome15.0testtestOpera11.61testtestSafari5.1.4testtestIE9.0按钮按钮?验证这一点可以在测试下面的代码??"input?button"/&??????&/form&??&/body&??&/html& ? 1 楼 javaScript_miss && 学习了。。。 2 楼 幽灵线程 && 结论就是，让button，从哪里来滚回哪里去吧！ 3 楼 xiaotao.-15&& 幽灵线程 写道结论就是，让button，从哪里来滚回哪里去吧！+1 4 楼 nmtlsww && xiaotao.2010 写道幽灵线程 写道结论就是，让button，从哪里来滚回哪里去吧！+1+1