网站开发进阶 (四十四)input type=“submit“ 和“button“的区别

在一个页面上画一个按钮，有四种办法：

• 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。

• 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。

• 这个按钮放在 form中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的value 值不同；可能还有其他的浏览器兼容问题。

• 其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。

需要强调的一点是，其实不是一个画面元素，而是一个表单（Form）元素，和文本输入是一样的，都属于“数据”的一部分（特征是，有value属性，而且该属性的值，会被传送到 server 端，可以拿来用），而不是样式的一部分。这种表现和数据混淆的设计，是早期 web 标准还比较简陋的时代的遗产。

从画面表现上看，通过 CSS 可以把两者描绘得完全一样。从画面动作上看，通过 JS 可以强制两者动作也一致（都提交或者都不提交）。但是只有表单数据这个特性，是无法混淆的。无法把自己当成 Form 的数据。所以，如果只是个单纯的按钮，触发一些画面动作，请使用；反之，会把画面的数据提交给 Server 的，一般用，当然+JS 也完全可以取代。Submit是专门用于提交表单的 Button，与 Button 的区别主要有两点：

• type=button 就单纯是按钮功能

• type=submit 是发送表单

Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此。

表单提交时，所有具有 name 属性的 html 输入元素(包括 input 标签、button 标签、select 标签等)都将作为键值对提交，除了 Submit 对象。Submit 对象只有在自己被单击后的提交中才会作为键值对被提交。

  但是对于从事 WEB UI 的人应该要注意到，使用submit来提高页面易用性：使用 submit 后，页面支持键盘 enter 键操作，而很多 WEB 软件设计师，可能没有注意到 submit 统一。用 button 后往往页面不支持 enter 键了。所以需要支持 enter 键，必须要设置个 submit，默认 enter 键对页面第一个 submit 进行操作。 执行完 onClick，转到 action。可以自动提交不需要 onClick。所以说 onclick 这里可以不要。执行完 onClick，跳转文件在 js 文件里控制。提交需要 onClick。 比如：onclick=“form1.action=‘a.jsp’;form1.submit();” 这样就实现了submit的功能了。讲白一些，就是 submit 会有一个跳转，页面会刷新；而 button 不会刷新，就是一个 button；可以用来生成按钮，更加灵活，样式更好控制。