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. css伪元素研究(::before/::after)

    ::before/::after和:before/:after实质上效果一样 不过,在 CSS3 中为了区别伪元素和伪类为伪元素使用了双冒号,因此如果使用了 display 或者 width 等属性时 ...

  2. CloudStack4.4安装 ubuntu14.04

    CloudStack 项目的活跃程度仅次于 OpenStack. 和大多数云计算.集群软件一样,CloudStack 也是控制节点+计算节点这种架构,控制节点(cloudstack-managemen ...

  3. Objective-C 利用OC的消息机制,使用Method Swizzling进行方法修改

    功能:修改父类不可修改函数方法,函数方法交换 应用场景:假如我们使用的他人提供一个的framework,.m已被打包成二进制.a无法修改源码,只留下.h头文件,那假如代码中某个函数出现了问题可以通过这 ...

  4. hihocoder 1347 小h的树上的朋友

    传送门 时间限制:18000ms单点时限:2000ms内存限制:512MB 描述 小h拥有$n$位朋友.每位朋友拥有一个数值$V_i$代表他与小h的亲密度.亲密度有可能发生变化.岁月流逝,小h的朋友们 ...

  5. 【项目】用CIFilter得到图片没办法保存到沙盒里面,显示是CGImage为空

    错误代码: if (iOS9) { CGImageRef cgImage = [[CIContext new] createCGImage:outputImage fromRect:outputIma ...

  6. springmvc 注解 配置文件解释

    概述 继 Spring 2.0 对 Spring MVC 进行重大升级后,Spring 2.5 又为 Spring MVC 引入了注解驱动功能.现在你无须让 Controller 继承任何接口,无需在 ...

  7. 用css进行布局

     用css进行布局 一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建 ...

  8. electron打包

    1.全局安装electron-packager npm install -g electron-packager 2.在项目目录下执行命令 electron-packager ./ --platfor ...

  9. linux命令:mkdir 命令详解

    linux mkdir 命令用来创建指定的名称的目录,要求创建目录的用户在当前目录中具有写权限,并且指定的目录名不能是当前目录中已有的目录. 1.命令格式: mkdir [选项] 目录... 2.命令 ...

  10. phpexcel文本格式

    解决 PHPExcel 长数字串显示为科学计数 在excel中如果在一个默认的格中输入或复制超长数字字符串,它会显示为科学计算法,例如身份证号码,解决方法是把表格设置文本格式或在输入前加一个单引号. ...