【HTML】form属性で離れた場所にある要素を使う方法

このページについて

このページではHTMLで使う事ができるform属性の使い方と機能を解説しています。

form属性はタグであるformタグに関連した内容となっています。まずは使えるタグの紹介からすると、buttonタグ/fieldsetタグ/inputタグ/labelタグ/meterタグ/selectタグ/textareaタグです。これらはformタグの中で使う事が多い物だったり、そうでなかったりしますが基本的にはformタグとセットで使うと覚えてしまっても問題ありません。

form属性は付与した要素がどこのフォームに属しているかを定義します。つまりformタグが複数ある場合でも、しっかりとform属性を付与してあればページのどこにボタンがあっても機能を全うできるというわけです。

form属性を書くときはその要素に対して属性を書くだけでOKなんですが、1つ注意する点があります。それは属するformのid属性と同じにする必要があると言う点です。サンプルはこんな感じ。

<form id="form1">
<input tyoe="text" name="name1">
</form>

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

このように、formタグのid属性とform属性の値が一致している必要があります。サンプルではbuttonタグを使いましたが、他のタグでも同様の書き方をすればOKです。

form属性はその要素が所属するフォームを指定する事で、formタグの中に居なくても機能を全うする事ができるようにする機能を持っています。formタグで使用するid属性と同じ名前を使いましょう。