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. 限制站点目录防止跨站的三种方案(使用open_basedir)

    nginx结合php的时候,可以使用open_basedir限制站点目录防止跨站具体实现方法有以下三种:注意:以下三种设置方法均需要PHP版本为5.3或者以上. 方法1)在Nginx配置文件中加入fa ...

  2. localStorage和sessionStorage区别

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...

  3. sass、git、ruby的安装与使用。

    安装sass时必须先安装ruby,在安装ruby时勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境 sa ...

  4. 架构MVC——JS中的理论

    什么是MVC MVC是一种设计模式,它将应用划分为3个部分:数据(模型).展现层(视图)和用户交互层(控制器). 一个事件发生的过程可以描述如下: 用户和应用产生交互 控制器的事件处理器被触发 控制器 ...

  5. 大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)

    大前端时代已经到来!传智播客2015之WEB前端视频教程(全套教程共15G)大前端时代已经到来!如今,前端开发工程师的职责,不是只有切图.制作网页这么简单哦! G:\传智播客2015-WEB前端视频教 ...

  6. 使用JQuery能做什么(zz)

    jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层,使得它几乎适用于任何脚本编程的情形.jQuery通常能为我们提供以下功能: 1.方便快捷获取DOM元素 如果使用纯JavaScript的方 ...

  7. iOS - 语音云通讯

    iOS SDK 2.0 语音及图片消息详解本文档将详细介绍融云的语音及图片消息接口功能及使用说明.阅读本文前,我们假设您已经阅读了融云 iOS 开发指南,并掌握融云 SDK 的基本用法. 语音消息用来 ...

  8. 20145208 《Java程序设计》第9周学习总结

    20145208 <Java程序设计>第9周学习总结 教材学习内容总结 本周学习的内容有第十六周整合数据库,第十七章反射与类加载器,第十八章自定义泛型.枚举与注释. 在本周学习中,最大的难 ...

  9. Jenkins进阶系列之——03parameterized-trigger插件

    说明:这个插件可以根据已经完成构建的结果,触发新Job或者传递参数. 官方说明:Parameterized Trigger Plugin 安装步骤: 系统管理→管理插件→可选插件→Build Trig ...

  10. .net 开发人员如何自处

    关于N家还是J家,谁家更阔绰有前途的问题,每年都要讨论一会,当然和各位兄弟在岗位上迷茫,不知位置在哪有关系,不过这个问题基本算是伪问题,这种东西放到更高的维度,真的什么都不是. 但是为什么J家好像是不 ...