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

理解button标签的默认行为

button标签的作用和它的名字一样,在绝大多数场合当做按钮来使用. 很多人在使用button按钮的时候出现过这样或者那样的问题,比如:自动提交表单.一次提交表单多次submit行为,有的浏览器下点击button按钮提交表单有的无任何反应.理解它的默认行为会帮助我们从原理上分析问题,解决问题. 一.button按钮的type属性 button按钮的type属性有三种:submit.button.reset. 如果form内的button按钮有type=submit属性则,按钮会有默认的提交行为,…

CSS消除button标签的默认样式

button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px; /*消除默认点击蓝色边框效果*/ outline: none; }…

button标签和input button

一.定义和用法 <button> 标签定义的是一个按钮. 在 button 元素内部,可以放置文本或图像.这是<button>与使用 input 元素创建的按钮的不同之处. 二者相比较, <button> 控件提供了更为强大的功能和更丰富的内容.<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容.例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人…

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

在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; margin:0px; } span{ margin:0px; } 其实大部分CSS reset是没必要的,多写了只会增加浏览器在渲染页面是的负担,当然有同学会说CSS reset还是有其意义的,这个我也承认,但是我们可以通过了解一些标签的CSS属性的默认值来避免过度的reset 标签属性默认值 由…

HTML标签CSS默认值研究

