buttonタグで、送信ボタンやリセットボタン、汎用ボタンなどを作成できます。
<button type="button">ボタンの内容</button>
<button type="submit" name="example" value="ボタン">ボタンの内容</button>
buttonタグに囲まれた内容が、ボタン上に表示されます。
内容にはタグも使用できるので、文字を装飾したり画像を表示させることもできます。
| type="" | submit … （送信ボタンを指定します） |
|---|---|
| reset … （リセットボタンを指定します） | |
| button … （汎用ボタンを指定します） | |
| name="" | ボタン名を指定します（一般的には半角英数字） |
| value="" | 送信される内容を指定します |
ボタンのサイズや背景色等は、スタイルシートでアレンジすることもできます。指定方法の詳細は「関連ページ」をご覧ください。
■ボタンに表示される文字サイズを変更する場合
<form method="POST" action="example.cgi">
<p><input type="text" name="test"></p>
<p>
<button type="submit"><big>送信する</big></button>
<button type="reset"><small>リセット</small></button>
</p>
</form>
▼これをブラウザで見ると次のように表示されます
※サンプルのため送信できません
■ボタンに画像を表示する場合（JavaScriptと組み合わせた例）
<p>
<button type="button" onClick="alert('これはテストです')">
<img src="image/mark.gif" alt="アラートボタン" width="47" height="42"><br>アラート
</button>
</p>
▼これをブラウザで見ると次のように表示されます
