HTML - button 要素

概要

名前
button
カテゴリー
  • Flow content
  • Phrasing content
  • Interactive content
  • Palpable content
  • Form-associated element
  • Listed element
  • Labelable element
  • Submittable element
配置できる場所
Phrasing content が期待される場所。
コンテンツモデル
Phrasing content。ただし、Interactive content の祖先になってはいけない。
説明
button 要素は、要素内容をそのままラベルとして表示させるタイプのボタンになる要素です。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLButtonElement
仕様書
仕様書策定状況コメント
LS:現行の標準
REC:勧告
REC:勧告
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

属性

属性サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
autocomplete
autofocus104559.637
disabled
form16
formaction10491537
formenctype104910.637
formmethod10491537
formnovalidate
formtarget
name
type
value
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
autofocus
この論理属性で、ページ読み込み時に(ユーザが例えば他のコントロールに入力するなどして動作を上書きしない限り)、入力フォーカスを持つべきボタンであることを指定することができます。文書中のフォーム関連要素のうちのひとつだけにこの属性を指定することができます。
disabled
この論理属性は、ユーザによるボタン操作を無効化します。この属性が指定されていない場合、ボタンを内包する親要素の設定値を継承します。例えば、ボタンの祖先となる fieldset 要素などにも disabled 属性が指定されていないのであれば、この子要素である button 要素は使用可能のままであるということです。
form
ボタンに関連付けられた form 要素です。属性値は同一文書内の form 要素id 属性と同一の値にしなくてはなりません。この属性を指定しない場合は、祖先に form 要素が存在すれば、その要素に関連付けられます。この属性によって form 要素の子孫にするだけでなく、同一文書内にある任意の form 要素button 要素を関連付けることが可能になりました。
formaction
ボタンによって送信された情報を処理するプログラムの URI。指定した場合は、そのボタンの属するフォームの action 属性よりも優先されます。
formenctype
ボタンを送信ボタンとして使用する場合、ブラウザがフォーム情報をサーバに送信するために使用するコンテンツの種類を指定します。以下の値を指定可能です。
  • application/x-www-form-urlencoded: 初期値。属性を指定していない場合、この値が使用されます。
  • multipart/form-data: input 要素type 属性に file を指定して使用する場合に使用。
  • text/plain: プレーンテキストとしてフォームデータを送信する場合に使用。
この属性が指定された場合、button 属性が紐付けられた form 要素enctype 属性より優先して使用されます。
formmethod
ボタンが送信ボタンの場合に、ブラウザがフォーム情報を伝送するために使用する HTTP メソッド。以下の値を指定可能です。
  • post: フォームからのデータはフォームの内容を含めてサーバに送信されます。
  • get: フォームからのデータはセパレーターとして ? を使用して form 属性の URI に追加され、その結果となる URI をサーバに送信します。フォームが ASCII 文字列だけを含み、副作用がない場合にのみ、このメソッドを使用してください。
この属性が指定された場合、これはボタンの属する form 要素method 属性より優先して使用されます。
formnovalidate
この論理属性は、ボタンが送信ボタンである場合にフォームデータ送信時に内容をバリデートしないように指定するものです。この属性が指定された場合、ボタンの属する form 要素novalidate 属性より優先して使用されます。
formtarget
ボタンが送信ボタンである場合、フォームの送信後に受信したレスポンスを表示する場所を示す名前、もしくはキーワードです。これは、閲覧コンテキスト(タブ、ウィンドウ、インラインフレーム)の名前またはキーワードを参照します。この属性が指定された場合、ボタンの属する form 要素target 属性より優先して使用されます。以下のキーワードは特別な意味を持ちます。
  • _self: 同じ閲覧コンテキストにレスポンスデータを読み込みます。この値は、属性が指定されていない場合の既定値です。
  • _blank: 新しい無名の閲覧コンテキストにレスポンスデータを読み込みます。
  • _parent: 現在のコンテキストの親の閲覧コンテキストにレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
  • _top: 最上位の閲覧コンテキスト(現在のコンテキストの祖先で、それ以前の祖先をもたない閲覧コンテキスト)にレスポンスデータを読み込みます。親要素がない場合、このオプションは _self と同じ振る舞いをします。
name
フォーム情報とともに送信されるボタンの名前です。
type
ボタンの種別です。以下の値を指定可能です。
  • submit: 自身が属するフォームのデータをサーバに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合の既定の動作です。
  • reset: ボタンに紐づけられたフォームコントロールの値をすべて初期値に戻すリセットボタンになります。
  • button: type 属性に button を指定したボタンには、既定の動作はなく、クリックするなどしても何も起こりません。クライアントサイドスクリプトで要素にイベントを設定することにより、操作時の挙動を設定することができます。
value
ボタンの初期値。フォームデータとともに送信される、ボタンに関連付けられた値を定義します。この値はフォームを送信する際に、引数としてサーバに渡されます。

非推奨の属性

以下の属性は非推奨、非標準、実験的、または廃止された属性のため、使用しないでください。

autocomplete
非標準。ブラウザ間の互換性が低い可能性があります。

サンプルコード

button 要素のサンプルコードは以下のとおりです。

<button name="favorite" type="button">
  お気に入りに追加
</button>
button 要素のサンプルコード

関連記事