type属性

button要素のtype属性は、ボタンのタイプを指定する属性。

ブラウザ対応

構文

<button type="ボタンのタイプ">ボタン名</button>

ボタンのタイプ

submit
送信ボタン。
初期設定値。type属性を指定しない場合は、送信ボタンとなる。
reset
リセットボタン。
リセットボタンとは、送信フォームの入力欄をリセットするボタンのことで、初期設定値が空の入力欄は空に戻し、初期設定値がある入力欄は初期設定値に戻す。
button
汎用ボタン。
汎用ボタンは、JavaScriptなどの処理を呼び出すときなどに使う。

サンプルコード

送信ボタン

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

<button>送信</button>

type属性の初期設定値は、submitなので、type属性を指定しない場合も、送信ボタンとなる。

リセットボタン

<button type="reset">リセット</button>

汎用ボタン

<button type="button">汎用ボタン</button>

サンプル

HTMLソースコード

<form action="sample-button.php" method="post" target="_blank">
	<p>
		<label>
			１行テキスト入力欄：
			<input name="sampleName">
		</label>
	</p>
	<p>
		<button>type属性なし</button>
		<button type="submit">送信ボタン</button>
		<button type="reset">リセットボタン</button>
		<button type="button">汎用ボタン</button>
	</p>
</form>

実際の表示