input type=“submit“ 和“button“有什么区别?

news/2024/7/19 15:31:09 标签: js

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

  • <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也完全可以取代。


http://www.niftyadmin.cn/n/1869972.html

相关文章

rose将图导出图片

方法一 &#xff1a;针对每一张绘制好的uml图形&#xff0c;使用ctrl-a ctrl-c 最后打开word, 执行ctrl-v就可以了&#xff0c;一般这种情况下是可以将每张图都粘贴到文档中然后就可以发送给他人共享了。 如果中文乱码 ctrlA全部选中&#xff0c;右键Format->Font 把字体…

彻底搞清楚javascript中的require、import和export

为什么有模块概念 理想情况下&#xff0c;开发者只需要实现核心的业务逻辑&#xff0c;其他都可以加载别人已经写好的模块。 但是&#xff0c;Javascript不是一种模块化编程语言&#xff0c;在es6以前&#xff0c;它是不支持”类”&#xff08;class&#xff09;&#xff0c;…

使用 SourceInsight 查看 android 源码常用技能

1. f3 f4 在当前文件中搜索某个关键词, 组合使用可以向前向后搜索, 先使用 shiftf3 或者 shiftef4 搜索当前光标下的某个关键词, 然后就可以使用 f3 f4 向前向后搜索此关键词了. 2. shiftf8 可以高亮显示当前关键词 3. ctrl/ 搜索整个项目中的 reference 索引 4.ctrl鼠标左…

什么是前端(js)路由器

概述 路由器是WebApp应用程序切换页面的枢纽。早起由于浏览器处理JS脚本的能力较弱&#xff0c;大部分逻辑和交互都在服务端完成&#xff1b;因此路由器这个词最早出现服务端&#xff1b;服务端通过客户端请求的URL解析出需要返回给客户端的HTML文档的路径&#xff0c;最终返回…

android apk 反编译方法

一、Apk反编译得到Java源代码 下载上述反编译工具包&#xff0c;打开apk2java目录下的dex2jar-0.0.9.9文件夹&#xff0c;内含apk反编译成java源码工具&#xff0c;以及源码查看工具。 apk反编译工具dex2jar&#xff0c;是将apk中的classes.dex转化成jar文件 源码查看工具jdgu…

css选择元素时有没有空格的区别

HTML文档是一棵树的结构&#xff0c;各元素以一种层次结构为基础构成‘树’的视图。文档树中的每个元素&#xff0c;要么是另一个元素的父元素&#xff0c;要么是另一个元素的子元素&#xff0c;这样&#xff0c;各元素之间就形成了‘父子关系’。基于这样的关系模型&#xff0…

Fragment(1)Android Fragment完全解析,关于碎片你所需知道的一切

转载请注明出处&#xff1a;http://blog.csdn.net/guolin_blog/article/details/8881711 我们都知道&#xff0c;Android上的界面展示都是通过Activity实现的&#xff0c;Activity实在是太常用了&#xff0c;我相信大家都已经非常熟悉了&#xff0c;这里就不再赘述。 但是Ac…

SSM-easyui 添加多个tabs页面出现混乱

框架是springMVC 用easyui穿件tabs, 使用href创建两个tabs的话, 第一个里面的内容部分会进入第二个tab, 第二个里面的内容也会进入第一个