最近写css的时候,发现在div元素里面添加ul元素后发现,ul列表在div里面距离最上方总是有一段空行,当时很奇怪,以为是哪个css出了问题,就把css去掉了,发现问题依旧,然后就查了一下发现html标签在不同浏览器里面是有默认的css样式的,要去掉默认样式,在样式表里添加 *{margin:0;padding:0;}即可,同时找到一个很有用的文档 <<HTML标签CSS属性默认值汇总>>,这个东西,在你需要还原默认值的时候,比较有用. 如果设置了 *{margin:0;padd…

HTML <button>标签

如果<button>标签在<form>中不加type="button",那么默认含义是"submit". <button>标签里面disabled属性使其不可用,常见javascript修改disabled属性实例:(a键b键互相撕逼) <style> #a,#b { height:30px; width:70px; background:yellow; box-sizing:border-box: } </st…

Button标签自动刷新问题

在form表单中,button标签在IE浏览器 type类型默认是button ,而在其他浏览器默认是submit. 解决方法1: 设置类型type="button" <button type="button" class="btn btn-warning">test</button> 解决方法2: 将button标签改为其他标签 (1)改为a标签 (2)改为input标签(类型同样要设置为button) <inpu…

前端 html button标签

就是一个按钮标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <button type="button">点我!</button> </body> </html> <…

使用<button></button>标签

使用<button></button>标签一定要记住给它设置type,因为它默认的type=“submit”,会提交表单,设置如下 <button type="button"  onclick="chooseAdministrative();">选择</button>, 否则在执行 function chooseAdministrative 函数的时候它也会提交表单…

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

可以用button代替input type=”submit”吗? 在ie下,<button>标记恐怕还存在几个不大不小的问题. 在一个表单里,如果有一个以上"submit"类型的<button>标签存在,在表单被提交时,不管你点击哪个<button>,所有<button>的值都会被post/get.<button>的缺省type属性被设置为"button",但是在A级别浏览器下,应该设置为"sub…

由button标签在 IE 8.0 下的异常表现引发的一场血案

写在最前的最后:整篇文章絮絮叨叨说了半天,我得出一个最佳实践:和button标签say goodbay,用 a 标签模拟之. 首先看一个在chrome 下的简单demo 这样的布局在组件开发中再常见不过了!我们先不管 css 圆角属性不兼容 IE 9- 的问题,单论继续添加和点击上传这两个<button>在IE 8 的异常表现. 考虑如下的样式: // 整个信息状态栏 .fui-upload_status-bar { width: 100%; height: 48px; line-height…

HTML <button> 标签

HTML <button> 标签 目标 实现点击button跳转到一个新的界面 参考文档 实例 以下代码标记一个按钮: <button type="button">点我!</button> 尝试一下 » 浏览器支持      所有主流浏览器都支持 <button> 标签. 标签定义及使用说明 <button> 标签定义一个按钮. 在 <button> 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 &l…

html中<button>标签的type

HTML的<button>标签的type主要有三种可选值,reset.submit.button. 其中reset为重置按钮,用于清除form表单的数据:submit为提交按钮,点击后会对form表单做提交操作(除去其他因素):button为单纯按钮类型,一般会对该类型的<button>添加js脚本的点击触发事件. 这里重点要说的是,一般来讲,应该始终为<button>按钮规定 type 属性.但是如果<button>按钮未写明type,不同的浏览器会做不同…

button标签与input type=button标签使用的差异

button标签和input type=button标签都是html文档中用来表示按钮属性的元素,不过他们在布局和实际使用功能中存在一些差异. 下面将项目中遇到的一些总结如下: 1.属性和布局差异. (a)width/height属性的差异 button标签的的width 和height属性是包括border在内的: Input  type=button的border则是在设定的width和height之外在加上border的宽度: 如下图中右上方红色边框为button标签:右下角红色边框为in…

<button> 标签 id 与 function 重复时发生的问题

今天遇到一种情况,在调用js自定义方法的时候,总是提示“import:660 Uncaught TypeError: ... is not a function”. 仔细检查了代码,并没有问题.甚至把方法提全部删除,都不行. 最后发现我的button标签id属性与function名字重复.发现重复之后,我记得使用button标签是,可以直接用id属性表示这个标签元素,都不需要使用$("#...")Jquery 选择器. 这时候,明白了使用button标签,会根据id自动创建变量,由于我…

关于button标签会刷新页面的问题

当button标签在form表单里面时,这时点击button按钮会提交表单刷新页面. <form action=""> <button>点击</button> //会刷新页面(实测ie7及以下不会刷新,其他高版本ie.谷歌.火狐都会刷新) </form> 但在再button里添加 type="button"时不会提交页面. <form action=""> <button type…

<a>标签中的href="javascript:;"就是去掉a标签的默认行为

<a>标签中的href="javascript:;"是什么意思? 例子:<a href="javascript:;">我的大学</a> javascript: 是一个伪协议 javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应. href="javascript:;"就是去掉a…

javascript总结35:DOM之给a注册点击事件, 阻止a标签的默认行为

给a注册点击事件时,有默认行为,阻止默认行为的方式: retrun false <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="">点击在控制台打印哈哈哈</a&…

用Jquery实现修改页面selecte标签的默认选择

在WEB开发中,最基础的也是用的最多的就是数据库的增删改查,修改往往以为的小部分的改动,所以我们往往是在表单中填充以前的内容然后显示给用户进行修改操作. 在填充默认内容的时候对于input标签我们往往使用value="<?php echo $value?>"的方法,例如: <input type='text' name='username' value='<?php echo $username?>' /> 但是对于select标签来说则没有这么简单…

<button>标签也能提交表单问题

如何避免<button>标签也能提交表单的问题: 只需加上一个属性:type='button'即可:如<button type="button"> </button>…

设置Input标签Date默认值为当前时间

需求:想设置Imput标签Date默认值为当前时间,通过JavaScript实现. <html> ...... <body> <input type="date" id="date_info" placeholder="请输入时间"/> ...... <script> $(document).ready(function () { var time = new Date(); var day = (…

jq动态增加的button标签click回调失效的问题，即动态增加的button标签绑定事件$("button.class").click(function)无效

对于新增加的页面元素,改变了页面结构,如果是使用老办法$("button.class").click(function)去监听新的button标签事件,会失效. 笔者的应用是文字的显示和隐藏之间的切换,给出我的代码: 解决办法: $(document).on("click",".showPwd",function () { // alert("show now:" + ); $(this).parent().html( $(t…

Ionic之button标签ng-click无反应解决

在使用Ionic中,使用按钮的ng-click事件,竟然点击没有反应,刚开始以为自己写得方法有问题才会不起作用,自己在点击之后就console.log()一个东西,但是console也是无法反应的.<button></button>单独使用时,是起作用的.看了自己的代码是没有问题的,问题出现在我使用了<lable></lable>来包含<button></button> 代码如下: <label class="item…

html button标签 语法

html button标签 语法 button标签怎么用? 作用:定义一个按钮. 语法:<button type="button">按钮</button> 说明:在 button 元素内部,您可以放置内容,比如文本或图像.这是该元素与使用 input 元素创建的按钮之间的不同之处.<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容.<button>…

HTML中button标签点击实现页面跳转

方法1:使用onclick事件 <input type="button" value="按钮" onclick="javascrtpt:window.location.href='http://www.baidu.com/'" /> 或者直接使用button标签 <button onclick="window.location.href = 'https://www.baidu.com/'">百度<…

取消a标签的默认行动（跳转到href）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <a id="link" href="http://www.baidu.com">百度</a> <s…

阻止a标签的默认事件及延伸

先贴一段代码 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=e…

css的reset和常用的html标签的默认样式整理

先看下常用的这些标签浏览器的默认样式有哪些: body{ margin: 8px;} hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;} blockquote{margin: 16px 1em;} ul{list-style-type: disc;padding-left:40px;margin: 1em 0;} ol{list-style-type: decimal; padding-left:40px; margin:1em…

<button>标签与<input type="button">标签

<script type="text/javascript" src="/jquery-1.11.3.min.js"></script><script type="text/javascript"> function formAction(){ alert("此为form标签测试>>>"+$("#text1").val()); } function bu…

如何理解meta标签

相信大家对meta标签都不陌生,但是打开某些网页源代码看到一堆的meta难免一脸蒙逼.废话少说,请大家更随我一起探索meta标签都有哪些属性以及作用. W3C给meta标签的定义是:<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.<meta> 标签位于文档的头部,不包含任何内容.<meta> 标签的属性定义了与文档相关联的名称/值对. 接下来我们来看一下他的几个属性: 必须属性:content 用来…