<button>タグ

<button>タグは、ボタン要素を定義します。<input type="button">もボタンを定義しますが、この<button>を使用すると、より細かな表現や、設定が可能です。

<button>と</button>の間に記述されたテキストや、画像にそのままボタンとしての役割を持たせることもできますし、CSSを使用して、ボタンの外観を変更することもできます。また、type属性を指定することで、送信ボタンとしても、リセットボタンとしても定義することができます。

name属性

name属性は、<button>要素に名前を付けます。ここで付けられた名前は、送信されたフォームを処理するプログラム等から参照されます。このname属性は、必須ではありませんが、指定しなければ不可能な表現もあります。

プログラムから参照されるので、名前の付け方には注意が必要です。当然、日本語はダメで、記号等も使わないでください。また、最初の文字が数字にならないようにし、スペースが必要な場合は、代わりに「_」（アンダーバー）を使用するようにしてください。そうしないとプログラムでの処理に問題が発生する場合があります。

フォームでのname属性は、<a>タグ等で使用されるname属性とは役割が異なるものです。

value属性

value属性を使用すると、ボタンがクリックされたときに、<form>タグのaction属性で指定されたプログラムに渡す値を指定することができます。

<input>でボタンを定義する際のvalue属性は、ボタンに表示されるラベルを変更するものでしたが、<button>タグのvalue属性は、ラジオボタンやチェックボックスのvalue属性と同様、プログラムが参照する値を指定するものですので、間違わないように気をつけてください。

type属性

type属性を使用すると、ボタンの役割を定義することができます。指定することのできる値は次のようになります。

それぞれのボタンの詳細については、それぞれ、送信ボタン、リセットボタン、ボタンを参照してください。

disabled属性

disabled属性を指定すると、ボタンを使用不可にします。ブラウザには表示されるが、クリックはできないボタンとなります。

入力例

入力例です。各属性の働きを確認してみてください。

button.html

<optgroup>

ページの先頭

<label>