• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
    •
    位置： html5 中文手册 -> html5 标签 -> html5 表单

    <button>

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

    浏览器支持

    所有主流浏览器都支持<button>标签。

    示例

    <button name="button">click me</button>

    标签定义及使用说明

    • <button>标签定义一个按钮。在<button>元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。
    • 请始终为<button>元素规定 type 属性。不同的浏览器对<button>元素的 type 属性使用不同的默认值。
    • 如果在 HTML 表单中使用<button>元素，不同的浏览器可能会提交不同的按钮值。请使用<input>在 HTML 表单中创建按钮。
    内容分类流式内容元素，段落内容元素，交互内容元素,listed,labelable,andsubmittableform-associatedelement,段落内容元素.
    允许的内容段落内容元素.
    标签略写不允许，开始标签和结束标签都不能省略。
    允许的父元素任意可容纳段落内容元素的元素。
    Permitted ARIA rolescheckbox,link,menuitem,menuitemcheckbox,menuitemradio,radio,switch,tab
    DOM 接口HTMLButtonElement

    属性

    该元素包含全局属性.

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

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

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

    • formHTML5新增
      表示button元素关联的form元素（它的表单拥有者）。此属性值必须为同一文档中的一个<form>元素的id属性。如果此属性未指定，<button>元素必须是form元素的后代。利用此属性，你可以将<button>元素放置在文档内的任何位置，而不仅仅是作为他们form元素的后代。
    • formactionHTML5新增
      表示程序处理button提交信息的URI。如果指定了，将重写button表单拥有者的action属性。
    • formenctypeHTML5新增
      如果button是submit类型，此属性值指定提交表单到服务器的内容类型。可选值：
      • application/x-www-form-urlencoded:未指定时的默认值。
      • multipart/form-data:如果使用type属性的<input>元素设置文件，使用此值。
      • 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:此按钮打开一个由指定<menu>元素进行定义的弹出菜单。
    • valuebutton的初始值。它定义的值与表单数据的提交按钮相关联。当表单中的数据被提交时，这个值便以参数的形式被递送至服务器。

    注意

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

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

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

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

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

    安卓系统上的Firefox <35会为每个按钮设置一个默认的background-image渐变背景（参见bug763671）。这项可以通过background-image: none禁用。

    点击和焦点

    点击<button>会让浏览器和操作系统（默认情况下）将焦点放在其上。<input>的type="button"和type="submit"也是一样的。

    属性

    属性值描述
    autofocus HTML5新增autofocus规定当页面加载时按钮应当自动地获得焦点。
    disableddisabled规定应该禁用该按钮。
    form HTML5新增form_id规定按钮属于一个或多个表单。
    formaction HTML5新增URL规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type="submit"配合使用。
    formenctype HTML5新增application/x-www-form-urlencoded
    multipart/form-data
    text/plain    		规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type="submit"配合使用。
    formmethod HTML5新增get
    post    		规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type="submit"配合使用。
    formnovalidate HTML5新增formnovalidate如果使用该属性，则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type="submit"配合使用。
    formtarget HTML5新增_blank
    _self
    _parent
    _top
    framename    		规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type="submit"配合使用。
    namename规定按钮的名称。
    typebutton
    reset
    submit    		规定按钮的类型。
    valuetext规定按钮的初始值。可由脚本进行修改。

    HTML 4.01 与 HTML 5 之间的差异

    HTML5 中的新属性：autofocus、form、formaction、formenctype、formmethod、formnovalidate 以及 formtarget。

    全局属性

    <button>标签支持HTML 的全局属性。

    事件属性

    <button>标签支持HTML 的事件属性。

    例子

    <button>click me!</button>

    实例

    以下代码标记一个按钮：

    <button type="button">click me!</button>

    下篇：<datalist>