首先,input元素和button元素 都是可以作为普通按钮、提交按钮、重置按钮的。

<input type="button" value="button">
<input type="submit">
<input type="reset">
input元素默认 text类型
<button type="button">button</button>
<button type="submit">submit</button>
<button type="reset">reset</button>
button元素默认 submit类型。

其次,我们来看效果

看起来,好像是input类型的占位稍微多点,其实这是由于中英文字 占距 不同导致的,说到这就要讲一下 。

input除了button类型需要设置value属性之外。submit和reset都不需要,浏览器会默认配置,这里配置的是中文。
而button则必须手动配置。

最后,如何选择?

建议 使用button,因为一来 从开发角度讲,标签的语义化 越来越被提倡,input语义是输入,button语义是按钮,重置、普通按钮、提交都是 按钮功能。

二来,我们一般 需要自定义文字标识,不能依靠浏览器,特别是浏览器版本不一,设置统一的文字更加 有利于 界面的稳定。

input 和 button元素 作为提交、重置、按钮功用的区别。的更多相关文章

  1. 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失

    \ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...

  2. 前端 HTML form表单标签 input标签 type属性 重置按钮 reset

    input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...

  3. js点击重置按钮重置表单

    <html><head><script type="text/javascript">function formReset(){document ...

  4. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  5. 表单提交中的input、button、submit的区别

    1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type ...

  6. js进阶 9-5 js如何确认form的提交和重置按钮

    js进阶 9-5 js如何确认form的提交和重置按钮 一.总结 一句话总结: 1.这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return ...

  7. Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮

    Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...

  8. 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别

    这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...

  9. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

随机推荐

  1. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  2. Python3+slowloris安装使用教程

    一.说明 今天提到slowloris,这东西看着很眼熟,应该是以前局方打算用来刷竞赛积分的工具.我总觉得DoS没什么意思,但记不得怎么用了所以还是研究一下. 二.安装 slowloris就是一个pyt ...

  3. Oracle中 “ORA-14551: 无法在查询中执行 DML 操作” 如何解决

    在编写一个数据库函数时,方法实现需要查询后进行修改,出现ora-14551的错误 create or replace function fun_DxcBillSn(tabType integer,ta ...

  4. CentOS7+Win10双系统的CentOS7启动bug

    自从安装了CentOS7系统,它的启动时间常常要三分钟以上,实在忍不了. 以下是CentOS7系统的启动记录片断: May 18 13:04:05 DESKTOP-23V3CHU kernel: XF ...

  5. jq鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的.   (1)click单击鼠标事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发.        $('p').cl ...

  6. webkit之滚动条美化

    由于公司的产品改用webkit内核,在写公共css的时候,不想使用插件模拟,顺便网上查阅了下css3的滚动条美化. 首先,先上一副示意图. 从网络上盗图的(来源 http://zhangyaochun ...

  7. Qt 适合做界面

    确实感觉的Qt的界面开发相比MFC方便了许多,不用为设计和实现窗口烦恼.不需要太细研究界面的实现,从Qt自带的例子中就能轻松学习和应用.在界面开发上Qt的实用比MFC前进了许多.做C++开发不管怎样如 ...

  8. Android中的Context(一)

    Android中的Context(一) 在Android开发中,Context可以说是我们接触地非常多的一个概念了,也译作"上下文",但是这个上下文到底是什么却并不好理解. 通俗的 ...

  9. Tensorflow(添加噪声的方式)

    在去噪自编码器中,模型的输入是原始的输入经过某种形式的加噪过程后的衰弱的形式,所以加噪声一般分为:加高斯白噪声,掩模噪声,椒盐噪声. 1.加性高斯噪声 self.scale = tf,placehol ...

  10. 5ci