html input提交按钮标签样式,html - 输入类型=“提交”Vs按钮标签是否可以互换?...
html - 输入类型=“提交”Vs按钮标签是否可以互换?
input type="submit"和button标签是否可以互换? 或者,如果有任何差异,那么何时使用input type="submit"和button?
如果没有区别那么为什么我们有2个标签用于相同的目的?
10个解决方案
110 votes
[http://www.w3.org/TR/html4/interact/forms.html#h-17.5]
使用BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样,但它们提供了更丰富的渲染可能性:BUTTON元素可能包含内容。 例如,包含图像的BUTTON元素的功能类似于并且可能类似于其类型设置为“image”的INPUT元素,但BUTTON元素类型允许内容。
所以只有功能才可以互换!
(别忘了,type="submit"是button的默认值,所以请不要忘记!)
MatTheCat answered 2019-03-31T07:42:15Z
54 votes
只是一个按钮,它本身不会做任何事情。在表单元素内部时,将在单击时提交表单。
另一个有用的“特殊”按钮是,它将清除表格。
theprogrammer answered 2019-03-31T07:42:54Z
32 votes
使用< button> 标记而不是< input type =“button”..>。 这是bootstrap 3中的建议做法。
[http://getbootstrap.com/css/#buttons-tags]
“跨浏览器渲染
作为最佳做法,我们强烈建议您使用< button> 元件 尽可能确保匹配跨浏览器呈现。
除此之外,还有一个阻止我们的Firefox错误 设置< input>基于按钮的行高,导致它们不行 完全匹配Firefox上其他按钮的高度。“
rolfk answered 2019-03-31T07:44:06Z
22 votes
不支持其中的HTML,因为它是一个自动关闭标记。 另一方面,支持内部的HTML,图像等,因为它是一个标签对:. 在CSS样式方面也更灵活。
的缺点是它不受旧版浏览器的完全支持。 例如,IE6 / 7无法正确显示。
除非你有一些具体的原因,否则最好坚持。
Jared Ng answered 2019-03-31T07:45:19Z
22 votes
虽然这两个元素在功能上都提供相同的结果*,但我强烈建议您使用:
更加明确和可读。 建议控件可编辑,或者可由用户编辑; GET在其服务目的方面更为明确
更容易在CSS中设计风格; 如上所述,FIrefox和IE有一些怪癖,其中在某些情况下无法正确显示
可预测的请求:当在/GET请求中向服务器提交值时,IE具有非常行为
标记友好; 您可以在按钮内嵌套项目,例如图标。
HTML5,前瞻性思维; 作为开发人员,一旦官方化,我们有责任采用新规范。 HTML5,截至目前,已经正式使用了一年多,并且在许多情况下已被证明可以提高SEO。
*除了类型= “按钮” >默认情况下没有指定的行为。
总之,我强烈反对使用。
user1429980 answered 2019-03-31T07:47:24Z
11 votes
我意识到这是一个老问题,但我在mozilla.org上发现了这个问题并认为它适用。
按钮可以有三种类型:提交,重置或按钮。 点击一下 提交按钮将表单的数据发送到由...定义的网页 元素的action属性。
单击重置按钮 立即将所有表单小部件重置为其默认值。 从一个 UX的观点来看,这被认为是不好的做法。
单击按钮 按钮没有...没有! 这听起来很傻,但它非常有用 使用JavaScript构建自定义按钮。
[https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_<button>_to_finish]
Jere.me answered 2019-03-31T07:48:38Z
9 votes
比更新,更具语义性,易于风格化并支持HTML内部。
Acaz Souza answered 2019-03-31T07:49:18Z
7 votes
虽然其他答案都很棒并回答了这个问题,但在使用button和button时有一点需要考虑。使用input type="submit"您不能在输入上使用CSS伪元素,但您可以使用按钮!
这就是在样式方面使用button元素而不是输入的一个原因。
L84 answered 2019-03-31T07:50:10Z
1 votes
我不知道这是一个错误还是一个功能,但是我发现非常重要(至少在某些情况下)差异:button在您的请求中创建键值对,而input type="submit"则没有。 在Chrome和Safari中测试过。
因此,当您在表单中有多个提交按钮并想知道单击哪个按钮时 - 请勿使用button,请改用input type="submit"。
Ivan Yarych answered 2019-03-31T07:51:18Z
-2 votes
如果您正在谈论,它将不会自动提交表格
如果你在谈论标签,那是更新的,不会在所有浏览器中自动提交。
最重要的是,如果您希望在所有浏览器中单击提交表单,请使用
DarylChymko answered 2019-03-31T07:52:24Z
html input提交按钮标签样式,html - 输入类型=“提交”Vs按钮标签是否可以互换?...相关推荐
- vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue
vue 所有按钮属性.vue Button 所有按钮属性事件.vue a-button 所有按钮属性事件.vue 按钮所有属性事件.vue 1.组件注册 1.按钮类型 2.按钮组合 3.不可用状态 4 ...
- HTML input type 输入类型
本章描述 <input> 元素的输入类型. 输入类型:text <input type="text"> 定义供文本输入的单行输入字段: 实例 <for ...
- HTML5 中的 input 元素的输入类型(type 属性的取值)
目录 输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...
- 【本人秃顶程序员】如何限制input输入类型
1.只能输入和粘贴汉字 <input onkeyup="value=value.replace(/1/g,'')" onbeforepaste="clipboard ...
- HTML表单input类型有哪些,HTML表单之input元素的23种type类型
摘自:http://www.cnblogs.com/xiaohuochai/p/5179909.html 了解HTML表单之input元素的23种type类型 随着HTML5的出现,input元素新增 ...
- 在php中type有几种属性,HTML表单之input元素的23种type类型
input元素中有多种类型(type)值,用以接受各种类型的用户输入.其中,button.checkbox.file.hidden.image.password.radio.reset.submit. ...
- html 输入类型,HTML 输入类型(示例代码)
输入类型:text 定义供文本输入的单行输入字段: 实例 输入类型:password 定义密码字段:只有使用了type="password",密码才能看不到. 实例 输入类型:su ...
- html表单新增类型,HTML5表单设计——新增输入类型和新增表单属性
新增输入类型 email类型 用来输入邮箱地址的文本框.该文本框与普通文本框在页面显示时没有任何区别,专门用于接收Email地址信息.提交表单时自动验证是否符合Email地址格式,如果不符合,将提示相 ...
- input元素的23种type类型
随着HTML5的出现,input元素新增了多种类型,用以接受各种类型的用户输入.其中,button.checkbox.file.hidden.image.password.radio.reset.su ...
最新文章
- Android 隐藏软键盘
- 移动通信网络中的数字基带
- 使用Docker搭建WordPress博客(三)nginx镜像制作
- mysql子查询字符串位置_MySql基础-子查询
- pythondevp2p_以太坊GO、JAVA、PYTHON、RUBY、JS客户端介绍
- wordpress插件feed count中文版
- 数据库MySQL/mariadb知识点——触发器
- Problem 1: Multiples of 3 and 5
- 页面的主题标记--body
- 05-Elasticsearch官网译文(1)
- 除了写代码,还能如何晋升为高级工程师?
- vue 监听浏览器页面关闭_前方高能,这是最新的一波Vue实战技巧,不用则已,一用惊人...
- java Hello World程序分析(翻译自Java Tutorials)
- 一个有助于理解事件冒泡和事件捕获的例子
- git注意事项(持续更新中)
- matlab画矩阵中的两列,matlab 图例 两列
- 连续时间与Balck-Scholes公式(上)(偏微分)
- Twitter群推王的推特自动发帖功能是如何实现的
- Level up!从流量经营到客户运营实战技术分享
- 强哥说Java--Java接口