niki12260714の日記

フリーランスのITエンジニアの呟き。

formを入れ子で使いたい場合の対応

オメェのシステム設計が悪いんだオラァ! と言われればそこまでなのですが、とある画面で、二つのformを内包するformを作りたいと思いました。
コードを書くと、こんな感じ。

<form id="親">
  <form id="子1">
    <intput type="text" id="child_txt_1">
  </form>
  <form id="子2">
    <intput type="text" id="child_txt_2">
  </form>
  <input type="button" value="送信">
</form>

それぞれ、子1,2で入力された値を親フォームのsubmit先で使いたい。
で、これをこのままにすると、formは入れ子が許されていないので、送信を押すと子1のformがsubmitされました。
困ったなぁと調べたところ、HTML5から、inputにform属性が追加になっていることが分かりました。
これを指定してあげると、formの中に入っていなくても、form属性で指定したidの方に属してくれることが分かりました。
なので、以下のように修正。

<form id="子1">
  <intput type="text" id="child_txt_2" form="親">
</form>
<form id="子2">
  <intput type="text" id="child_txt_2" form="親">
</form>
<form id="親">
  <input type="button" value="送信">
</form>

これで送信ボタン押してあげると、formが親に指定されている値がpostされます。