内容を持つボタンを表す

button要素は、内容を持つボタンを表します。この要素によって、3タイプのボタン（送信ボタン、リセットボタン、汎用ボタン）を作成することができます。

button要素の内容について

input要素のボタンとは異なり、button要素では内容を持つことができます。

そして、このbutton要素の内容が、ボタン上に表示されることになります。

次の例では、送信するがボタン上に表示されます。

<button type="submit">送信する</button>

また、ボタンのラベルとして画像を使用することもできます。

<button type="submit"><img src="submit.gif" alt="送信する"></button>

type属性について

type属性は、ボタンのタイプを指定します。指定できる値は次の3つです。

submit

フォームの送信ボタンを作成します。この送信ボタンは、input要素の送信ボタンと同じ機能を持ちます。（既定値）

reset

フォームのリセットボタンを作成します。このリセットボタンは、input要素のリセットボタンと同じ機能を持ちます。

button

汎用的なボタンを作成します。この汎用ボタンは、input要素の汎用ボタンと同じ機能を持ちます。

name属性について

name属性は、フォーム部品を識別するための名前を指定します。

この属性の値は、value属性の値とセットで送信されることになります（type="submit" の場合）。

<button type="submit" name="submit1" value="1">送信する1</button>
<button type="submit" name="submit2" value="1">送信する2</button>

上記のように、複数の送信ボタンを配置する場合などに使用します。（クリックされたボタンにより処理を振分ける場合など）

value属性について

value属性は、送信される値を指定します。

この属性の値は、そのボタンがクリックされた時に送信されることになります（type="submit" の場合）。

form属性について

form属性は、そのフォーム部品をどのform要素に関連付けるかを指定します。この属性の値には、対応するform要素に指定したID名を記述します。

• この属性は、部品をform要素の外に配置する場合に使用します。（form要素の中に配置する場合は不要です）

<form method="post" action="example.cgi" id="example">
<p>お名前：<input type="text" name="name"></p>
</form>

<p><button type="submit" form="example">送信する</button>
<button type="reset" form="example">リセット</button></p>

• 古いブラウザでは、この機能に対応していない場合があります。

disabled属性について

disabled属性は、フォーム部品の無効化を指定します。

この属性が指定されたボタンは、クリックすることができなくなります。

<button type="submit" disabled>送信する</button>

form要素の設定を上書きする属性

formaction属性、formmethod属性、formenctype属性、formtarget属性、formnovalidate属性は、form要素の設定内容を上書きします（type="submit" の場合）。

• これらの属性は、複数の送信ボタンを配置して処理を振分ける場合などに使用します。

formaction属性

form要素のaction属性の設定を上書きします。次の例では、example2.cgi が優先されることになります。

<form method="post" action="example1.cgi">

<button type="submit" formaction="example2.cgi">送信する</button>

</form>

formmethod属性

form要素のmethod属性の設定を上書きします。次の例では、get が優先されることになります。

<form method="post" action="example.cgi">

<button type="submit" formmethod="get">送信する</button>

</form>

formenctype属性

form要素のenctype属性の設定を上書きします。次の例では、application/x-www-form-urlencoded が優先されることになります。

<form method="post" action="example.cgi" enctype="multipart/form-data">

<button type="submit" formenctype="application/x-www-form-urlencoded">送信する</button>

</form>

formtarget属性

form要素のtarget属性の設定を上書きします。次の例では、_self が優先されることになります。

<form method="post" action="example.cgi" target="_top">

<button type="submit" formtarget="_self">送信する</button>

</form>

formnovalidate属性

妥当性のチェックを行わないことを指定します（form要素のnovalidate属性の代わりに使用します）。次の例では、妥当性のチェックが行われないことになります。

<form method="post" action="example.cgi">

<button type="submit" formnovalidate>送信する</button>

</form>

• novalidate属性が指定されていないform要素は、妥当性のチェックが有効になっています。