input 和 button元素 作为提交、重置、按钮功用的区别。
首先,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元素 作为提交、重置、按钮功用的区别。的更多相关文章
- 页面table的每行都有一个<input type='button' />,如何实现点击按钮在按钮下方弹出一个div,点击空白消失
\ <input id="test" type="button" />/*按钮*/ <div id="tanchu"> ...
- 前端 HTML form表单标签 input标签 type属性 重置按钮 reset
input type="reset" value="重置" reset重置 还原到默认状态 <!DOCTYPE html> <html lan ...
- js点击重置按钮重置表单
<html><head><script type="text/javascript">function formReset(){document ...
- 表单提交按钮input和button、a的差异
现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...
- 表单提交中的input、button、submit的区别
1.input[type=submit] 我们直接来看例子: 代码如下: <form> <input name="name"> <input type ...
- js进阶 9-5 js如何确认form的提交和重置按钮
js进阶 9-5 js如何确认form的提交和重置按钮 一.总结 一句话总结: 1.这个并不好做:onsubmit 里面的代码必须返回false才能取消onsubmit方法的执行,所以,有return ...
- Android开发 ---基本UI组件3:单选按钮、多选按钮、下拉列表、提交按钮、重置按钮、取消按钮
Android开发 ---基本UI组件2 1.activity_main.xml 描述: 定义一个用户注册按钮 <?xml version="1.0" encoding=&q ...
- 关于<button> 没写 type='button' 导致点击时提交以及<button>和<input type="button">的区别
这是我的第一篇博客,如果写的不好,请见谅 这是一个关于button按钮一个小问题 最近刚开学跟着老师一起写代码,在模仿JAVA web程序设计(慕课版) P61页第三章 Ajax处理XML的代码中发现 ...
- 遭遇input与button按钮背景图失效不显示的解决办法
笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...
随机推荐
- jquery等待特定元素加载再执行相关函数
jQuery.fn.wait = function (func, times, interval) { var _times = times || 100, //100次 _interval = in ...
- Web API学习——Web API 强势入门指南
Web API是一个比较宽泛的概念.这里我们提到Web API特指ASP.NET Web API. 这篇文章中我们主要介绍Web API的主要功能以及与其他同类型框架的对比,最后通过一些相对复杂的实例 ...
- javascript高级程序设计第3版——第12章 DOM2与DOM3
12章——DOM2与DOM3 为了增强D0M1,DOM级规范定义了一些模块. DOM2核心:为不同的DOM类型引入了一些与XML命名空间有关的方法,还定义了以编程方式创建Document实例的方法: ...
- call apply bind的区别
都是天生自带的内置方法(Function.prototype),所有的函数都可以调取这三个方法,改变this指向 call 语法:fn.call(context,para1......) 把fn方法执 ...
- vue-cli webpack配置 简单分析
vue-cli webpack配置分析 入口 从package.json可以看到开发和生产环境的入口. "scripts": { "dev": "no ...
- Spvmn测试环境搭建及其安全性讨论
一.说明 这几天都在做设备的协议分析,然后看到有个叫Spvmn的不懂要怎么操作才能触发其操作过程,问了测试部的同事说也没有测试文档,自己研究了一下这里做个记录. 按我现在理解,各厂商有自己的私有协议. ...
- EAP-MD5计算方法
一.说明 领导要求确认设备进行802.1X认证时,是否直接将用户名密码明文传给交换机.配好端口镜像.搭好Radius环境后进行了抓包分析. 二.计算 2.1 802.1X认证过程 完整流程如下: 客户 ...
- Win10系列:C#应用控件进阶5
多线形 多线形和多边形类似,不同点在于多线形中最后一个点和第一个点不会默认被连接.在多线形的点集中,可以存在同一个开始点和终结点因而会定义成闭合图形.下面将演示如何使用Polyline控件绘制一个多线 ...
- c# Expression 扩展
一.简介 当查询比较复杂时,需要很多判断或者跨方法传递参数时使用 二.扩展类 public static class DynamicLinqExpressions { public static ...
- JS-5-循环
循环结构 循环:反复执行有关操作 * for循环 for(var i=1; i<=50; i++) { console.log("第"+i+"次说我爱你" ...