HTML 元素表示一个可点击的按钮，可以用在表单或文档其它需要使用简单标准按钮的地方。默认情况下，HTML按钮的显示样式接近于user agent所在的宿主系统平台（用户操作系统）的按钮，但你可以使用CSS来改变按钮的样貌。

浏览器支持

示例

click me

标签定义及使用说明

• 标签定义一个按钮。在元素内部，您可以放置内容，比如文本或图像。这是该元素与使用元素创建的按钮之间的不同之处。
• 请始终为元素规定 type 属性。不同的浏览器对元素的 type 属性使用不同的默认值。
• 如果在 HTML 表单中使用元素，不同的浏览器可能会提交不同的按钮值。请使用在 HTML 表单中创建按钮。

属性

该元素包含全局属性.

• autofocusHTML5新增
  一个布尔属性，用于指定当页面加载时按钮必须有输入焦点，除非用户重写，例如通过不同控件键入。只有一个表单关联元素可以指定该属性。
• autocomplete尚未标准化
  该属性在上的使用并未标准化，只有Firefox允许。不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态（Firefox persists the dynamic disabled state）。将此属性设置为off(i.e.autocomplete="off")关闭此特性。参见bug654072。
• disabled

  此布尔属性表示用户不能与button交互。如果属性值未指定，button继承包含元素，例如；如果没有设置disabled属性的包含元素，button将可交互。

  

  不像其它浏览器，Firefox默认在页面加载时持续禁用Button的动态状态。使用autocomplete属性可控制此特性。

• formHTML5新增
  表示button元素关联的form元素（它的表单拥有者）。此属性值必须为同一文档中的一个元素的id属性。如果此属性未指定，元素必须是form元素的后代。利用此属性，你可以将元素放置在文档内的任何位置，而不仅仅是作为他们form元素的后代。
• formactionHTML5新增
  表示程序处理button提交信息的URI。如果指定了，将重写button表单拥有者的action属性。
• formenctypeHTML5新增
  如果button是submit类型，此属性值指定提交表单到服务器的内容类型。可选值：
  • application/x-www-form-urlencoded:未指定时的默认值。
  • multipart/form-data:如果使用type属性的元素设置文件，使用此值。
  • text/plain

  如果指定此属性，它将重写button的表单拥有者的enctype属性。

• formmethodHTML5新增
  如果button是submit类型，此属性指定浏览器提交表单使用的HTTP方法。可选值:
  • post:来自表单的数据被包含在表单内容中，被发送到服务器。
  • get:来自表单的数据以'?'作为分隔符被附加到form的URI属性中，得到的URI被发送到服务器。当表单没有副作用，且仅包含ASCII字符时使用这种方法。

  如果指定了，此属性会重写button拥有者的method属性。

• formnovalidateHTML5新增
  如果button是submit类型，此布尔属性指定当表单被提交时不需要验证。如果指定了，它会重写button拥有者的novalidate属性。
• formtargetHTML5新增
  如果button是submit类型，此属性指定一个名称或关键字，表示接收提交的表单后在哪里显示响应。这是一个浏览上下文（例如tab，window或内联框架）的名称或关键字。如果指定了，它会重写button拥有者的target属性。关键字如下：
  • _self:在同一个浏览上下文中加载响应作为当前的。未指定时此值为默认值。
  • _blank:在一个新的不知名浏览上下文中加载响应。
  • _parent:在当前浏览上下文父级中加载响应。如果没有父级的，此选项将按_self执行。
  • _top:在顶级浏览上下文（即当前浏览上下文的祖先，且没有父级）中架加载响应。如果没有顶级的，此选项将按_self执行。
• namebutton的名称，与表单数据一起提交。
• typebutton的类型。可选值：
  • submit:此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。
  • reset:此按钮重置所有组件为初始值。
  • button:此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发。
  • menu:此按钮打开一个由指定元素进行定义的弹出菜单。
• valuebutton的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

注意

元素比元素更容易使用样式。你可以在元素内添加HTML内容（像、甚至），以及::after和::before伪元素来实现复杂的效果，而只支持文本内容。

如果你的按钮不是用于向服务器提交数据，请确保这些按钮的type属性设置成button。否则它们被按下后将会向服务器发送数据并加载（可能并不存在的）响应内容，因而可能会破坏当前文档的状态。

IE7 在使用Click me提交表单时存在一个BUG，POST提交的数据将是myButton=Click me而不是myButton=foo（没有把value属性的值foo提交上去）。
IE6 的BUG更糟糕，在提交表单的时候会把表单内所有的按钮都提交上去，同时还有和IE7 一样的BUG。
IE8 已经修复了这个问题。

Firefox 出于使用方便的目的，会在获得焦点的按钮上添加一个细小的虚线框。这个边框由浏览器内部的样式表中的 CSS 定义，但如果有必要的话，你可以用button::-moz-focus-inner{}重写这个样式。

Firefox 在默认情况下会在页面加载时让保持动态禁用状态，这个行为在其它浏览器上是没有的。将autocomplete属性设置为off可以禁用这项特性。参见bug654072。

安卓系统上的Firefox

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com