button 要素

4.10.6 button 要素

カテゴリー:
フロー・コンテント
フレージング・コンテント
インタラクティブ・コンテント
リスト対象で、ラベル付け可能で、サブミット可能で、再関連付け可能フォーム関連要素
パルパブル・コンテント
この要素を使うことができるコンテキスト:
フレージング・コンテントが期待される場所
コンテントモデル:
フレージング・コンテント。ただし、子孫にインタラクティブ・コンテントを入れることはできません。
コンテント属性:
グローバル属性
autofocus - ページがロードされた時に自動的にフォームコントロールにフォーカスを当てる
disabled - フォームコントロールを無効にするかどうか
form - form 要素にコントロールを関連付ける
formaction - フォームのサブミットに使う URL
formenctype - フォームのサブミットに使うフォームデータセットのエンコーディングタイプ
formmethod - フォームのサブミットに使う HTTP メソッド
formnovalidate - フォームのサブミットのフォームコントロールのバリデーションをバイパスする
formtarget -フォームのサブミットブラウジングコンテキスト
menu - この要素の指定されたポップアップメニューを特定する
name - フォームのサブミットform.elements API で使うフォームコントロールの名前
type - ボタンのタイプ
value - フォームのサブミットに使う値
text/html におけるタグの省略:
どちらのタグも省略できません。
指定可能な ARIA role 属性 の値:
button (デフォルト - 指定不要), link, menuitem, menuitemcheckbox, menuitemradio または radio
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
許可ロールに該当する aria-* 属性
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 属性は、アクティブにされたときのボタンの挙動を制御します。これは列挙属性です。下表は、この属性に割り当てられているキーワードと状態を一覧にしたものです。左の列のキーワードは、そのキーワードと同じ行にある 2 列目のセルに書かれている状態と対応付けられます。

キーワード 状態 概略
submit サブミットボタン フォームをサブミットする。
reset リセットボタン フォームをリセットする。
button ボタン 何もしない。

指定がなかった場合のデフォルトは、サブミットボタン状態です。

type 属性がサブミットボタン状態であれば、この要素は特別にサブミットボタンになります。

制約バリデーション: type 属性がリセットボタン状態もしくはボタン状態にあれば、この要素は制約バリデーションから除外されます。

button 要素が無効でなければ、そのアクティベーションビヘイビアは、次のリストで定義された手順を実行することになります。この手順は、この要素の type 属性の現在の状態に対して定義されます:

サブミットボタン

この要素がフォームオーナーを持ち、この要素の Document完全にアクティブなら、この要素は button 要素からそのフォームオーナーサブミットしなければいけません。

リセットボタン

この要素がフォームオーナーを持ち、この要素の Document完全にアクティブなら、この要素はそのフォームオーナーリセットしなければいけません。

ボタン

何もしません。

form 属性は、明示的にその button 要素をフォームオーナーと結びづけるために使われます。name 属性は、その要素の名前を表します。disabled 属性は、コントロールを非インタラクティブして、その値がサブミットされないようにするために使われます。autofocus 属性はフォーカスを制御します。formaction, formenctype, formmethod, formnovalidate, formtarget 属性は、フォームサブミット用の属性です。

formnovalidate 属性を使うことで、制約バリデーションを発生させないサブミットボタンを作ることができます。

この要素の type 属性がサブミットボタン状態になければ、formaction, formenctype, formmethod, formnovalidate, formtarget は指定されてはいけません。

value 属性は、フォームサブミットに使われる要素の値を与えます。この要素のは、この要素に value 属性があれば、その値となります。なければ、空文字列となります。

ボタン(そして、その値)は、そのボタン自身がフォームのサブミットを発生させるために使われた場合に限り、そのフォームのサブミットに含められます。


type IDL 属性は、同じ名前のコンテント属性を反映しなければいけません。ただし、既知の値に限定されます。

willValidate, validity, validationMessage IDL 属性、そして、checkValidity()setCustomValidity() メソッドは、制約バリデーション API の一部です。labels IDL 属性は、この要素の label のリストを提供します。autofocus, disabled, form, name IDL 属性は、この要素の forms API の一部です。

次のボタンは、"Snow hint" とラベル付けされ、アクティベートされたときに、ダイアログをポップアップします:

<button type=button
        onclick="alert('This 15-20 minute piece was composed by George Gershwin.')">
 Show hint
</button>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-button-element