button要素

button要素は、ボタンを表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、パルパブル・コンテンツ、フォーム関連要素、ラベル付け可能フォーム関連要素、送信可能フォーム関連要素、form.elementsとfieldset.elementsのAPIのリストに含まれるフォーム関連要素。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツ。ただし、インタラクティブ・コンテンツを子孫要素に持つことはできない。
属性 グローバル属性。
autofocus属性、disabled属性、form属性、formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性、name属性、type属性、value属性。
ブラウザ対応

構文

<button>ボタン名</button>

button要素で括ったテキストが、ボタン上に表示するテキスト（ボタン名）となる。

要点

  • button要素は、ボタンを表す要素である。
  • type属性に、submit、reset、buttonを指定することで、送信ボタン、リセットボタン、汎用ボタンの３タイプのボタンを作れる。

属性

任意属性

属性 説明
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 属するform要素のid属性値を指定する属性。
formaction属性 フォームデータ送信先URLを指定する属性。
formenctype属性 送信データのエンコード・タイプを指定する属性。
formmethod属性 送信時のHTTPメソッドを指定する属性。
formnovalidate属性 入力内容の検証を無効にするかどうかを指定する属性。
formtarget属性 データ送信先の開き方を指定する属性。
name属性 名前を指定する属性。
type属性 ボタンのタイプを指定する属性。
value属性 値を指定する属性。

サンプルコード

送信ボタン

<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>

実際の表示