form要素

form要素は、フォーム関連要素の集まりを表す要素。送信フォームや入力フォームなどを作るときに使う。

カテゴリー フロー・コンテンツ、パルパブル・コンテンツ。
コンテキスト フロー・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フロー・コンテンツを内包できる。 ただし、子孫要素にform要素を含めることはできない。
属性 グローバル属性。
action属性、method属性、target属性、name属性、autocomplete属性、novalidate属性、accept-charset属性、enctype属性。
ブラウザ対応

構文

<form></form>

要点

  • form要素は、フォーム関連要素の集まりを表す要素である。
  • 送信フォームや入力フォームなどを作るときに使う。
  • input要素、textarea要素、select要素などのフォーム関連要素は、form要素内に配置するか、フォーム関連要素のform属性に、form要素のid属性値を指定することで関連付ける。

属性

任意属性

属性 説明
action属性 フォームデータ送信先URLを指定する属性。
method属性 送信時のHTTPメソッドを指定する属性。
target属性 フォームデータ送信先の開き方を指定する属性。
name属性 フォームの名前を指定する属性。
autocomplete属性 オートコンプリートを有効にするかどうかを指定する属性。
novalidate属性 フォームの入力内容の検証を無効にするかどうかを指定する属性。
accept-charset属性 文字エンコーディングを指定する属性。
enctype属性 送信データのエンコード・タイプを指定する属性。method属性がpostのときだけ使う。

サンプルコード

form要素内にフォーム関連要素を配置

<form action="sample.php" method="post">
	<p>入力欄： <input type="text" name="sampleInput"></p>
	<p><input type="submit" value="送信"></p>
</form>

form要素の外にフォーム関連要素を配置

<p>入力欄： <input type="text" name="sampleInput" form="sampleForm"></p>
<p><input type="submit" value="送信" form="sampleForm"></p>
<form action="sample.php" method="post" id="sampleForm"></form>

サンプル

form要素内にフォーム関連要素を配置

HTMLソースコード
<form action="sample-form.php" method="post" target="_blank">
	<p>サンプル入力欄： <input type="text" name="sampleInput"></p>
	<p><input type="submit" value="送信"></p>
</form>
実際の表示

サンプル入力欄：

form要素の外にフォーム関連要素を配置

HTMLソースコード
<p>サンプル入力欄： <input type="text" name="sampleInput" form="sampleForm"></p>
<p><input type="submit" value="送信" form="sampleForm"></p>
<form action="sample-form.php" method="post" target="_blank" id="sampleForm"></form>
実際の表示

サンプル入力欄：