<button>要素

<button>要素の定義

英語で「ボタン」を表す”button”より。
HTML文書では、各種フォームの送信ボタンなど、クリック/タップできるボタンを表します。
<input> 要素にも、もちろんボタン用の要素がありますが、スタイリングの自由度、容易さは <button> 要素がまさります。
<input> 要素では、基本的にボタン内にはテキストしか表示できませんが、<button> 要素では、子要素としてHTML要素を追加できるため、テキストと画像を組み合わせたり、fontawesomeなどのWebフォントを組み合わせることも容易です。

子要素として使用できるもの

記述コンテンツが使用できます。ただし、他のフォーム関連要素などの対話型コンテンツは使用できません。

親要素として使えるもの

記述コンテンツを受け入れるすべての要素。

許可されているARIAロール

checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab

DOMインターフェース

HTMLButtonElement

属性

グローバル属性が指定できます。

autofocus

この属性を指定することで、ページ読み込み時に入力フォーカスを持つべきボタンであることを指定できます。文書中のフォーム関連要素のうち、1つだけにこの属性を指定できます。

disabled

この属性を指定することで、ユーザーによるボタンの操作を無効化します。

form

ボタンに関連付けられる、<form> 要素の”id”属性を指定します。
この属性によって <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

フォームデータとともに送信される、ボタンに関連付けられた値を定義します。この値はフォームを送信する際に、引数としてサーバーに渡されます。

サンプル

See the Pen Login by Masahiko Iwakiri (@m-iwakiri) on CodePen.