input type="button" 和button区别

简介: 来源:https://www.jianshu.com/p/687aabeedae5 在一个页面上画一个按钮,有四种办法:1、 这就是一个按钮。

来源:

https://www.jianshu.com/p/687aabeedae5


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

1、 <input type=”button” /> 这就是一个按钮。如果你不写javascript 的话,按下去什么也不会发生。

2、 <input type=”submit” />这样的按钮用户点击之后会自动提交 form,除非你写了javascript 阻止它。

3、<button> 这个按钮放在 form 中也会点击自动提交,比前两个的优点是按钮的内容不光可以有文字,还可以有图片等多媒体内容。(当然,前两个用图片背景也可以做到)。

它的缺点是不同的浏览器得到的 value 值不同;可能还有其他的浏览器兼容问题。

<button>无法把自己当成Form的数据,所以,如果只是个单纯的按钮,触发一些画面动作,请使用<button/>。反之,会把画面的数据提交给Server的,一般用<input type=”submit” />,当然<button>+JS也完全可以取代

4、其他标签,例如 a, img, span, div,然后用图片把它伪装成一个按钮。

注意:在 HTML <form>中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交<button><button/>之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用<input>来创建按钮。




目录
相关文章
|
存储 Kubernetes 监控
K8S核心组件介绍
K8S核心组件介绍
|
1月前
|
移动开发 安全 小程序
淘宝/天猫:使用支付宝API实现多场景支付,覆盖用户偏好
本文详解如何通过支付宝API在淘宝、天猫等平台实现多场景支付,覆盖APP、PC、H5及小程序,结合用户偏好动态配置分期、快捷支付等功能,提升转化率与体验。内容涵盖API核心功能、技术示例(Python)、安全实践与性能优化,确保开发高效可靠。
378 3
|
C++ Python Perl
终于解决VScode中python/C++打印中文全是乱码的问题了
终于解决VScode中python/C++打印中文全是乱码的问题了
1221 0
终于解决VScode中python/C++打印中文全是乱码的问题了
|
7月前
|
人工智能 自然语言处理 并行计算
Chitu:清华核弹级开源!推理引擎3倍提速+50%省卡,国产芯片告别英伟达绑架
Chitu(赤兔)是清华大学与清程极智联合开源的高性能大模型推理引擎,支持多硬件适配,显著提升推理效率,适用于金融、医疗、交通等多个领域。
703 10
Chitu:清华核弹级开源!推理引擎3倍提速+50%省卡,国产芯片告别英伟达绑架
|
3月前
|
存储 人工智能 JavaScript
Java中的数据类型转换
本文介绍了 Java 中常见的数据类型转换方法,涵盖字符串与整型、长整型、浮点型、布尔型及日期类型的相互转换,并讲解了可能出现的异常和处理方式。
185 0
|
运维 Prometheus 监控
OceanBase 的运维与监控最佳实践
【8月更文第31天】随着分布式数据库解决方案的需求日益增长,OceanBase 作为一种高性能的分布式数据库系统,在众多场景下得到了广泛应用。为了确保 OceanBase 集群的稳定运行,合理的运维与监控是必不可少的。本文将探讨 OceanBase 的日常运维管理与监控策略,并提供相应的代码示例。
718 2
|
Web App开发 前端开发 JavaScript
网页浏览和编辑DWG快速入门的方法(WEB CAD SDK)
MxDraw云图在线CAD解决方案,包括MxDraw、MxCAD开发包、图纸转换程序和后端服务。支持多种平台和CPU架构,推荐使用最新版Chrome或Edge浏览器。提供AutoCAD各版本dwg格式支持,具备三维和二维编辑功能。提供入门开发指南和功能丰富的示例。用户可下载开发包进行功能演示,包括在线预览和编辑CAD图纸。
1478 107
网页浏览和编辑DWG快速入门的方法(WEB CAD SDK)
|
10月前
|
XML Java 数据格式
Spring容器Bean之XML配置方式
通过对以上内容的掌握,开发人员可以灵活地使用Spring的XML配置方式来管理应用程序的Bean,提高代码的模块化和可维护性。
304 6
|
Linux 开发工具 Perl
|
存储 运维 监控
机器的coredump文件过多处理
【10月更文挑战第1天】
516 4