• 理解button标签的默认行为


      button标签的作用和它的名字一样,在绝大多数场合当做按钮来使用。

      很多人在使用button按钮的时候出现过这样或者那样的问题,比如:自动提交表单、一次提交表单多次submit行为,有的浏览器下点击button按钮提交表单有的无任何反应。理解它的默认行为会帮助我们从原理上分析问题,解决问题。

         一、button按钮的type属性   

           button按钮的type属性有三种:submit、button、reset.

           如果form内的button按钮有type=submit属性则,按钮会有默认的提交行为,reset属性会让按钮具备重置表单的行为,button属性会让按钮do nothing。如果编写页面时不忘写上button的type属性,那么一切异常行为都不会出现。

          二、如果忘记type属性          

      很多人在编码时经常忘记或者不写type属性。问题往往就出现在这里。

      试试下面的代码会发生什么? 

    <form id="mobile_reg_form" onsubmit="alert(1);return false;" style="border:1px solid ;">
      <fieldset>
        <label>手机号:</label><input type="text" class="" placeholder="输入手机号" name="account">
        <button class="chkbtn">获取验证码</button>
      </fieldset> 

    </form>

      
                 
     

        点击"获取验证码"按钮:

        IE6、7:无明显行为;

        其他浏览器 :alert(1)

      

      在没有定义type属性的情况下,button按钮的行为:

       

      IE浏览器IE8及以后的版本,会根据页面使用的文档模式(Defining document compatibility)来定义按钮的兼容性问题。IE8标准模式的默认行为是submit,其他模式的默认行为是button。

      请参考:http://msdn.microsoft.com/en-us/library/ms534696%28v=vs.85%29.aspx

     

  • 相关阅读:
    Dubbo使用
    JVM内存分配及GC简述
    深入理解ThreadLocal
    Java的Timer定时器
    https与http的区别
    SpringBoot微服务
    Java的BIO,NIO,AIO
    Java常量池
    Java中的值传递与引用传递
    面向对象三大特征及代码优化七大原则
  • 原文地址:https://www.cnblogs.com/wisdomoon/p/button.html
Copyright © 2020-2023  润新知