http://www.zhihu.com/question/20839977

在一个页面上画一个按钮,有四种办法:

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

参见:
[原]<button>和<input type="button"> 的区别
html - Difference between <input type='button' /> and <input type='submit' />
html - input type="submit" Vs button tag are they interchangeable?

 

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

input type="submit" 和"button"有什么区别?的更多相关文章

  1. input type="submit" 和"button"有什么区别

    HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型.点击触 ...

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

    网站开发进阶(四十四)input type="submit" 和"button"的区别   在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...

  3. <input type="button" /> 和<input type="submit" /> 的区别

    <input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...

  4. <input type = "submit"> 提交方式和用js的form.submit()有什么区别?

    假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...

  5. input[type='submit']input[type='button']button等按钮在低版本的IE下面,去掉黑色边框的问题

    今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border: ...

  6. 表单中submit和button按钮的区别!

    对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...

  7. input type=“submit”屏蔽自带的提交事件

    <p><input type="submit" class="submit" value="确认支付" onclick=& ...

  8. ajax post提交数据, input type=submit 返回prompt aborted by user

    添加 return false;否则就报prompt aborted by user异常

  9. html中submit和button的区别/ window.location.href 不跳转 的问题

    <input type="button">  <input type="submit"> 这两个的区别 是 button 不会自动提交表 ...

随机推荐

  1. KVM虚拟机CPU说明

    废话不多说了,下面对kvm虚拟机的CPU说明做一梳理:NUMA技术介绍NUMA是一种解决多CPU共同工作的技术方案,我们先回顾下多CPU共同工作的技术架构历史.多CPU共同工作主要有三种架构,分别是S ...

  2. VS代码片段(snippet)创作工具——Snippet Editor(转)

    原文:http://blog.csdn.net/oyi319/article/details/5605502 从Visual Studio 2005开始,IDE支持代码片段.代码片段以代码缩写和TAB ...

  3. 利用ViewHolder优化自定义Adapter的典型写法

    1 public class MarkerItemAdapter extends BaseAdapter { private Context mContext = null; private List ...

  4. Eclipse里面启用genymotion

    E:/Users/zhuxuekui/AppData/Local/Android/sdk as里面的SDK目录 1.打开eclipse并从云仓库里面下载genymotion插件 注意:这里面有一个坑, ...

  5. 如何拿到半数面试公司Offer——我的Python求职之路(转)

    原文出处:http://www.cnblogs.com/Lands-ljk/p/5836492.html 从八月底开始找工作,短短的一星期多一些,面试了9家公司,拿到5份Offer,可能是因为我所面试 ...

  6. LINUX SSH显示中文乱码

    ssh登陆后,执行: export LANG=zh_CN.gb2312就可以显示中文了.编辑/etc/sysconfig/i18n 将LANG="zh_CN.UTF-8" 改为 L ...

  7. 用python简单处理图片(1):打开\显示\保存图像

    一提到数字图像处理,可能大多数人就会想到matlab,但matlab也有自身的缺点: 1.不开源,价格贵 2.软件容量大.一般3G以上,高版本甚至达5G以上. 3.只能做研究,不易转化成软件. 因此, ...

  8. [CareerCup] 3.5 Implement Queue using Two Stacks 使用两个栈来实现队列

    3.5 Implement a MyQueue class which implements a queue using two stacks. LeetCode上的原题,请参见我之前的博客Imple ...

  9. [CareerCup] 8.7 Chat Server 聊天服务器

    8.7 Explain how you would design a chat server. In particular, provide details about the various bac ...

  10. C#中out和ref之间的区别

    首先:两者都是按地址传递的,使用后都将改变原来参数的数值. 其次:rel可以把参数的数值传递进函数,但是out是要把参数清空,就是说你无法把一个数值从out传递进去的,out进去后,参数的数值为空,所 ...