button要素

Home>HTML>要素リファレンス>button

この情報はお役に立ちましたか？よろしければ皆様にもお知らせください。

  このエントリーをはてなブックマークに追加 mixiチェック  

button要素の役割

button要素は、img要素を使わずにボタン画像を作成します。
form要素で、複数の送信ボタンを設定してどのボタンを押して送信されたかを判定させるときなどに使います。

button要素に設定できる属性

属性名 意味
accesskey ショートカットキーを指定する。ショートカットキーを押すとボタンを押したことになる。
class クラス名。CSSを適用するときなどに使用する。
dir 文字表記の方向。左から右（ltr）と、右から左（rtl）を指定する。通常はltrなので、右から左へ表記する言語を使わないのであれば、指定しなくてよい。
disabled ボタンの選択可・不可を指定できる。
id ID名。CSSを適用するときに使用する。
lang 言語コード。日本語、英語といった言語を指定する。html要素に記述してあれば、明示する必要はない。
name ボタンの名前を指定する。
style スタイルシートを直接記述する。
tabindex Tabキーを押したときにフォーカスがセットされる順番。
title 補足情報。テキストにカーソルを合わせるとtitle属性に指定した文字列をポップアップで表示する。
type 形式を指定する。ボタンのタイプを送信、リセット、汎用の3つから選ぶ。
value 値を入力する。プログラムに値を渡すときなどに使われる。

button要素の使い方

<button type="button">汎用ボタン</button>

button要素で囲んだテキストは、ボタン画像のラベルテキストとして表示されます。ボタンにidやname属性を指定すると、JavaScriptやPerlといった言語にvalue属性に設定した値を使ったやりとりもできます。

なお、button要素のtype属性に「submit」を指定すると、form要素で指定したプログラムを実行するボタンになります。

type属性の値 効果
button 汎用ボタン。押してもそれ単体だけでは何も影響しない。JavaScriptのonClickやCGIなどで使用。
reset フォームの入力内容をクリアする。あまり使うことはない。
submit 送信ボタン。form要素での実行ボタンになる。

画像によるsubmitボタンをつくるのであれば、input要素のtype="image"を指定しても作ることができます。

→詳しくは「HTML：要素リファレンス：input」をご覧下さい。

関連リンク

よく読まれている記事

UpDate:2010-3-3