buttonタグ/フォーム部品

<button>タグはボタンを配置するために使います。

説明

 <button>タグは<form>タグに囲まれた中で使い、フォーム部品であるボタンを配置します。配置されたボタンをクリックするとCGIやPHPのページに送信したり、JavaScriptを動作させたりする事が出来ます。

 例えば、以下の図のようにボタンをクリックすると、test.jsでJavaScriptが動作し、結果を表示したり出来ます。

buttonのJavaScript利用例

構文

 <button>タグはHTMLボディー内に記述します。構文は以下の通りです。

<button name="名前" type="ボタン形式" value="値">ボタンに表示する文字</button>

 nameは識別するための名前でJavaScriptの処理でnameを使って値を取り出したり出来ますが、必須ではありません。

 typeは以下の種類があります。

【typeの種類】
種類 説明
button 汎用ボタンです。
submit データ送信を行うボタンです。
reset 元に戻すボタンを作成します。入力や選択が初期化されます。

 valueは部品の値です。例えば設定した値をJavaScriptで変数として利用する事も出来ます。

 ボタン上には「ボタンに表示する文字」が表示されます。

button利用例

 JavaScriptを実行する場合のtypeがbuttonの利用例は以下の通りです。

<form action="#">
<button type="button" value="10" onclick="alert(value)">数字が出ます</button>
</form>

 onclickの後にボタンをクリックした時の動作をJavaScriptで記述しています。上記を表示すると以下になります。

 valueで設定した10がアラートで表示されます。

submit利用例

 CGIを利用する場合のtypeがsubmitの利用例は以下の通りです。

<form method="POST" action="test.cgi">
<button type="submit" value="10">送信</button>
</form>

 データをPOSTでtest.cgiに渡しています。上記を表示すると以下になります。

 本来、送信ボタンをクリックするとtest.cgiが表示されてCGIが動作しますが、上記では本ページが再読み込みされます。

reset利用例

 typeがresetの利用例は以下の通りです。

<form action="#">
<textarea rows="3" cols="20">テキスト</textarea>
<button type="reset">リセット</button>
</form>

 テキストエリアに初期表示をテキストと表示し、リセットと表示されるボタンを作成しています。

 上記は以下のように表示されます。

 テキストエリアに文字を入力してリセットボタンをクリックすると、入力した文字が消え、初期表示のテキストだけが残ります。

 初期表示がない場合は空欄になります。

ディスプレイ

 <button>タグで囲むとインラインボックスを示すため、改行されません。複数のボタンを横に並べる事が出来ます。

 <button>タグを囲む<form>タグで囲むとブロックボックスを示すため、複数ボタンを配置すると<form>タグの枠の中で改行されます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

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