<button> …… ボタンを表す

<button>タグは、ボタンを表す際に使用します。

button要素で作成されるボタンは、button要素の内容がボタンのラベルとなります。 <button> ～ </button>のなかに、 テキストや画像を配置するなどして、自由度の高い個性的なボタンを作成できます。

■使用例

以下のサンプルでは、button type=buttonで作成される汎用ボタンのonclickイベントを取得することで、 アラートによるメッセージ画面を開いています。

HTMLソース

<button type=button onclick="alert('そのイベントでは、メンデルスゾーンの行進曲が流れますよ～')">
 <div style="text-align:center;"><img src="sample/hintgirl.png" alt="ヒント"></div>
 <div style="text-align:center;">ヒントを見ますか？</div>
</button>

↓↓↓

ブラウザ上の表示

ヒントを見ますか？

type属性の値とボタンの種類

button要素のtype属性に指定するキーワード値によってボタンの種類が変わります。

• <button type=submit> …… フォームを送信します。
• <button type=reset> …… フォームをリセットします。
• <button type=button> …… 何もしません。

button要素のtype属性の初期値は submit で、[送信ボタン]状態です。

type=resetを指定した[リセットボタン]状態や、 type=buttonを指定した[ボタン]状態の場合、 ボタンを押しても入力必須や入力パターンなどのバリデーションは動作しません。

[送信ボタン]状態の場合にのみ指定できるフォーム送信属性

formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性は、フォーム送信コントロールに使用する属性です。 これらの属性は、button要素が[送信ボタン]状態の場合にのみ指定できます。

form属性、name属性、value属性

form属性は、button要素とそのフォーム所有者を明示的に関連付けます。

name属性は、要素の名前を表します。

value属性は、フォーム送信の目的で要素の値を指定します。 value属性を指定すると、その値が要素の値となります。 value属性を指定しないと、空の文字列が要素の値となります。

disabled属性

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.html');
 }
</script>

<p><button type=button onclick="openNew()">新しいウィンドウを開く</button></p>

■関連項目

Sponsors