了解按钮标签的默认行为

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' placeholder='输入手机号' name='account'>
    <button>获取验证码</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