このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

button要素:ボタン

記事Sep.14th, 2020
ボタンを表す要素
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

要素について

button”要素はボタンを表す要素です。

button”要素の内容はボタンのラベルになります。

フォームの送信ボタンやリセットボタンとして、もしくは何かしらのスクリプトを実行するためのボタンとして使用することができます。

フォームを操作するために“button”要素を使用する場合、form”要素の中に“button”要素を配置するか、form”属性form”要素に関連付けます。

同様のボタンはtype="submit"type="reset"type="button"を指定したinput”要素でも表すことができます。ただし、input”要素ではボタンのラベルはvalue”属性の属性値であるテキストであるのに対して、“button”要素はフレージング・コンテンツであればラベルとすることができるので自由度が高くなります。

サンプルコード

<form method="post" action="sample-formtag2.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域:<input type="text" name="area"></label></p>
<p><label>年齢:<input type="number" name="age"></label></p>
</fieldset>
<p>
<button type="submit">送信する</button>
<button type="reset">やり直す</button>
</p>
</form>
好きな果物

一番好きな果物

あなたの情報

居住地域:

年齢:

*送信すると入力内容が表示されます。

button”要素の内容にはimg”要素などの要素も含むことができます。

<p>
<button type="button" onclick="location.href='index.html'">
<img src="sample_s.png" alt="HTML tag ~ havin'a coffee break">
</button>
</p>

属性と値

現行の仕様で定義されている属性

属性
属性 説明 説明
必須属性
なし
任意属性
グローバル属性
disabled="" ボタンを無効化 disabled ボタンを無効化
form=""HTML5で追加 関連付けるフォーム ID名 関連づけるform”要素id”属性の値
formaction=""HTML5で追加 フォームに入力されたデータの送信先 URL フォームに入力されたデータの送信先のURL
formenctype=""HTML5で追加 フォームが送信するデータの形式 application/x-www-form-urlencoded 入力されたデータをURLエンコードして送信
multipart/form-data 入力されたデータをマルチパートデータとして送信
text/plain 入力されたデータをプレーンテキストとして送信
formmethod=""HTML5で追加 フォームを送信時のHTTPメソッド get 入力されたデータをaction”属性で指定したURLにクエリ文字列として付加して送信
post 入力されたデータをHTTPリクエストの本文として送信
dialogHTML5.2で追加 フォームの送信時に“form”要素が含まれるdialog”要素を閉じる
formnovalidate=""HTML5で追加 フォームの送信時に入力内容の妥当性をチェックしない formnovalidate フォームの送信時に入力内容の妥当性をチェックしない
formtarget=""HTML5で追加 フォームの送信時の応答画面の表示方法 _blank 新しいブラウジング・コンテキストに表示
_self 現在のブラウジング・コンテキストに表示
_parent 現在のブラウジング・コンテキストの1つ上位のブラウジング・コンテキストに表示
_top 現在のブラウジング・コンテキストの最上位のブラウジング・コンテキストに表示
ブラウジング・コンテキスト名 任意のブラウジング・コンテキストに表示
name="" ボタンの名前 文字列 ボタンの名前
type="" ボタンの種類 submit 送信ボタン
reset リセットボタン
button 既定の動作がない
menu注意 コンテキストメニューを表示する
value="" ボタンの値 文字列 ボタンの値

過去に定義された属性

属性
属性 説明 説明
tabindex="" フォーカスの可否とフォーカスの移動順序を指定する 正の整数 順次ナビゲーションに加わり、フォーカスの順番を指定(tabindex”属性の値が小さい順番にフォーカスする)
0 順次ナビゲーションに加わるがフォーカスの順番は指定しない(文書内に記述された順番でフォーカスする)
負の整数 フォーカス可能だが順次ナビゲーションには加わらない
accesskey="" 要素にアクセスキーを割り当てる 文字 ユニコード1文字によるアクセスキー
onblur="" フォーカスを失った時に実行されるスクリプト スクリプト フォーカスを失った時に実行されるスクリプト
onfocus="" フォーカスされた時に実行されるスクリプト スクリプト フォーカスされた時に実行されるスクリプト
menu=""注意 コンテキストメニューに関連付ける ID名 関連付けるmenu”要素id”属性の値
autofocus=""HTML5で追加 要素に自動的にフォーカスする autofocus 要素に自動的にフォーカスする

仕様書

button”要素はHTML4.0から定義されている要素です。現行の仕様であるHTML Living Standardでも定義されています。

HTML 4 HTML 5 HTML 5.1 HTML 5.2 HTML Living Standard
<button>
定義あり

定義あり

定義あり

定義あり

定義あり
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク