首先,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. 点云格式-pcd

    每一个pcd文件包含一个文件头,它声明文件中存储的点云数据的特性(元数据).pcd文件头必须用ASCII码来编码.头文件属性字段都以一个新行(\n)分开.从0.7版本开始,pcd文件头包含下面的字段: ...

  2. Jenkins自动构建gitlab项目(jenkins+maven+giltlab+tomcat)

    环境准备: System:CentOS 7.3 (最小化安装) JDK: 8u161 (1.8_161) tomcat: 8.5.29 Jenkins: Jenkins 2.107.1 Gitlab: ...

  3. 第一个Azure应用

    https://www.azure.cn/zh-cn/ 学习Azure,首先看的是官网Azure介绍,因为用到了虚拟机及存储等因此,着重看这两块. 本文Demo是通过API发送消息,当收到消息后新建虚 ...

  4. C#生成.tlb文件初认识

    刚接手同事的代码,生成文件时,发现生成了一个对应的dll文件(应用程序中输出类型为类库),和一个对应的.tlb文件,但是报如下的错误: 那么.tlb文件是如何生成的呢? 选择项目->右键属性-& ...

  5. 苹果手机的SB系列(1)听不懂人话的sir

    写在前面,因手买错了(至于怎么买错了不解释)手机才买了一个苹果,价格不扉,但实在让人很不爽.记下了SB的点点. Sir听不懂人话,我让他查非洲安哥拉的时间,却屡次返回美国安哥拉洲的时间,很自恋.

  6. gitignore不起作用

    .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,原因是因为在git忽略目录中,新建的文件在git中会有缓存,如果某些文件已经被纳入了版本管理中, ...

  7. [Leetcode 72]编辑距离 Edit Distance

    [题目] Given two words word1 and word2, find the minimum number of operations required to convert word ...

  8. R语言预测实战(游浩麟)笔记2

    特征构建技术 特征变换,对原始的某个特征通过一定的规则或映射得到新特征的方法,主要方法包括概念分层.标准化.离散化.函数变换以及深入表达.特征变换主要由人工完成,属于比较基础的特征构建方法. 概念分层 ...

  9. 关于FGPA的复位

    关于FGPA的复位 当初开始学FPGA的时候,总是疑惑:FPGA不是没有复位管教么,但总在always看到有复位信号.这个复位信号(我们暂且称为rst_n)从哪里来? 实际上是可以从两个方面获得的,这 ...

  10. Java oop(一些自己的理解,并没有展开很细)

    一下内容是自己总结用的,只是按照自己的理解去写.参考的是菜鸟教程.Java 是一个面向对象的语言.OOP就是面向对象编程.封装:在某些类里面,某些属性不想向外暴露,但是我们又想提供一个方法去访问或修改 ...