现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是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。

   但是涉及到一点,input submit可以用来提交表单的值,而a标签似乎不太好传值,所以好多程序要求前端开发人员再把a标签改成input的,后来经过查找,发现a标签是一样的可以提交表单的,下面附上方法,也希望那些被程序要求把页面改来改去的前端人员告诉程序a标签一样可以提交表单的。
  a标签提交表单的方式其实很简单的,首先你写一个方法
  function tosubmit(){
  var myform=document.getElementByIdx_x("myform");
  myform.submit();
  }
  然后用这个方法提交提交
  这样就可以提交表单了,是不是很简单。
----------------------------------------------------------------------------------------------------------

表单提交按钮input和button、a的差异的更多相关文章

  1. React技巧之表单提交获取input值

    正文从这开始~ 总览 在React中,通过表单提交获得input的值: 在state变量中存储输入控件的值. 在form表单上设置onSubmit属性. 在handleSubmit函数中访问输入控件的 ...

  2. 才趟过的一个坑,css造成的Validform表单提交按钮点击无效

    最近入手的一个项目,在开发的过程中,遇到了一个以前没遇到过的问题,废了半天的功夫才弄懂原因,留下足迹,警醒后人,下面开始讲故事啦! 在一个昏天暗地的上午,我一个人照常坐在办公室安静的工作中!项目编码已 ...

  3. Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据

    表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交.要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾.jQuery很简单的就可以实现对表单提交按钮控制,下面就是相关的例子和代码 ...

  4. amazeUI表单提交验证--input框required

    效果: html: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. web 表单提交按钮的测试点

    web表单中的提交按钮的测试点: 在提交前需要理解清楚的点: 1.表单中哪些字段是必填项 2.表单中字段内容的限制:非空.重复.长度.特殊字符,空格.以及一些和业务相关的约束条件 测试点: 1.是否支 ...

  6. IE6和IE11之间 表单提交 按钮设置了disabled属性

    JSP代码可以不看,就是一个表单,通过submit提交. <form action="mainAction.do?method=saveQuote" method=" ...

  7. 为什么很多网站的表单提交按钮都是用<a>标签

    之 前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各 浏览器参差不齐,还不能用line-height控制 ...

  8. AngularJs 表单提交按钮状态

    表单属性: $invalid:未经过验证的表单,就是表单里面信息通过验证就为false,没有通过为true $valid:经过验证的表单,表单里信息验证通过为true,反之为false $dirty: ...

  9. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...

随机推荐

  1. 15、sql语句集,Linux 下PHP查询mysql

    一.mysql 创建数据库 mysql密码,默认没有 如果想更改的话, mysqladmin  -uroot   password  root123 登录   : [root@localhost ro ...

  2. EF级联删除

    引言     在主表中指定Key,子表中指定Required后,并不会在数据库中生成级联删除的外键.那怎么才能使EF在数据中生成级联删除的外键? SQLServer数据库中级联删除功能配置界面: 上图 ...

  3. mysql查询优化建议(百度)

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.   2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使 ...

  4. 三维网格补洞算法(Radial Basis Function)

    在逆向工程中,由于设备或模型的原因,我们获取得到的三维模型数据往往并不完整,从而使得生成的网格模型存在孔洞,这对后续的模型分析会造成影响.下面介绍一种基于径向基函数(RBF:Radial Basis ...

  5. [No00007F]2016-面经[下] 英文简历写作技巧

    一.简历种类 1.中式 中式简历中,常包括政治面貌,性格及身高体重等.如果中英文简历一起递交,建议中文不写政治面貌,因为如果去外企工作,背景中的政治色彩越少越好,起码没有必要让老外知道. 性格是一个主 ...

  6. 14-前端开发之CSS

    什么是 CSS ? CSS 指层叠样式表 (Cascading Style Sheets),用于对页面进行美化. 存在的方式有3种: 元素内联:在标签中使用 style='xx:xxx;' 页面嵌入: ...

  7. JS处理四舍五入函数 toFixed(n)(可取小数点后n位)

    在JS中四舍五入的函数 toFixed(n) , n为要保留的小数位数. n为0~20,当n超过20的时候,JS会出错. 如果小数点前和要截取的前一位都是0时,不会按常理截取.       var h ...

  8. 新项目,WebTest

    最近为了给Jumony for ASP.NET进行单元测试有点伤神,ASP.NET因为环境特殊,一直是单元测试的禁地,传统的单元测试工具由于运行在非ASP.NET环境,可谓是举步维艰.当然,微软在搞A ...

  9. Xcode调试技巧(断点和重构)

    首先是最简单的普通断点有时候不知道是那个方法调用的崩溃的这个方法,传了个奇怪的值,打个断点就就可以在左侧工具栏里看到最近几个方法执行的循序,和那个方法调用的本方法,一般小问题在这里就可以解决啦~ 条件 ...

  10. 面向对象和面向过程的js版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...