理解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按钮的行为:
请参考:http://msdn.microsoft.com/en-us/library/ms534696%28v=vs.85%29.aspx
理解button标签的默认行为的更多相关文章
- CSS消除button标签的默认样式
button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...
- button标签和input button
一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二 ...
- 常见标签的默认属性值及相互作用——关于CSS reset的思考
在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...
- HTML标签CSS默认值研究
最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现htm ...
- HTML <button>标签
如果<button>标签在<form>中不加type="button",那么默认含义是"submit". <button>标 ...
- Button标签自动刷新问题
在form表单中,button标签在IE浏览器 type类型默认是button ,而在其他浏览器默认是submit. 解决方法1: 设置类型type="button" <bu ...
- 前端 html button标签
就是一个按钮标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 使用<button></button>标签
使用<button></button>标签一定要记住给它设置type,因为它默认的type=“submit”,会提交表单,设置如下 <button type=" ...
- 一个表单里,如果有<button>标签存在,它会自动提交表单
可以用button代替input type=”submit”吗? 在ie下,<button>标记恐怕还存在几个不大不小的问题. 在一个表单里,如果有一个以上"submit&quo ...
随机推荐
- Bzoj4300 绝世好题
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 1325 Solved: 722 Description 给定一个长度为n的数列ai,求ai的子序列bi ...
- Discuz! X upgrade/converter GETSHELL Vulnerability Via /convert/include/global.func.php Inject Special Symbol Into /convert/data/config.inc.php
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对于PHP应用来说,处于用户的输入并正确划定"数据-代码"边界 ...
- Java命名约定
类名 类名应该是名词, 描述对象.应该按照驼峰式写法,即只有每个单词首字母大写. 接口名称 接口名称应该是形容词,描述功能.应该以“able”.“ible”结尾,否则应该是名词.通常遵循和类名写相同的 ...
- EF-CodeFirst 继承关系TPH、TPT、TPC
继承关系 面向对象的三大特征之一:继承 ,在开发中起到了重要的作用.我们的实体本身也是类,继承自然是没有问题.下面开始分析 EF里的继承映射关系TPH.TPT.TPC 现在我们有这样一个需求,用户里要 ...
- 解决 Ubuntu 无法调节屏幕亮度的问题(转)
转http://blog.163.com/tym190@126/blog/static/8776005920143192412477/ 终端输入代码: 在打开文件中找到 GRUB_CMDLIN ...
- BZOJ2599 [IOI2011]Race
传送门 点分治,黄学长的选根方法会T掉,换了这个人的选根方法就可以了. 当然,你也可以选择黄学长的奇淫优化 //BZOJ 2599 //by Cydiater //2016.9.23 #include ...
- base64 json
javascript将base64编码的图片数据转换为file并提交 直接提交base64编码图片数据,过大的话后台会出现转发错误问题. 一个不错的解决方式就是将base64编码的图片数据转换为Blo ...
- centos 网络配置
centos 网络配置网络配置 -bash-4.1# setup #如果没有setup命令,可以yum install setuptool -y 也可以安装setup 命令 http://ji ...
- Excel_replace
有时候我们需要对单元格中的数据需要一些精确的处理,比如将部分以70开的工号升为706,这时简单的查找替换就不能满足我的需求,因为这样会替换掉工号中末尾或者中间位的70,造成工号的错误. 如何实现这种精 ...
- Spring MVC学习笔记——用户增删该查和服务器端验证
建立一个动态web项目,起名为SpringMVC_crud 导包,其中包括jstl的一些包等 1.先写一个User.java,是用户类 文件User.java文件 package org.common ...