zoukankan      html  css  js  c++  java
  • 表单提交按钮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。

       但是涉及到一点,input submit可以用来提交表单的值,而a标签似乎不太好传值,所以好多程序要求前端开发人员再把a标签改成input的,后来经过查找,发现a标签是一样的可以提交表单的,下面附上方法,也希望那些被程序要求把页面改来改去的前端人员告诉程序a标签一样可以提交表单的。
      a标签提交表单的方式其实很简单的,首先你写一个方法
      function tosubmit(){
      var myform=document.getElementByIdx_x("myform");
      myform.submit();
      }
      然后用这个方法提交提交
      这样就可以提交表单了,是不是很简单。
    ----------------------------------------------------------------------------------------------------------
  • 相关阅读:
    Ubuntu16.04安装Docker、nvidia-docker
    Java 对象和类
    Java基础知识总结
    Java 学习路线
    编写radware的负载配置
    MySQL的主从复制+双主模式
    模拟MBR Grub故障修复
    搭建Nginx(haproxy)+keepalived+Tomcat双主高可用负载均衡
    golang数据库操作初体验
    我操蛋的2019
  • 原文地址:https://www.cnblogs.com/ChandlerVer5/p/4658407.html
Copyright © 2011-2022 走看看