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

button 要素の仕様

カテゴリ

• インタラクティブ・コンテンツ
• サブミット可能なフォーム関連要素
• パルパブル・コンテンツ
• フォーム関連要素
• フレージング・コンテンツ
• フロー・コンテンツ
• ラベル付け可能な要素
• リスト可能なフォーム関連要素
• 自動大文字化継承フォーム関連要素

コンテンツモデル

• フレージング・コンテンツ

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

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

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

この要素で使用できる属性

• グローバル属性
• disabled 属性
• form 属性
• formaction 属性
• formenctype 属性
• formmethod 属性
• formnovalidate 属性
• formtarget 属性
• name 属性
• popovertarget 属性
• popovertargetaction 属性
• type 属性
• value 属性

詳細説明

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

form 属性

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

disabled 属性

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

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

formaction 属性

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

formenctype 属性

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

formmethod 属性

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

formnovalidate 属性

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

formtarget 属性

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

ポップオーバーに関する属性

popovertarget 属性

トグル、表示、または非表示のターゲットとするポップオーバー要素を指定します。

popovertargetaction 属性

対象のポップオーバー要素がトグルされるか、表示されるか、非表示にされるか、ボタンの役割を示します。

button 要素のサンプルソース

<button type="button" onclick="[script]"> ボタンを押すとヒントページを表示</button>

<button type="submit"> <img src="/img/submit.png" alt="送信ボタン" /></button>

主要ブラウザの対応

関連する要素

• datalist 要素
• fieldset 要素
• form 要素
• input 要素
• keygen 要素
• label 要素
• legend 要素
• meter 要素
• optgroup 要素
• option 要素
• output 要素
• progress 要素
• select 要素
• textarea 要素

用途から目的の要素を探す