button 要素ボタンを表す

button 要素はボタンを表します。button 要素でマークアップすることで、内包するテキストや画像などをボタンとして使用することができます。

さらに詳細な説明を見る

サンプルソースを見る

button 要素の仕様

カテゴリ
コンテンツモデル

ただし、インタラクティブ・コンテンツを子孫に持つことはできません(例えば button 要素を入れ子にしたり、a 要素を子孫にすることはできません)。

この要素を使用できる文脈

フレージング・コンテンツが期待される場所

この要素で使用できる属性
DOM インタフェース
interface HTMLButtonElement : HTMLElement {
           attribute boolean autofocus;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute DOMString name;
           attribute DOMString type;
           attribute DOMString value;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;
};

詳細説明

button 要素に type 属性を指定することで この要素によってレンダリングされたボタンを操作した際の挙動を指定することができます。type 属性値として指定できる値と、その動作は下記の通りです。

属性値 ボタンの状態 概要
submit 送信ボタン(初期値) フォームを送信 (サブミット) します。
reset リセットボタン フォームに入力された内容をリセットします。
button 何もしません。 onclick 属性などと組み合わせてスクリプトを実行するボタンなどに利用できます。

form 属性

form 属性は、label 要素の for 属性のように、button 要素をフォームと結びつけることができます。結びつけたい form 要素に付与した id 属性値を form 属性に指定することで、該当する form 要素の外に button 要素がある場合でも、操作が可能になります。

disabled 属性

disabled 属性はボタンを無効にします。

autofocus 属性

autofocus 属性はフォーカスをコントロールします。文書が読み込まれた際、この属性を持つ button 要素にフォーカスを移動させます。

form の属性値を上書きする属性

formaction 属性

formaction 属性を指定することで、form の action 属性値をこの値で上書きすることができます。

formenctype 属性

formenctype 属性を指定することで、form の enctype 属性値をこの値で上書きすることができます。

formmethod 属性

formmethod 属性を指定することで、form の method 属性値をこの値で上書きすることができます。

formnovalidate 属性

formnovalidate 属性を指定することで、form の novalidate 属性値をこの値で上書きすることができます。

formtarget 属性

formtarget 属性を指定することで、form の target 属性値をこの値で上書きすることができます。

HTML 5.1 における変更点

HTML 5.1 においては、type 属性値に指定できる値に menu が追加されました。また、menu 属性も新たに追加されています。

type 属性に指定できる値

属性値 ボタンの状態 概要
submit 送信ボタン(初期値) フォームを送信 (サブミット) します。
reset リセットボタン フォームに入力された内容をリセットします。
button 何もしません。 onclick 属性などと組み合わせてスクリプトを実行するボタンなどに利用できます。
menu メニュー メニューを表示するボタンとなります。

menu 属性

type 属性値に指定できる値として menu が追加されたのに伴い、menu 要素とボタンを関連付けるため、menu 属性が追加されています。menu 要素に与えた id 属性値を指定することで、該当するボタンを押したとき、メニューが表示されます。

button 要素のサンプルソース

<button type="button" onclick="[script]">
 ボタンを押すとヒントページを表示
</button>
<button type="submit">
 <img src="/img/submit.png" alt="送信ボタン" />
</button>

W3C HTML5 仕様書

4.10.8 The button element