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

    //Fragment public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); Sys ...

  2. Linux下定时执行脚本(转自Decode360)

    文章来自:http://www.blogjava.net/decode360/archive/2009/09/18/287743.html Decode360's Blog  老师(业精于勤而荒于嬉 ...

  3. hdfs 通过NFSV3 加载至本地目录

    常常会有这种需求,把HDFS的目录MOUNT到本地目录,然后方便使用LINUX下面的命令直接操作. FUSE也可以达到同样的效果,但是配置比较复杂,新的HADOOP版本都建议使用NFS3来完成这个需求 ...

  4. Java报表工具FineReport导出EXCEL的四种API

    在实际的应用中会经常需要将数据导出成excel,导出的方式除原样导出还有分页导出.分页分sheet导出和大数据量导出.对于excel 2003版,由于限制了每个sheet的最大行数和列数,大数据量导出 ...

  5. Windows7台式电脑怎么调节屏幕亮度

     

  6. Save()saveOrUpdate()Hibernate的merge()方法

    Save save()方法能够保存实体到数据库,正如方法名称save这个单词所表明的意思.我们能够在事务之外调用这个方法,这也是我不喜欢使用这个方法保存数据的原因.假如两个实体之间有关系(例如empl ...

  7. NSURLCache

    属性介绍: //获取当前应用的缓存管理对象 + (NSURLCache *)sharedURLCache; //设置自定义的NSURLCache作为应用缓存管理对象 + (void)setShared ...

  8. JavaScript 输出

    javascript 没有任何打印或者输出的函数. 一.javascript 显示数据 javacript可以通过不同的方式来输出数据: 1.使用window.alert()弹出警告框 2.使用doc ...

  9. Linux Linux程序练习十九

    题目:编写一个同步服务器模型 要求: )客户端A主机给服务器B主机发送报文, )B服务器主机收到报文以后同时分发给C1主机.C2主机: )C1主机和C2主机打印出客户端A的报文 bug总结:本来这道题 ...

  10. PhpStorm XDebug 远程调试

    现在我们自己公司的各种开发和测试服务器,都是使用阿里云的服务器.一些PHP的项目,无法在本地搭建完整的环境,在外网服务器上调试更方便定位问题.发现网上没有完整的关于如何配置PHPStorm和XDebu ...