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. 33Mybatis------Mapper的编写

    Mapper编写的三种方法 传统的做法: 接口实现类继承SqlSessionDaoSupport 使用此种方法需要编写mapper接口,mapper接口实现类.mapper.xml文件 1.  在sq ...

  2. salt-ssh

    1.生产---测试--开发 salt-runners salt-run manage.status#显示当前up或down的minion salt-run manage.down salt-run m ...

  3. Ant 执行 YUICompressor

    Ant 执行 YUICompressor 任务压缩 JavaScript 和 CSS 文件,解决中文乱码问题,增加源文件字符编码集设定 标签: javascriptantcss任务encodingnu ...

  4. 【插件开发】—— 1 Eclipse插件开发导盲

    [插件开发]—— 1 Eclipse插件开发导盲   在真正接触eclipse插件开发一个月后,对插件的开发过程以及技术要求,也有了一定的了解.遥想之前像无头苍蝇一样乱撞乱学,真心觉得浪费了不少时间. ...

  5. Google java代码风格导入Eclipse

    Git地址 https://github.com/codeset/google-java-styleguide 下载配置文件在Eclipse中执行导入:Window -> Preferences ...

  6. 流程引擎Activiti系列:如何将kft-activiti-demo-no-maven改用mysql数据库

    kft-activiti-demo-no-maven这个工程默认使用h2数据库,这是一个内存数据库,每次启动之后都要重新对数据库做初始化,很麻烦,所以决定改用mysql,主要做3件事情: 1)在mys ...

  7. [CareerCup] 6.4 Blue Eyes People on Island 岛上的蓝眼人

    6.4 A bunch of people are living on an island, when a visitor comes with a strange order: all blue-e ...

  8. 进程&信号&管道实践学习记录

    程序分析 exec1.c & exect2.c & exect3.c 程序代码 (以exect1.c为例,其他两个结构类似) #include <stdio.h> #inc ...

  9. 移动统计工具Flurry

    网址:http://www.flurry.com/ 1注册和下载对应SDK 2集成SDK 3自定义统计项 至于怎么使用,后期会更新

  10. 小白学习mysql之函数

    ## 导语 曾经我以为,学会了select.update.insert和delete之后,我就学会了数据库~,要不是到公司看到SQL里充满了密密麻麻的的各种函数,我差点就信了~,当初的自己是多么的天真 ...