Search code examples
htmlstandards-compliance

Is it valid to have an HTML form inside another HTML form?


Is it valid HTML to have the following:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

So when you submit "b" you only get the fields within the inner form. When you submit "a" you get all fields minus those within "b".

If it isn't possible, what workarounds for this situation are available?


Solution

  • A. It is not valid HTML nor XHTML

    In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:

    "form must not contain other form elements."

    http://www.w3.org/TR/xhtml1/#prohibitions

    As for the older HTML 3.2 spec, the section on the FORMS element states that:

    "Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."

    B. The Workaround

    There are workarounds using JavaScript without needing to nest form tags.

    "How to create a nested form." (despite title this is not nested form tags, but a JavaScript workaround).

    Answers to this StackOverflow question

    Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)