button
<button> はクリック可能なボタンを示します。
- 分類
- フローコンテンツ、フレージングコンテンツ、インタラクティブコンテンツ
- 内包できるもの
- フレージングコンテンツ
属性
- autofocus
- 自動的にフォーカスする
- disabled
- ボタンの無効化
- form=””
- フォームと関連付ける
- formaction=””
- フォームデータ送信先 URL の指定
- formenctype=””
- フォームデータのエンコードを指定する
- formmethod=””
- フォームデータ送信時の HTTP メソッド
- formnovalidate
- フォームデータの内容を検証しない
- formtarget=””
- 送信結果の表示方法
- name=””
- ボタンの名称
- type=””
- ボタンの種別
- value=””
- ボタンの初期値
ページ読み込み完了時自動的にフォーカスする
autofocus 属性が指定された要素はページ読み込み完了時自動的にフォーカスされます。文書中のフォーム関連要素のうちひとつだけこの要素を指定可能です。
<button type="submit" autofocus>送信</button>ボタンの無効化
disabled 属性はフォームの要素を無効化します。
<button type="submit" disabled>送信</button>フォームと関連付ける
form 属性はどのフォームと関連付けるのかを指定します。同じ HTML 文書内の <form> 要素の id 名を指定します。
<form method="post" action="page.php" id="contact">
<p>内容：<input type="text" name="name" /></p>
</form>
<p><button type="submit" form="contact">送信</button></p>id が指定されていない場合、 <button> が <form> 内にある場合はその要素に関連付けられます。
<form method="post" action="page.php">
<p>内容：<input type="text" name="name" /></p>
<button type="submit">送信</button>
</form>
フォームデータ送信先 URL の指定
formaction 属性はフォームデータ送信先 URL を指定します。指定した場合は <button> が属するフォームの action 属性より優先されます。
<form method="post" action="page01.php">
<button type="submit" formaction="page02.php">送信</button>
</form>フォームデータのエンコードを指定する
formenctype 属性はフォームデータのエンコードを指定します。
- application/x-www-form-urlencoded
- 初期値
- multipart/form-data
- input 要素の type 属性に file を指定して使用する場合に使用
- text/plain
- デバッグ目的で仕様書に追加されたものとのことです。実用的なフォーム送信では基本的に使用しません
フォームデータ送信時の HTTP メソッド
formmethod 属性はボタンが送信ボタンである時、フォームデータ送信に使用する HTTP メソッドです。
- post
- 値を HTTP リクエストの本文に含み送信する方法。パスワードのような重要な情報を送信する場合などに使用
- get
- 値を URL に追加して送信する方法。何か情報を検索したり取得するために使うためのメソッド
この属性が指定されている場合は、親要素の form 属性の指定より優先されます。
<form method="post" action="page.php">
<button type="submit" formmethod="get">送信</button>
</form>フォームデータの内容を検証しない
formvalidate 属性はフォームデータ送信時、データの内容を検証しないようにします。この属性指定時、form 要素の novalidate 属性より優先されます。
<button type="submit" formnovalidate>送信</button>送信結果の表示方法
formtarget 属性はフォームを送信後その結果表示をどのように表示するかを指定します。
- _self
- 現在のウインドウに表示
- _blank
- 新規ウインドウまたはタブに表示
- _parent
- 親ウインドウに表示（フレーム使用時）
- _top
- フレームを解除し現在のウインドウに表示、フレームでない場合は _self と同等
<button type="submit" formtarget="_self">送信</button>ボタンの名称
name 属性はボタンの名称です。value 属性の値と関連付けられています。
<button type="submit" name="btn01" value="value01">送信</button>ボタンの種別
type 属性はボタンの種別を指定します。
- submit
- フォームデータを送信する
- reset
- 値を初期値にリセットする
- button
- 特に動作なし。Javascript の onclick イベント等に使用
<button type="submit">送信</button>ボタンの初期値
value 属性はフォームデータと一緒に送信する際に、ボタンの name 属性と関連付けられる値です。
<button type="submit" name="btn01" value="value01">送信</button>