表单提交按钮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 隐藏 也可以正 ...
随机推荐
- shell parameter expansitions
type testtype -a test math calculate:echo $((1+2*3)) parameter expansition:bash-4 introduced feature ...
- Nodejs以后台服务启动
1: 从网上查找 LINUX中我们可以使用这种简单的方式让node.js在后台运行: nohup node your_app.js & 经多次实验一直没有成功 2:使用 forever ...
- python 数据处理学习pandas之DataFrame
请原谅没有一次写完,本文是自己学习过程中的记录,完善pandas的学习知识,对于现有网上资料的缺少和利用python进行数据分析这本书部分知识的过时,只好以记录的形势来写这篇文章.最如果后续工作定下来 ...
- 团队项目——编写项目的Spec
团队项目--编写项目的Spec 一.Spec的目标 spec主要用来说明软件的外部功能,和用户的交互情况,主要用来说明软件内部的设计.图片编辑器是与生活息息相关的一个必备软件,随的流行, ...
- UVA - 1625 Color Length[序列DP 代价计算技巧]
UVA - 1625 Color Length 白书 很明显f[i][j]表示第一个取到i第二个取到j的代价 问题在于代价的计算,并不知道每种颜色的开始和结束 和模拟赛那道环形DP很想,计算这 ...
- UVA - 11584 Partitioning by Palindromes[序列DP]
UVA - 11584 Partitioning by Palindromes We say a sequence of char- acters is a palindrome if it is t ...
- Linux提权(1)-基础版~
利用Linux内核漏洞提权 VulnOS version 2是VulHub上的一个Linux提权练习,当打开虚拟机后,可以看到 获取到低权限SHELL后我们通常做下面几件事 1.检测操作系统的发行版本 ...
- 最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi
最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi 使用Jexus5.8.1独立版 http://www.linuxdot.net/ ps:该“独立版”支持64位的CentOS ...
- 屏蔽防止被别的网站嵌入框架代码(防止被人frame)
<SCRIPT LANGUAGE=javascript> if (top.location != self.location)top.location=self.location; < ...
- SQL Left Join, Right Join, Inner Join, and Natural Join 各种Join小结
在SQL语言中,存在着各种Join,有Left Join, Right Join, Inner Join, and Natural Join等,对于初学者来说肯定一头雾水,都是神马跟神马啊,它们之间到 ...