表单提交按钮input和button、a的差异
现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来。在以前的日子里,大家都习惯于用input,因为他直接拥有type=submit,而button没有,它更适合于表达 button。
然而。。。
首先我们说说:input标签;这个最常见了,不多说:当type="submit"时,提交表单数据!
button标签:经过测试:在<IE8浏览器,button的默认type="button",所以我们要使它能够进行表单数据提交需要设置type="submit";而从IE8开始就默认为type="submit",也算是微软一步一步的前进吧。
你可以自己去测试:
先创建一个php文件demo.php, 用来接收表单数据:
<?php
var_dump($_POST);
?>
再创建一个html文件demo.html, 用来显示表单:
<form method="post" action="demo.php">
<input type="submit" name="foo" value="提交">
<input type="submit" name="bar" value="保存">
</form> <form method="post" action="demo.php">
<button type="submit" name="foo" value="foo_value">提交</button>
<button type="submit" name="bar" value="bar_value">保存</button>
</form>
使用Firefox依次浏览,就能看到input和button的区别:input提交按钮显示的文字就是value,而button提交按钮显示的文字 和value是独立的,从这个意义上来看,button更有表现力,是更值得推荐的提交按钮实现方式。
还有关于它们在不同浏览器下显示的效果,也会影响我们的选择(下面就会介绍用其他标签,更好维持表现层的统一):这个主要是ff和opera下line-height对input['button'],button不起作用。
小结:从理论上来看,button形式的提交按钮优于input形式的提交按钮。但如果考虑浏览器通用性,很多时候还是只能使用input形式的提交按钮。
再来说:a标签(以下为转载:)
之前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各浏览器参差不齐,还不能用line-height控制,在按钮有一些交互效果的时候,a标签更容易实现,hover效果便可,所以许多前端喜欢用a标签来代替input。
function tosubmit(){
var myform=document.getElementByIdx_x("myform");
myform.submit();
}
然后用这个方法提交提交
这样就可以提交表单了,是不是很简单。
表单提交按钮input和button、a的差异的更多相关文章
- React技巧之表单提交获取input值
正文从这开始~ 总览 在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...
- 才趟过的一个坑,css造成的Validform表单提交按钮点击无效
最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...
- Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据
表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...
- amazeUI表单提交验证--input框required
效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- web 表单提交按钮的测试点
web表单中的提交按钮的测试点: 在提交前需要理解清楚的点: 1.表单中哪些字段是必填项 2.表单中字段内容的限制:非空.重复.长度.特殊字符,空格.以及一些和业务相关的约束条件 测试点: 1.是否支 ...
- IE6和IE11之间 表单提交 按钮设置了disabled属性
JSP代码可以不看,就是一个表单,通过submit提交. <form action="mainAction.do?method=saveQuote" method=" ...
- 为什么很多网站的表单提交按钮都是用<a>标签
之 前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各 浏览器参差不齐,还不能用line-height控制 ...
- AngularJs 表单提交按钮状态
表单属性: $invalid:未经过验证的表单,就是表单里面信息通过验证就为false,没有通过为true $valid:经过验证的表单,表单里信息验证通过为true,反之为false $dirty: ...
- 工作总结 表单提交中 Input 设置 disabled readonly
input框里面添加disabled属性之后,该内容就无法向上提交 需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏 也可以正 ...
随机推荐
- 帆软报表FineReport中数据连接之Weblogic配置JNDI连接
1. 制作报表的原理 在帆软报表FineReport设计器中先用JDBC连接到数据库,建立数据库连接,然后用SQL或者其他方法创建数据集,使用数据集制作报表,然后把建立的数据库连接从JDBC连接改成J ...
- 实验楼 linux 学习
实验楼 linux 学习 一.Linux 用户管理 1.查看用户 who am i // who mom likes whoami ====--------====== 输入的第一列表示打 ...
- JSP转译成Servlet详细过程
很多人都会认为JSP的执行性能会和Servlet相差很多,其实执行性能上的差别只在第一次的执行.因为JSP在执行第一次后,会被编译成 Servlet的类文件,即.class,当再重复调用执行时,就直接 ...
- OpenStack 企业私有云的若干需求(5):主流硬件支持、云快速交付 和 SLA 保证
本系列会介绍OpenStack 企业私有云的几个需求: 自动扩展(Auto-scaling)支持 多租户和租户隔离 (multi-tenancy and tenancy isolation) 混合云( ...
- POJ1947 Rebuilding Roads[树形背包]
Rebuilding Roads Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 11495 Accepted: 5276 ...
- concat() 方法用于连接两个或多个数组。
我们创建了三个数组,然后使用 concat() 把它们连接起来: <script type="text/javascript"> var arr = new Array ...
- Apache Shiro系列三,概述 —— 10分钟入门
一.介绍 看完这个10分钟入门之后,你就知道如何在你的应用程序中引入和使用Shiro.以后你再在自己的应用程序中使用Shiro,也应该可以在10分钟内搞定. 二.概述 关于Shiro的废话就不多说了 ...
- linux下vi命令大全
进入vi的命令vi filename :打开或新建文件,并将光标置于第一行首vi +n filename :打开文件,并将光标置于第n行首vi + filename :打开文件,并将光标置于最后一行首 ...
- [转]struts2处理.do后缀的请求
原文地址:http://skyuck.iteye.com/blog/545988 默认情况下,struts2是无法处理以.do为后缀的请求url的(默认情况下是.action或者不填,可以参见org. ...
- 【51Nod 1501】【算法马拉松 19D】石头剪刀布威力加强版
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1501 dp求出环状不连续的前缀和,剩下东西都可以算出来,比较繁琐. 时间 ...