input type="submit" 和"button"有什么区别?
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"有什么区别?的更多相关文章
- input type="submit" 和"button"有什么区别
HTML中<input type="submit" /> 和 <input type="button" /> 主要从元素定义类型.点击触 ...
- 网站开发进阶(四十四)input type="submit" 和"button"的区别
网站开发进阶(四十四)input type="submit" 和"button"的区别 在一个页面上画一个按钮,有四种办法: 这就是一个按钮.如果你不写ja ...
- <input type="button" /> 和<input type="submit" /> 的区别
<input type="button" /> 这就是一个按钮.如果你不写javascript 的话,按下去什么也不会发生.<input type="s ...
- <input type = "submit"> 提交方式和用js的form.submit()有什么区别?
假设: A表单内有<input type="submit">,通过点击这个input来提交表单 B表单内没有<input type="submit&qu ...
- input[type='submit']input[type='button']button等按钮在低版本的IE下面,去掉黑色边框的问题
今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border: ...
- 表单中submit和button按钮的区别!
对于表单的按钮以前知道submit和button有区别,但没有深入探索,今天刚好又碰到这个问题,看了下网络上这位朋友已经有现成的总结了,而且比较到位,拿来跟大家分享下(原文地址:http://blog ...
- input type=“submit”屏蔽自带的提交事件
<p><input type="submit" class="submit" value="确认支付" onclick=& ...
- ajax post提交数据, input type=submit 返回prompt aborted by user
添加 return false;否则就报prompt aborted by user异常
- html中submit和button的区别/ window.location.href 不跳转 的问题
<input type="button"> <input type="submit"> 这两个的区别 是 button 不会自动提交表 ...
随机推荐
- slatsatck file模块2种写法及系统初始化
一 . lamp搭建 file2种写法 saltstack--一键yum lamp:---请注意重点: http://www.blogs8.cn/posts/WLjId80 知识点: 文件的2种写 ...
- [MetaHook] R_SparkStreaks
By hzqst void R_SparkStreaks(vec_t *pos, int count, int velocityMin, int velocityMax) { int i; parti ...
- Linux第14周学习笔记
虚拟存储器 虚拟存储器是硬件异常.硬件地址翻译.主存.磁盘文件和内核软件的完美交互. 虚拟存储器的特点: 中心的 强大的 危险的 物理和虚拟寻址 计算机系统的主存被组织成一个由M个连续的字节大小的单元 ...
- 蓝牙技术BlueTooth
转载网址:http://blog.csdn.net/dxdxsmy/article/details/7790568 蓝牙核心架构概念的理解请参考上面的网址.
- MVC5 + EF6 + Bootstrap3 (10) 数据查询页面
文章来源:Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-search-page.html 系列教程:MVC ...
- 删除 windows 下 node_modules 过深的目录
本文同步自我的个人博客:http://www.52cik.com/2015/11/13/node-modules-del.html 说到 node 的模块,确实既好用又蛋疼.相信无数人吐槽 node_ ...
- JS构造函数的用法和JS原型
$(function(){ var rec = new Rectangle(5, 10); //alert(rec.width + "*" + rec.height + " ...
- TCP的三次握手和四次挥手
置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<两个简单的Loading> 作者主页:myvin 博主QQ:851399101(点击QQ和博主发起临时 ...
- Redis入门学习(一)——安装配置
最近马上要找实习了,听学长说他们公司里用了redis来解决缓存问题,在大三结束前来学习一下. 问:Redis是什么? 答:(官方)REmote DIctionary Server(Redis)是一个K ...
- 初识 swift 封装轮播图
一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...