form属性

button要素のform属性は、button要素が所属するform要素を指定する属性。

ブラウザ対応

構文

<button type="ボタンのタイプ" form="所属するform要素のid属性値">ボタン名</button>

所属するform要素のid属性値

button要素が所属するform要素のid属性値を指定する。

要点

  • form属性は、button要素が所属するform要素を指定する属性である。
  • button要素にform属性を指定しない場合は、直近の祖先要素であるform要素が所属フォームとなる。
  • form属性は、HTML5にて新たに導入された属性である。

サンプルコード

送信ボタン

<button type="submit" form="sampleFormId">送信</button>
<form id="sampleFormId"></form>

<button form="sampleFormId">送信</button>
<form id="sampleFormId"></form>

リセットボタン

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

汎用ボタン

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

サンプル

HTMLソースコード

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

実際の表示