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. 28Spring_的事务管理_银行转账业务加上事务控制_基于注解进行声明式事务管理

    将applicationContext.xml 和 AccountServiceImpl 给备份一个取名为applicationContext2.xml 和 AccountServiceImpl2.j ...

  2. Rdlc报表出现空白页解决方法(转)

    在使用RDLC报表时,碰到这种情况:当只有一页数据时,报表确显示两页,第二页除了报表头之外数据为空.然后,当有多页数据时,最后一页为空. 这个问题很奇怪,网上有很多解决方案,以下的方法可以解决此问题. ...

  3. JavaScript及其异步实现

    由于javascript本身是单线程模型,这里主要通过Callbacks,Listeners,Control Flow Libraries ,Promises四种方式来实现异步操作. Referenc ...

  4. JS 之继承

    ECMAScript继承是通过原型链来继承的.基本思想是利用原型来让一个引用类型继承另一个引用类型的属性和方法,使原型变为另一个对象的实例.通过原型链实现继承时,不能使用对象字面量创建原型方法,避免重 ...

  5. 2016喜剧《死侍》韩版.HD720P中英双字

    导演: 蒂姆·米勒编剧: 略特·里斯 / 保罗·沃尼克 / 费边·尼谢萨 / 罗伯·莱菲尔德主演: 瑞恩·雷诺兹 / 莫蕾娜·巴卡林 / 艾德·斯克林 / T·J·米勒 / 吉娜·卡拉诺 / 更多.. ...

  6. 深入了解Ant构建工具 命令

    深入了解Ant构建工具 标签: ant工具任务jarjavaclass 2010-05-29 21:16 1346人阅读 评论(2) 收藏 举报 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  7. 20155301-滕树晨 第二次随笔作业--从现有技能获取的经验应用于JAVA中

    第二次随笔--从现有技能获取的经验应用于JAVA中 你有什么技能比大多人(超过90%以上)更好? 这个想了半天,有一个是我乒乓球还是比较擅长的,在学校里可能比百分之90的人要强,在外面肯定是不如了.再 ...

  8. Github克隆别人的库

    一. 首先在网站上进入别人的库(通过别人提供的链接或者自己在页面上查询),然后在右下方选择SSH,将链接复制下来. 二. 在你的电脑上新建一个与人家库名相同的文件夹,然后在文件夹上右击,在弹出菜单上选 ...

  9. C#出题库项目的总结(1)

    前记: 截止18点05分(4月9号),完成了代码部分的编写,明天争取把文档完成,毕竟在这个上面花的时间太多了,还有单词和书需要背,好吧,不说废话啦,下面进入正题. (PS:因为学院的模拟招聘笔试出题和 ...

  10. WDCP安装并配置php5.4和mongodb

    记录一下,免得忘了.全部都是自己测试用过的安装过程没有问题. linux常用命令 mv 移动文件 mkdir 创建文件夹 rm 删除 cp 复制 netstat 网络状态 tar 解压 wget 下载 ...