form属性の概要
Webページから別のWebページにデータを送信するためにはform要素を使用して、送信フォームを作成するわけですが、 普通の送信フォームを作成する場合は、<form>～</form>の要素の中にinput要素やbutton要素などを配置します。
しかし、通常のフォームの仕様とは異なる設計をしないといけない場合が発生するかもしれません。 例えば入力要素をページ内で分散配置したい場合などです。 このような場合、入力要素を一つのform要素内に配置できないので、form要素にid属性値を設定しておいて、入力要素にform属性を持たせてform要素のid属性値に関連付けることができます。
form属性を使用した実機サンプルとサンプルコード
form属性の使い方を理解するために3つの実機サンプルを用意しました。それぞれの違いを確認してみてください。実際に送信ボタンを実行した結果は各サンプルのアウトプット欄に表示される仕組みになっています。
form要素内に全てのコントロール要素が配置された場合
これは至って普通の使い方です。
form要素内に入力要素が全て配置されているので問題なく動作します。
<form action="送信先ページのURL" method="GET">
<p><input type="text" name="namText1" value="テキスト1"></p>
<p><output id="idOutput1">アウトプット</output></p>
<p><input type="submit"></p>
</form>
form要素外に送信ボタン要素が配置された場合
問題はこの状態です。form要素の外に送信ボタン要素が配置されているので 送信機能が動作しません。
<form action="送信先ページのURL" method="GET">
<p><input type="text" name="namText2" value="テキスト2"></p>
<p><output id="idOutput2">アウトプット</output></p>
</form>
<p><input type="submit"></p>
form要素外の送信ボタン要素にform属性を利用して関連付けた場合
前項の機能しない送信ボタンの解決策がform属性の利用となります。
form要素の外に配置された入力要素(ここではinput要素のsubmit型)にform属性でform要素がもっているid属性値(ここではidForm3)を指定します。
この方法でform要素の外に配置された入力要素でも、そのフォームのグループ要素としての機能を持たせることが可能になります。
<form id="idForm3" action="送信先ページのURL" method="GET">
<p><input type="text" name="namText3" value="テキスト3"></p>
<p><output id="idOutput3">アウトプット</output></p>
</form>
<p><input type="submit" form="idForm3"></p>