2022-10-11 formタグは入れ子にできない

formタグは入れ子にできない

ふとformタグを入れ子構造で組んだらアレってなって調べた

<!DOCTYPE html>

<head></head>

<body>
  <form>
    <p>
      <input type='text'>
    </p>
    <form>
      <p>
        <input type='text'>
      </p>
    </form>
  </form>
</body>

なんと内側のformタグがいなくなってしまっています。

ブラウザに解釈されるときに内側のformタグは消えてしまっていた。

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

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

閉じられていない form 要素があるのに <form> が現れたら無視余分な </form> が現れたら無視と規定されています(§8.2.5.4.7 The “in body” insertion mode)。

ref. html - formタグの入れ子とブラウザーの解釈 - スタック・オーバーフロー

そのような仕様になっているようだ。