5

以下のような、formを入れ子にしたようなソースを書くと、「ページのソースを表示」で見ると、これと同じように表示されますが、DOM Explorerで見ると、以下のように、form2、form3が消えてしまいます。

<html>
 <head>
 </head>
 <body>
 <form id = "form1">
 <input type = "text" id = "tb1">
 <form id = "form2">
 <input type = "text" id = "tb2">
 <form id = "form3">
 <input type = "text" id = "tb3">
 </form>
 </form>
 </form>
 </body>
 </html>

画像の説明をここに入力

また、form1とform2の間に<form></form>を挿入すると、form2、form3は見えますが、<form></form>は消えてしまいます。

<html>
 <head>
 </head>
 <body>
 <form id = "form1">
 <input type = "text" id = "tb1">
 <form></form>
 <form id = "form2">
 <input type = "text" id = "tb2">
 <form id = "form3">
 <input type = "text" id = "tb3">
 </form>
 </form>
 </form>
 </body>

画像の説明をここに入力

この点について、どうしてこのような挙動をするのか、おわかりの方いるでしょうか。

2 件の回答 2

10

まず、「ページのソースを表示」で表示されるのは書いたままのHTMLであって、結果的にブラウザがどう解釈したのかは関係ありません。ブラウザが実際にパース処理を行い構築したDOMツリーが、「DOM Explorer」に表示されているものです。

さて、既に言及されているように、form要素の入れ子は禁止されています(§4.10.3)。

じゃあそういうHTMLを読ませるとどうなるのか。HTML5では

  • 閉じられていない form 要素があるのに <form> が現れたら無視
  • 余分な </form> が現れたら無視

と規定されています(§8.2.5.4.7 The "in body" insertion mode)。

これを踏まえて質問に書かれたHTMLを見てみましょう。

<html>
 <head>
 </head>
 <body>
 <form id = "form1"> --- form1開始
 <input type = "text" id = "tb1">
 <form id = "form2"> --- form1が閉じられていないので無視
 <input type = "text" id = "tb2">
 <form id = "form3"> --- form1が閉じられていないので無視
 <input type = "text" id = "tb3">
 </form> --- form1終了
 </form> --- 余分な閉じタグなので無視
 </form> --- 余分な閉じタグなので無視
 </body>
 </html>

結果として #form1 に全ての input が収まります。

<html>
 <head>
 </head>
 <body>
 <form id = "form1"> --- form1開始
 <input type = "text" id = "tb1">
 <form> --- form1が閉じられていないので無視
 </form> --- form1終了
 <form id = "form2"> --- form2開始
 <input type = "text" id = "tb2">
 <form id = "form3"> --- form2が閉じられていないので無視
 <input type = "text" id = "tb3">
 </form> --- form2終了
 </form> --- 余分な閉じタグなので無視
 </form>
 </body>

結果として #form1#tb1 が、#form2#tb2 #tb3 が収まります。

3

form タグの中にほかの form を入れてはいけません。W3 標準にこう書かれています

form
must not contain other form elements.

データの一部を送信したいなら、要素からデータを取り出して、Ajax で送信することをおすすめします。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。