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>来创建按钮。




目录
相关文章
|
11月前
checkbox click和change事件
checkbox click和change事件
|
2月前
|
JavaScript
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
这篇文章讨论了在Vue 3中使用Element UI的`el-input`组件时,`@keyup.enter="search()"`事件绑定不生效的问题,并提供了通过使用`.native`修饰符来解决这个问题的方法。
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
|
5月前
input type="button"和button的区别
input type="button"和button的区别
|
5月前
|
前端开发
|
11月前
el-input点击事件
el-input点击事件
175 1
不使用el-form仅仅单独给el-input设置表单校验
不使用el-form仅仅单独给el-input设置表单校验
370 0
HTML中<button />和<input type=“button“/>的区别
HTML中<button />和<input type=“button“/>的区别
83 0
|
JavaScript
input中placeholder属性
input中placeholder属性
input中placeholder属性
|
前端开发
使input type=“text“不可编辑
使input type=“text“不可编辑
319 0
使input type=“text“不可编辑
|
前端开发 JavaScript 数据安全/隐私保护
Element el-input 输入框详解
本文目录 1. 用途 2. 输入框 2.1 输入框基本功能 2.2 显示占位文本 2.3 禁用 2.4 可清空的输入框 2.5 显示密码框 2.6 显示图标 2.7 输入长度限制 3. 文本域
2551 0
Element el-input 输入框详解