<button>タグは、ボタンを表す際に使用します。
button要素で作成されるボタンは、button要素の内容がボタンのラベルとなります。
<button> ～ </button>のなかに、
テキストや画像を配置するなどして、自由度の高い個性的なボタンを作成できます。
以下のサンプルでは、button type=buttonで作成される汎用ボタンのonclickイベントを取得することで、
アラートによるメッセージ画面を開いています。
<button type=button onclick="alert('そのイベントでは、メンデルスゾーンの行進曲が流れますよ～')">
<div style="text-align:center;"><img src="sample/hintgirl.png" alt="ヒント"></div>
<div style="text-align:center;">ヒントを見ますか？</div>
</button>
button要素のtype属性に指定するキーワード値によってボタンの種類が変わります。
button要素のtype属性の初期値は submit で、[送信ボタン]状態です。
type=resetを指定した[リセットボタン]状態や、
type=buttonを指定した[ボタン]状態の場合、
ボタンを押しても入力必須や入力パターンなどのバリデーションは動作しません。
formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性は、フォーム送信コントロールに使用する属性です。
これらの属性は、button要素が[送信ボタン]状態の場合にのみ指定できます。
form属性は、button要素とそのフォーム所有者を明示的に関連付けます。
name属性は、要素の名前を表します。
value属性は、フォーム送信の目的で要素の値を指定します。
value属性を指定すると、その値が要素の値となります。
value属性を指定しないと、空の文字列が要素の値となります。
disabled属性は、コントロールを非対話型にし、その値が送信されないようにします。
以下のサンプルは、コメント投稿欄を想定しています。
「投稿する」ボタンを押すとフォーム送信され、
「リセット」ボタンを押すと初期状態にリセットされます。
<form action="comment.cgi" method=post>
<p><label>コメント: <input type=text name="comment" required></label></p>
<p><button type="submit">投稿する</button></p>
<p><button type="reset">リセット</button></p>
</form>
以下のサンプルでは、button type=buttonで作成される汎用ボタンのonclickイベントを取得することで、
新しいウィンドウを開いています。
<script>
function openNew() {
window.open('new ');
}
</script>
<p><button type=button onclick="openNew()">新しいウィンドウを開く</button></p>