構文
<form>
<div>
<button>・・・</button>
：
</div>
</form>
説明文
<buntton>タグは，<form>タグでのユーザーの入力項目にボタンを表示する。ボタンの種類は「type」属性で指定できる。「submit」を指定すればデータの送信ボタンになる。「name」属性に指定した変数名に，<buntton>と</buntton>で囲んだ値が送られる。また，「value」属性を指定しておくと，その内容を値として送信される。ただし，Internet Explorerを利用している場合は，「value」属性が指定されていても，<buntton>と</buntton>で囲んだ値が送信されるので注意が必要だ。
<button>タグはインライン要素であるため，基本的にブロック要素の中で利用するようにする。また，<form>タグはブロック要素であるが，HTML 4 Strictでは<form>タグ内にはブロック要素のみ包括を許可しているため，<button>タグを利用する際は，他のブロック要素を利用して記載するようにする。
サンプル
HTMLソース
<form action="button.cgi">
<div>
タイトル：<input type="text" name="title" size="20"><br>
メッセージ：<br>
<textarea name="body"></textarea><br>
<button type="submit" name="button">送信</button>
<button type="reset">消去</button>
</div>
</form>
ブラウザ表示例
対応状況
| HTML |
IE |
Firefox |
Opera |
| 4 strict |
4 Transitional |
5 |
6 |
7 |
2 |
3 |
8 |
9 |
| ○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
○ |
要素，タグ
属性
よく利用する属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| type=種類 |
ボタンの種類を指定する。「button」を指定した場合は通常のボタンとなる。「submit」を指定した場合、このボタンを押すと<form>タグで指定しているスクリプトを実行する。「reset」を指定した場合、このボタンを押すと<form>内にあるフォームの内容が初期値に戻る |
○ |
○ |
|
| value=値 |
ボタンを押した際にサーバーへ送る値を指定する。値を設定しない場合は，このタグに囲まれた文字列が送られる |
○ |
○ |
|
| name=名前 |
このフォームに名前を付ける。フォームの内容を送信する場合，「名前=値」のように値の前にここで指定した名前が付加される。サーバー側のプログラムで処理する場合，この名前を確認することでどのフォーム部品の値であるかを判断できる |
○ |
○ |
|
その他の属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| accesskey=キー |
このタグにフォーカスするキー設定を行う。「A」と指定すると，[ALT]+[a]を押下することでこのタグにフォーカスが移動する |
○ |
○ |
|
| class=クラス名 |
このタグのクラス名。CSSでスタイルを指定する場合などに利用される |
○ |
○ |
|
| dir=方向 |
タグ内の文字の表示方向。「ltr」を指定すると文字を左から右に，rtlを指定すると「右から左」に表示する。しかし，多くのWebブラウザでは，文字コードを自動判別し，自動的に表示方向を決定している。そのため，日本語を「rtl」と指定しても実際には左から右に表示される。強制的に並び替えを行いたい場合は<bdo>タグを利用する |
○ |
○ |
|
| disabled |
ボタンを無効化する。ボタンを押しても何も処理されなくなる |
○ |
○ |
|
| id=ID |
タグのID。ダイナミックHTMLでタグを操作する場合や，Java Scriptでのタグの制御，個別にスタイルを指定する場合などに利用する |
○ |
○ |
|
| lang=言語 |
タグ内に記述した言語。例えば，日本語の場合は「ja」，英語の場合は「en」を指定する |
○ |
○ |
|
| style=スタイル |
タグのスタイル。スタイルの指定方法については「CSSの基本 (2) CSSの記述位置」を参照 |
○ |
○ |
|
| tabindex=順序 |
タブ・キーによるフォーカスの移動順序を指定する。値が小さいほど先にフォーカスされる |
○ |
○ |
|
| title=タイトル |
タグのタイトル。一般的にタグの補足情報を記述する。一般的なWebブラウザでは，タグ上にマウス・ポインタを乗せるとツール・チップにtitle属性に指定した内容を表示する |
○ |
○ |
|
マウスやキーボードの状況変化に関わる属性
| 属性 |
意味 |
対応 |
| HTML 4s |
HTML 4t |
その他 |
| onclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをクリックした場合に，指定したスクリプトを実行する |
○ |
○ |
|
| ondblclick=スクリプト |
このタグに対応する表示結果にマウスの左ボタンをダブル・クリックした場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmousedown=スクリプト |
このタグに対応する表示結果にマウスのボタンで押下した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseup=スクリプト |
このタグに対応する表示結果にマウスのボタンを離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseover=スクリプト |
このタグに対応する表示結果にマウス・ポインタが乗った場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmousemove=スクリプト |
このタグに対応する表示結果上でマウス・ポインタが動いた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onmouseout=スクリプト |
このタグに対応する表示結果にマウス・ポインタが外れた場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeypress=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下して離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeydown=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーを押下した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onkeyup=スクリプト |
このタグに対応する表示結果にフォーカスした状態で，キーボードのキーから離した場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onfocus=スクリプト |
このタグに対応する表示結果にフォーカスが当たった場合に，指定したスクリプトを実行する |
○ |
○ |
|
| onblur=スクリプト |
このタグに対応する表示結果にフォーカスが外れた場合に，指定したスクリプトを実行する |
○ |
○ |
|
関連項目
