HTML5 之 Button 标签
概述
button 用于显示一个可点击的按钮,可用在表单或文档的其它地方。
button
元素是内联双标签,不同浏览器下button
样式不同,可以通过CSS
修改。
<button>按钮</button>
标签属性
autofocus
指定页面加载时聚焦此按钮,多个按钮指定autofocus
,仅仅只会聚焦首个按钮。
<button autofocus>按钮</button>
disabled
禁用,用户不能与button
交互。
<button disabled>按钮</button>
form
HTML5
新增属性,用于指定关联的form
元素的id
。一般button
按钮需要位于form
元素内部才能关联form
,而指定form
属性则可以在文档任意位置关联form
。
<form id="form" action="" method="post"><input type="text">
</form>
<button type="reset" form='form'>按钮</button>
formaction
覆盖button
关联的form
表单的action
属性。
如下表单的提交地址将被覆盖为http://www.jd.com
。
<form method="get" action="http://www.baidu.com"><input type="text"><button type="submit" formaction="http://www.jd.com">按钮</button>
</form>
不同按钮设置不同formaction
属性,可将同一表单的数据提交到不同的URL
地址。
<form method="get" id="form"><input type="text">
</form>
<button type="submit" formaction="http://www.baidu.com" form="form">百度</button>
<button type="submit" formaction="http://www.qq.com" form="form">qq</button>
formenctype
若表单method
属性为post
,且button
是submit
类型时,用于指定表单的数据编码方式。
注意button
上的formenctype
也会覆盖form
表单的enctype
属性。
<form method="post" action="http://www.baidu.com"><input type="text"><button type="submit" formenctype="multipart/form-data">按钮</button>
</form>
实际上enctype
影响的是请求头的Content-Type
。
enctype 属性值包括三种类型。
application/x-www-form-urlencoded
:默认编码方式multipart/form-data
:表单含有文件上传控件需指定text/plain
:用于调试
如下为含有两个输入框的表单,通过在button
上设置不同formenctype
属性值来区分差异,其中name
控件固定输入hello
,desc
控件固定输入button formenctype
。
<form method="post" action="http://www.baidu.com"><input type="text" name="value"><input type="text" name="desc"><button type="submit" formenctype="">按钮</button>
</form>
application/x-www-form-urlencoded
是默认的编码方式,适用于各种类型的表单。其中特殊字符(空格)已经被替换为+
,数据项的名称和值以=
分开,数据项之间以&
分开。
multipart/form-data
在表单含有type="file"
控件时指定,此类型更加适合传输二进制数据。
text/plain
中每个数据项独占一行,不会编码特殊字符。注意各种浏览器的实现方式各不相同,一般不建议使用。
formmethod
覆盖button
关联的form
表单的method
属性,可选值包括get
、post
。
如下表单的请求方式将为get
。
<form method="post" action="http://www.baidu.com"><input type="text"><button type="submit" formmethod="get">按钮</button>
</form>
formnovalidate
指定button
关联的form
表单,在表单提交时不用验证数据。
如下指定表单项只能输入email
邮箱格式。
<form method="post" action="http://www.baidu.com"><input type="email" name="email"><button type="submit">按钮</button>
</form>
点击按钮提交表单数据时,将验证数据是否为邮箱格式。
添加formnovalidate
属性将关闭表单的验证。
<button type="submit" formnovalidate>按钮</button>
formtarget
若关联form
的button
其type
属性为值为submit
,formtarget
表示提交的表单在何处响应。
formtarget
属性值如下,其中具体差异 参考。
_self
:在当前页面响应_blank
:在新窗口响应_parent
:在当前页面的父框架页面中响应_top
:在当前页面的顶层框架页面中响应
<form method="post" action="http://www.baidu.com"><input type="text"><button type="submit" formtarget="_blank">按钮</button>
</form>
name
指定按钮的name
属性,被单击时自身name
与value
属性值将被提交。
<form method="post" action="http://www.baidu.com"><input type="text" name="value"><button type="submit" name="button" value="value">按钮</button>
</form>
输入框录入值,单击按钮。
其中button
的name
与value
属性值均被提交。
value
指定按钮的初始值,将作为name
属性的键值提交。
type
指定button
的类型,其中可选值如下。
submit
:此按钮将表单数据提交至服务器。注意指定type
为空或者错误值时也是submit
类型reset
:重置表单控件为初始值button
:指定为普通按钮menu
:打开一个由menu
元素定义的菜单,此属性尚未在任何浏览器实现
<button type="menu" menu="menu">Dropdown</button>
<menu id="menu"><menuitem>hello</menuitem><menuitem>world</menuitem>
</menu>
兼容性
button.value
如下获取butoon
上的value
属性。
<button id="btn" value="hello button">按钮</button>
<script>var btn = document.getElementById('btn')console.log(btn.value)
</script>
IE8
以下浏览器,其获取的值等价于button
的innerText
。
IE8
及以上浏览器、Chrome
、Firefox
、Opera
等,其获取的值为button
的 value
属性值。
兼容方式也很简单,即在获取 button
元素的 value
属性值时统一使用 getAttribute
。
btn.getAttribute('value')
form post 请求参数
关联form
表单的type
属性值为submit
的按钮,在点击提交表单数据时也会存在兼容性问题。
由于IE
浏览器的控制台F12
开启后,点击button
提交表单,无论将form
的target
属性设置为_self
还是_blank
,控制台均会被关闭,因此post
请求参数也无法查看。
客户端无法查看参数,换个思路从服务端中去打印请求参数。
<form action="http://127.0.0.1:3000" method="post"><input type="text" name="input"><button name="reset" value="button">重置</button><button type="submit" name="name" value="button">按钮</button>
</form>
IE8
及以上浏览器、Chrome
、Firefox
等。
IE8
以下浏览器,可以看出在提交表单时,会将表单内所有按钮都提交上去,并且提交的值并不是按钮的value
值,而是等价于按钮innerText
的值。
HTML5 之 Button 标签相关推荐
- HTML中的button标签的使用,和介绍
<!-- 关于button按钮的介绍 知道:button是定义一个按钮,但是在表单中也有一个可以定义按钮, 我们知道当<input type="button"> ...
- html中按钮方法,html中button标签的使用详解
关于button按钮的介绍 知道:button是定义一个按钮,但是在表单中也有一个可以定义按钮,我们知道当的时候也是在网页上创建了一个按钮,现在要说的是个button这个标签和input里面的标签有怎 ...
- php中文歌词,详细介绍HTML5使用Audio标签实现歌词同步的效果
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
- php 编辑器 插入视频,苗景云的博客-PHPCMS V9编辑器中新增上传mp4视频(上传视频并插入HTML5的video标签)的功能...
由于PHPCMS v9默认的编辑器中上传的视频插入的是embed标签使用的是flash播放器,手机端无法播放,所以来改造下,让其上传视频并插入HTML5的video标签,这样电脑端的主流浏览器和手机端 ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- html圆圈按钮怎么写,HTML button 标签
HTML 标签 目标 实现点击button跳转到一个新的界面 参考文档 实例 以下代码标记一个按钮: 点我! 浏览器支持 所有主流浏览器都支持 标签. 标签定义及使用说明 标签定义一个按钮. 在 元 ...
- HTML5常用基础标签
HTML5中的标签众多,有时新手刚入门前端很容易步入误区,即想要一把抓掌握所有的知识,其实全部掌握效果不尽人意,相反会让我们学习受挫,效率低下,因此"片面"的学习有助于我们提高学习 ...
- HTML5新增的标签属性以及它们的用法
HTML5新增了一些标签,但它们并不像我们想象的那样陌生,它们只是更加符合我们的思维方式,更人性化.按照以往的布局方式,我们要划分页面结构时都是使用的div,例如<div class=" ...
- 使用HTML5的Canvas标签实现绘图板内拖拽元素
第一次在csdn发表文章,纯属试水之作.希望各位多多指教. 直奔主题吧.本人使用了一下HTML5的Canvas标签之后,挺好用的各种画线条,图案等.能实现对Canvas标签内的像素进行随意编辑.加上各 ...
最新文章
- java是否支持freertos_使用GCC配置FreeRTOS(ARM)
- Hbase 技术细节笔记(上)
- Win7下面安装SQL Server2005
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 17丨文章浏览 II【难度中等】​
- mysql中怎么在列中使用时间函数_mysql中关于时间的函数使用教程
- cvpr2020 人脸检测与识别_投石科技温度检测人脸识别设备装置
- [Perl] Python 与 Perl 合并,打造史上最牛语言 Parrot
- linux给指定用户分配文件夹权限
- 计算机信息学中比较大小的代码,信息学奥赛计算机基础知识.doc
- PHP读取Excel数据
- java 生成水印_Java生成文字水印
- C++/MFC 面试题(六、逻辑题)
- 【hadoop生态之Hive】Hive的DML数据操纵语言【笔记+代码】
- 分享一个android手机开不了机的问题
- 【竞赛项目,测试点】
- expected an indented block报错的原因
- 计算机磁盘序列号是唯一的吗,磁盘id和硬盘序列号一样吗
- Error: Assignments can only be reset if the group ‘group‘ is inactive, but the current state is Stab
- 逐帧绘制毕达哥拉斯树
- 《人月神话》(The Mythical Man-Month)3 外科手术队伍(The Surgical Team)
热门文章
<!-- 关于button按钮的介绍 知道:button是定义一个按钮,但是在表单中也有一个可以定义按钮, 我们知道当<input type="button"> ...
关于button按钮的介绍 知道:button是定义一个按钮,但是在表单中也有一个可以定义按钮,我们知道当的时候也是在网页上创建了一个按钮,现在要说的是个button这个标签和input里面的标签有怎 ...
HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签.通过本文给大家介绍HTML5使 ...
由于PHPCMS v9默认的编辑器中上传的视频插入的是embed标签使用的是flash播放器,手机端无法播放,所以来改造下,让其上传视频并插入HTML5的video标签,这样电脑端的主流浏览器和手机端 ...
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
HTML 标签 目标 实现点击button跳转到一个新的界面 参考文档 实例 以下代码标记一个按钮: 点我! 浏览器支持 所有主流浏览器都支持 标签. 标签定义及使用说明 标签定义一个按钮. 在 元 ...
HTML5中的标签众多,有时新手刚入门前端很容易步入误区,即想要一把抓掌握所有的知识,其实全部掌握效果不尽人意,相反会让我们学习受挫,效率低下,因此"片面"的学习有助于我们提高学习 ...
HTML5新增了一些标签,但它们并不像我们想象的那样陌生,它们只是更加符合我们的思维方式,更人性化.按照以往的布局方式,我们要划分页面结构时都是使用的div,例如<div class=" ...
第一次在csdn发表文章,纯属试水之作.希望各位多多指教. 直奔主题吧.本人使用了一下HTML5的Canvas标签之后,挺好用的各种画线条,图案等.能实现对Canvas标签内的像素进行随意编辑.加上各 ...