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 标签的文章就介绍到这了,更多相关HTML5 Button 标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
html5 button autofocus 属性介绍及应用
在html 5中,可以设置当页面加载时,自动焦点到达某个控件中,这个就是autofocus属性了,接下来详细介绍,有需求的朋友可以了解下2013-01-04
最新评论