---
title: HTMLButtonElement
slug: Web/API/HTMLButtonElement
tags:
  - API
  - HTML DOM
translation_of: Web/API/HTMLButtonElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLButtonElement</code></strong> 接口提供操作button元素 （除了 {{HTMLElement("button")}} 对象，这个接口对继承了该对象的元素也有效）的属性和方法。</p>

<h2 id="属性">属性</h2>

<p><em>从父对象{{domxref("HTMLElement")}}继承的属性。</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">名字</th>
   <th scope="col">类型</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>accessKey</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>一个键盘字符构成的字符串，表明用哪个键盘字符能够访问这个按钮。</td>
  </tr>
  <tr>
   <td><code>autofocus</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>这个控件是否可以在页面加载时自动得到焦点。但用户选择了其他焦点除外。只有和表单关联的按钮该特性才有效。</td>
  </tr>
  <tr>
   <td><code>disabled</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>这个控件是否被禁用。被禁用的控件不接受任何输入和点击。</td>
  </tr>
  <tr>
   <td><code>form</code> {{readonlyInline}}</td>
   <td>{{domxref("HTMLFormElement")}}</td>
   <td>这个按钮所关联的表单元素。如果这个按钮是一个表单元素的后代元素，那么这个属性的值就是那个表单元素。<br>
    如果这个按钮不是一个表单元素的后代元素，那么这个数学可以是任意同文档中的表单元素，或者是 <code>null</code> 表明它没有关联任何表单。</td>
  </tr>
  <tr>
   <td><code>formAction</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>一个处理提交信息的URI资源地址。如果指定该属性，会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("action", "form")}} 属性。</td>
  </tr>
  <tr>
   <td><code>formEncType</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>表单要提交给服务器处理的内容的类型。如果指定该属性，会覆盖拥有该元素的{{HTMLElement("form")}} 元素的{{htmlattrxref("enctype", "form")}} 属性。</td>
  </tr>
  <tr>
   <td><code>formMethod</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>浏览器提交表单内容的HTTP方法。如果指定该属性，会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("method", "form")}}属性。</td>
  </tr>
  <tr>
   <td><code>formNoValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>表明这个表单提交时是否需要验证。如果指定该属性，会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("novalidate", "form")}}属性。</td>
  </tr>
  <tr>
   <td><code>formTarget</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>一个名字或关键字，用于表明显示服务器响应的页面。如果指定该属性，会覆盖拥有该元素的{{HTMLElement("form")}} 元素的.{{htmlattrxref("target", "form")}}属性。</td>
  </tr>
  <tr>
   <td><code>labels</code> {{readonlyInline}}</td>
   <td>{{domxref("NodeList")}}</td>
   <td>一个{{HTMLElement("label")}} 元素表，说明哪些标签是归属这个button的。</td>
  </tr>
  <tr>
   <td><code>menu</code> {{experimental_inline}}</td>
   <td>{{domxref("HTMLMenuElement")}}</td>
   <td>如果该按钮<code>type="menu"</code>，被点击的时候应该显示的菜单。</td>
  </tr>
  <tr>
   <td><code>name</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>提交到服务器时表单描述该对象的name。 {{HTMLVersionInline(5)}} 如果指定该属性，不能使用空字符串 。</td>
  </tr>
  <tr>
   <td><code>tabIndex</code></td>
   <td>long</td>
   <td>用于表示该元素在tab按钮跳动过程中的序号的一个数字。</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>表明按钮的行为。这个属性是枚举类型，可以是以下的值：
    <ul>
     <li><code>"submit"</code>: 这个按钮会提交表单。如果不指定该属性，这是默认值。{{HTMLVersionInline(5)}} 中可以动态改为空值或者无效值。</li>
     <li><code>"reset"</code>: 用于重置（清空）表单。</li>
     <li><code>"button"</code>: 什么都不做的按钮。通常通过Javascript挂载事件。</li>
     <li><code>"menu"</code>: 显示菜单的按钮 {{experimental_inline}}。</li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><code>validationMessage</code> {{readonlyInline}}</td>
   <td>{{domxref("DOMString")}}</td>
   <td>报告该控件不满足验证要求的，提示给用户的看的信息。如果这个控件没有验证约束(<code>willValidate</code>值为<code>false</code>)，或者满足验证的要求，那么这个属性为空字符串。</td>
  </tr>
  <tr>
   <td><code>validity</code> {{readonlyInline}}</td>
   <td>{{domxref("ValidityState")}}</td>
   <td>这个控件当前的验证状态。</td>
  </tr>
  <tr>
   <td><code>value</code></td>
   <td>{{domxref("DOMString")}}</td>
   <td>这个控件当前的表单值。</td>
  </tr>
  <tr>
   <td><code>willValidate</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>表明这个按钮是否需要在提交前进行验证。如果不需要，这个属性值为<code>false</code> 。</td>
  </tr>
 </tbody>
</table>

<h2 id="方法">方法</h2>

<p><em>从父对象{{domxref("HTMLElement")}}继承的方法。</em></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">名字</th>
   <th scope="col">返回类型</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>checkValidity()</code></td>
   <td>{{domxref("Boolean")}}</td>
   <td>对按钮元素不支持。</td>
  </tr>
  <tr>
   <td><code>setCustomValidity(in DOMString error)</code></td>
   <td><code>void</code></td>
   <td>对按钮元素不支持。</td>
  </tr>
 </tbody>
</table>

<p>在基于Gecko的浏览器中，在表单验证时会使用{{cssxref(":-moz-submit-invalid")}} 伪类修饰提交按钮。</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>新添加的属性： <code>menu</code>。<br>
    <code>type</code> 属性可以使用的新的值<code>"menu"</code>。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "text-level-semantics.html#the-a-element", "HTMLAnchorElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>属性<code>tabindex</code> 和<code>accesskey</code>被定义在{{domxref("HTMLElement")}}中。<br>
    添加了下列属性：<code>autofocus</code>, <code>formAction</code>, <code>formEncType</code>, <code>formMethod</code>, <code>formNoValidate</code>, <code>formTarget</code>, <code>labels</code>, <code>validity</code>, <code>validationMessage</code>和 <code>willValidate</code>。<br>
    添加了下列方法：<code>checkValidity()</code>, <code>setCustomValidity()</code>.<br>
    <code>type</code> 属性不再是只读的。</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>和 {{SpecName("DOM1")}}一样</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-48250443', 'HTMLAnchorElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>最初的定义。</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>与表单相关的属性</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}} {{unimplemented_inline(556743)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基本支持</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>与表单相关的属性</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop(2.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td><code>labels</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}{{unimplemented_inline(556743)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>menu</code> &amp; <code>type="menu"</code> {{experimental_inline}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="另见">另见</h2>

<ul>
 <li>实现该接口的HTML元素：{{ HTMLElement("button") }}</li>
</ul>