HTML5中的Button 标签示例详解

　　概述

　　button 用于显示一个可点击的按钮，可用在表单或文档的其它地方。

　　元素是内联双标签，不同浏览器下样式不同，可以通过修改。

　　标签属性

　　autofocus

　　指定页面加载时聚焦此按钮，多个按钮指定，仅仅只会聚焦首个按钮。

　　disabled

　　禁用，用户不能与交互。

　　form

　　新增属性，用于指定关联的元素的。一般按钮需要位于元素内部才能关联，而指定属性则可以在文档任意位置关联。

　　formaction

　　覆盖关联的表单的属性。

　　如下表单的提交地址将被覆盖为。

　　不同按钮设置不同属性，可将同一表单的数据提交到不同的地址。

　　formenctype

　　若表单属性为，且是类型时，用于指定表单的数据编码方式。

　　注意上的也会覆盖表单的属性。

　　实际上影响的是请求头的。

　　enctype 属性值包括三种类型。

　　如下为含有两个输入框的表单，通过在上设置不同属性值来区分差异，其中控件固定输入，控件固定输入。

　　是默认的编码方式，适用于各种类型的表单。其中特殊字符（空格）已经被替换为，数据项的名称和值以分开，数据项之间以分开。

　　在表单含有控件时指定，此类型更加适合传输二进制数据。

　　中每个数据项独占一行，不会编码特殊字符。注意各种浏览器的实现方式各不相同，一般不建议使用。

　　formmethod

　　覆盖关联的表单的属性，可选值包括、。

　　如下表单的请求方式将为 。

　　formnovalidate

　　指定关联的表单，在表单提交时不用验证数据。

　　如下指定表单项只能输入邮箱格式。

　　点击按钮提交表单数据时，将验证数据是否为邮箱格式。

　　添加属性将关闭表单的验证。

　　formtarget

　　若关联的其属性为值为，表示提交的表单在何处响应。

　　属性值如下，其中具体差异 参考。

　　name

　　指定按钮的属性，被单击时自身与属性值将被提交。

　　输入框录入值，单击按钮。

　　其中的与属性值均被提交。

　　value

　　指定按钮的初始值，将作为属性的键值提交。

　　type

　　指定的类型，其中可选值如下。

　　兼容性

　　button.value

　　如下获取上的属性。

　　以下浏览器，其获取的值等价于的。

　　及以上浏览器、、、等，其获取的值为的 属性值。

　　兼容方式也很简单，即在获取 元素的 属性值时统一使用 。

　　btn.getAttribute('value')

　　form post 请求参数

　　关联表单的属性值为的按钮，在点击提交表单数据时也会存在兼容性问题。

　　由于浏览器的控制台开启后，点击提交表单，无论将的属性设置为还是，控制台均会被关闭，因此请求参数也无法查看。

　　客户端无法查看参数，换个思路从服务端中去打印请求参数。

　　及以上浏览器、、等。

　　以下浏览器，可以看出在提交表单时，会将表单内所有按钮都提交上去，并且提交的值并不是按钮的值，而是等价于按钮的值。

　　到此这篇关于HTML5 中的Button 标签的文章就介绍到这了,更多相关HTML5 Button 标签内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！