input type=submit 和button的区别及表单提交

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

1 <input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
2 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
3 <button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题（葛亮）。
4 其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。

提交表单的方式：

1 <input type="button" /> 这就是一个按钮。通过编写javascript，添加 onclick提交form。
2 <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
3 <button> 这个按钮放在 form 中也会点击自动提交
4 <input type="image">此标签放置在<form>标签内就具有提交功能

需要强调的一点是，其实<input type="submit" />不是一个画面元素，而是一个表单（Form）元素，和文本输入是一样的，都属于“数据”的一部分（特征是，有value属性，而且该属性的值，会被传送到server端，可以拿来用），而不是样式的一部分。这种表现和数据混淆的设计，是早期web标准还比较简陋的时代的遗产。
从画面表现上看，通过CSS可以把两者描绘得完全一样。
从画面动作上看，通过JS可以强制两者动作也一致（都提交或者都不提交）。
但是只有表单数据这个特性，是无法混淆的。<button>无法把自己当成Form的数据。
所以，如果只是个单纯的按钮，触发一些画面动作，请使用<button>；反之，会把画面的数据提交给Server的，一般用<input type="submit" />，当然<button>+JS也完全可以取代。

作者：zhaosj
链接：https://www.zhihu.com/question/20839977/answer/21842933
来源：知乎
著作权归作者所有，转载请联系作者获得授权。
作者：王洪雷
链接：https://www.zhihu.com/question/20839977/answer/16354924
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

转载于:https://www.cnblogs.com/mawenying/p/6590260.html

input type=submit 和button的区别及表单提交相关推荐

HTML button 和 input type=“button”的区别 / input type=submit 和button的区别
HTML <button> 和 input type="button"的区别: 1. <button>标签里可以放文本图片等内容,与<input> ...
input type=“submit“ 和“button“有什么区别
input type="submit" 和"button"在功能.是否具备Enter键支持和是否需要写JavaScript来阻止上有所区别: 1.功能不同 su ...
html中submit和button的区别(总结)
文章目录 submit和button submit介绍 submit和button的区别 submit和button submit介绍 submit是button的一个特例,也是button的一种 ...
type=submit表单提交理解
1.默认为form提交表单 . button则响应用户自定义的事件,如果不指定onclick等事件处理函数,它是不做任何事情.当然,button也可以完成表单提交的工作. 2. method=&quo ...
Form 表单提交和 Ajax 表单提交的一些区别
自己一些心得体会: 1:form 表单提交后进行后台处理程序,没有直接返回值,只能进行后台处理,Form标签里的所有数据全部提交到后台 ajax 表单提交,是可以局部提交,具有ajax的所有属性... ...
jQuery Mobile中链接（包含button和表单提交的链接）的data-*选项
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有data-*选项 jQuery Mobile中链接的data-*选项所有的链接,包含那些带有 data-role="bu ...
input type = submit 提交方式和用js的form.submit()有什么区别？
说"一样的"的都不是专业的前端,至少有以下不同: 假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B ...
submit和button的区别
声明: 更多免费教学文章请关注这里转发:https://blog.csdn.net/aiming66/article/details/79046432 button-普通按钮,submit-提交按钮 ...
mysql 提交按钮_表单提交按钮input和button、a的差异
现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

input type=submit 和button的区别及表单提交

input type=submit 和button的区别及表单提交相关推荐

最新文章

热门文章