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

 

理解button标签的默认行为的更多相关文章

  1. CSS消除button标签的默认样式

    button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...

  2. button标签和input button

    一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...

  3. 常见标签的默认属性值及相互作用——关于CSS reset的思考

    在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

  4. HTML标签CSS默认值研究

    最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...

  5. HTML <button>标签

    如果<button>标签在<form>中不加type="button",那么默认含义是"submit". <button>标 ...

  6. Button标签自动刷新问题

    在form表单中,button标签在IE浏览器 type类型默认是button ,而在其他浏览器默认是submit. 解决方法1: 设置类型type="button" <bu ...

  7. 前端 html button标签

    就是一个按钮标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  8. 使用<button></button>标签

    使用<button></button>标签一定要记住给它设置type,因为它默认的type=“submit”,会提交表单,设置如下 <button type=" ...

  9. 一个表单里,如果有<button>标签存在,它会自动提交表单

    可以用button代替input type=”submit”吗? 在ie下,<button>标记恐怕还存在几个不大不小的问题. 在一个表单里,如果有一个以上"submit&quo ...

随机推荐

  1. 【poj1987】 Distance Statistics

    http://poj.org/problem?id=1987 (题目链接) 题意 给出一棵树,求树上距离不超过K的点对个数. Solution 点分治,同poj1741. 代码 // poj1987 ...

  2. POJ1061 青蛙的约会

    Description 两 只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它 们出发之前忘记了一件很重要 ...

  3. Jenkins邮件配置,实现邮件发送策略(可实现每个Job对应不同的发送邮箱)

    前言: 首先,要有一个用来发送的邮箱,首选网易!参考:http://www.cnblogs.com/EasonJim/p/6051636.html,这里我注册了网易的免费企业邮箱. 并且我新建没多个邮 ...

  4. AutoIt3(AU3)开发的分辨率快速设置工具

    项目相关地址 源码:https://github.com/easonjim/Resolution_Settings bug提交:https://github.com/easonjim/Resoluti ...

  5. <base href="<%=basePath%>

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  6. POJ 1330 Nearest Common Ancestors(Targin求LCA)

    传送门 Nearest Common Ancestors Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 26612   Ac ...

  7. pycharm 启动后一直更新index的问题

    这个谷歌一下就知道了,stackoveflow上就有几个解决方案,试试哪个好使就可以了. 详情见http://stackoverflow.com/questions/29030682/pycharm- ...

  8. HTML之:让网页中的<a>标签属性统一设置-如‘新窗口打开’

    在开发过程中,我们往往想在页面中,给<a>设置一个统一的默认格式,例如我们想让链接:“在新窗口打开”,我们就可以使用<base>标签 在网页中添加这段代码: <head& ...

  9. hdu 2042 - 不容易系列之二

    题意:(略)太长了 解法:找规律,发现A[i]=A[i-1]*2-2; 1: #include<stdlib.h> 2: #include<string.h> 3: #incl ...

  10. jquery 图片浏览功能实现

    效果展示: HTML代码: <div id="no3"> <img src="./img/last.png" id="last&qu ...