30654


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

[code]

    <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>
[/code]

  
[![画像の説明をここに入力](https://i.stack.imgur.com/QgRet.png)](https://i.stack.imgur.com/QgRet.png)

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

[code]

    <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>
[/code]

[![画像の説明をここに入力](https://i.stack.imgur.com/GV0Hi.png)](https://i.stack.imgur.com/GV0Hi.png)

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


CC BY-SA 3.0
2016-11-24T11:16:40.897
30651
2016-11-28T03:02:22.203
2016-11-28T03:02:22.203
19705
19705
question
html
formタグの入れ子とブラウザーの解釈


`form` タグの中にほかの `form` を入れてはいけません。W3
標準に[こう書かれています](https://www.w3.org/TR/xhtml1/#prohibitions)

> `form`  
>  must not contain other `form` elements.

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


CC BY-SA 3.0
2016-11-24T11:53:09.167
30652
2016-11-24T11:53:09.167
18621
30651
answer


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

さて、既に言及されているように、 **form要素の入れ子は禁止されています**
([§4.10.3](https://www.w3.org/TR/html5/forms.html#the-form-element))。

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

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

と規定されています([§8.2.5.4.7 The "in body" insertion
mode](https://www.w3.org/TR/html5/syntax.html#parsing-main-inbody))。

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

[code]

    <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>
    
[/code]

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

[code]

    <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>
    
[/code]

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


CC BY-SA 3.0
2016-11-24T12:28:21.283
30654
2016-11-25T03:58:36.337
2016-11-25T03:58:36.337
8000
8000
30651
answer