---
title: HTMLButtonElement
slug: Web/API/HTMLButtonElement
tags:
  - API
  - HTML DOM
  - HTMLButtonElement
  - Interface
  - Reference
  - インターフェイス
translation_of: Web/API/HTMLButtonElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p><strong><code>HTMLButtonElement</code></strong> インターフェイスは、 ({{domxref("HTMLElement")}} から継承したものより詳細に) {{HTMLElement("button")}} 要素を操作するためのプロパティやメソッドを提供します。</p>

<p>{{InheritanceDiagram(600, 120)}}</p>

<h2 id="Properties" name="Properties">プロパティ</h2>

<p><em>親である {{domxref("HTMLElement")}} からプロパティを継承しています。</em></p>

<dl>
 <dt>{{domxref("HTMLButtonElement.accessKey")}}</dt>
 <dd>{{domxref("DOMString")}} で、ボタンにアクセスするためのキーボードの1文字のキーを示します。</dd>
 <dt>{{domxref("HTMLButtonElement.autofocus")}}</dt>
 <dd>{{jsxref("Boolean")}} で、ページが読み込みの際、ユーザーが異なるコントロールに入力するなどで上書きをしない限り、コントロールが入力フォーカスを持つべきかどうかを示します。文書中のフォーム関連要素の中で、この属性を指定できるのは1つだけです。</dd>
 <dt>{{domxref("HTMLButtonElement.disabled")}}</dt>
 <dd>{{jsxref("Boolean")}} で、コントロールが無効か否か、つまりクリックを受け付けるかどうかを示します。</dd>
 <dt>{{domxref("HTMLButtonElement.form")}} {{readonlyInline}}</dt>
 <dd>{{domxref("HTMLFormElement")}} で、このボタンが関連付けられているフォームを反映します。ボタンがフォームの子孫要素である場合は、この属性はフォーム要素の ID になります。<br>
 ボタンがフォーム要素の子孫でない場合は、属性は同じ文書内の任意のフォーム要素の ID になる可能性があり、また一致するものがなければ <code>null</code> 値になります。</dd>
 <dt>{{domxref("HTMLButtonElement.formAction")}}</dt>
 <dd>{{domxref("DOMString")}} で、ボタンによって送信された情報を処理するリソースの URI を反映します。指定された場合は、この属性はこの要素のオーナーである {{HTMLElement("form")}} 要素の {{htmlattrxref("action", "form")}} 属性を上書きします。</dd>
 <dt>{{domxref("HTMLButtonElement.formEnctype")}}</dt>
 <dd>{{domxref("DOMString")}} で、サーバーにフォームを送信するために使用されるコンテンツの型を反映します。指定された場合は、この属性はこの要素のオーナーである {{HTMLElement("form")}} 要素の {{htmlattrxref("enctype", "form")}} 属性を上書きします。</dd>
 <dt>{{domxref("HTMLButtonElement.formMethod")}}</dt>
 <dd>{{domxref("DOMString")}} で、ブラウザーがフォームを送信するために使用する HTTP メソッドを反映します。指定された場合は、この属性はこの要素のオーナーである {{HTMLElement("form")}} 要素の {{htmlattrxref("method", "form")}} 属性を上書きします。</dd>
 <dt>{{domxref("HTMLButtonElement.formNoValidate")}}</dt>
 <dd>{{jsxref("Boolean")}} で、フォームの送信時に値の検証が行われないことを示します。指定された場合は、この属性はこの要素のオーナーである {{HTMLElement("form")}} 要素の {{htmlattrxref("novalidate", "form")}} 属性を上書きします。</dd>
 <dt>{{domxref("HTMLButtonElement.formTarget")}}</dt>
 <dd>{{domxref("DOMString")}} で、フォームに送信した後で受信するレスポンスを表示する場所を示す名前またはキーワードを反映します。指定された場合は、この属性はこの要素のオーナーである {{HTMLElement("form")}} 要素の {{htmlattrxref("target", "form")}} 属性を上書きします。</dd>
 <dt>{{domxref("HTMLButtonElement.labels")}} {{readonlyInline}}</dt>
 <dd>{{domxref("NodeList")}} で、このボタンのラベルとなる {{HTMLElement("label")}} 要素を表します。</dd>
 <dt>{{domxref("HTMLButtonElement.menu")}} {{experimental_inline}}</dt>
 <dd>{{domxref("HTMLMenuElement")}} で、ボタンが <code>type="menu"</code> である場合にクリックした場合に表示されるメニュー要素を表します。</dd>
 <dt>{{domxref("HTMLButtonElement.name")}}</dt>
 <dd>{{domxref("DOMString")}} で、フォームを送信したときのオブジェクトの名前を表します。 {{HTMLVersionInline(5)}} 指定された場合は、空文字列にすることはできません。</dd>
 <dt>{{domxref("HTMLButtonElement.tabIndex")}}</dt>
 <dd><code>long</code> で、タブ順でのこの要素の位置を表します。</dd>
 <dt>{{domxref("HTMLButtonElement.type")}}</dt>
 <dd>{{domxref("DOMString")}} で、このボタンの動作を示します。これは列挙型属性で、以下の値を取ることができます。
 <ul>
  <li><code>submit</code>: フォームを送信するボタンです。これは属性が指定されていなかった場合の既定値です。 {{HTMLVersionInline(5)}} または空の値や無効な値に変更された場合の既定値です。</li>
  <li><code>reset</code>: フォームをリセットするボタンです。</li>
  <li><code>button</code>: 何もしないボタンです。</li>
  <li><code>menu</code>: メニューを表示するボタンです。 {{experimental_inline}}</li>
 </ul>
 </dd>
 <dt>{{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}}</dt>
 <dd>{{jsxref("Boolean")}} で、ボタンが制約検証の候補になるかどうかを示します。制約検証が阻止される場合は <code>false</code> となり、これには <code>type</code> プロパティが <code>reset</code> または <code>button</code> である場合、祖先に {{HTMLElement("datalist")}} がある場合、 <code>disabled</code> プロパティが <code>true</code> に設定されている場合が含まれます。</dd>
 <dt>{{domxref("HTMLButtonElement.validationMessage")}} {{readonlyInline}}</dt>
 <dd>{{domxref("DOMString")}} で、 (もしあれば) 制約検証でコントロールが合格しなかった場合のローカライズされたメッセージを表現します。この属性はコントロールが制約検証の候補にならない場合 (<code>willValidate</code> が <code>false</code> の場合) や、制約を満たしている場合は空文字列になります。</dd>
 <dt>{{domxref("HTMLButtonElement.validity")}} {{readonlyInline}}</dt>
 <dd>{{domxref("ValidityState")}} で、このボタンがある妥当性の状態を表します。</dd>
 <dt>{{domxref("HTMLButtonElement.value")}}</dt>
 <dd>{{domxref("DOMString")}} で、ボタンの現在のフォームコントロールの値を表します。</dd>
</dl>

<h2 id="Methods" name="Methods">メソッド</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>{{jsxref("Boolean")}}</td>
   <td>リセットまたはボタン要素は対応していません。</td>
  </tr>
  <tr>
   <td><code>reportValidity()</code></td>
   <td>{{jsxref("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="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "#htmlbuttonelement", "HTMLButtonElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.2', "sec-forms.html#htmlbuttonelement", "HTMLButtonElement")}}</td>
   <td>{{Spec2('HTML5.2')}}</td>
   <td><code>menu</code> 属性および <code>type="menu"</code> 値が削除された。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "sec-forms.html#htmlbuttonelement-htmlbuttonelement", "HTMLButtonElement")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td><code>menu</code> 属性が追加された。<br>
    <code>type</code> 属性でもう一つ、 "<code>menu</code>" の値が取れるようになった。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}}</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-34812697', 'HTMLButtonElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>{{SpecName("DOM1")}} から変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("api.HTMLButtonElement")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>このインターフェイスを実装している HTML 要素: {{ HTMLElement("button") }}</li>
</ul>