Can You Nest HTML Forms

Can you nest html forms?

In a word, no. You can have several forms in a page but they should not be nested.

From the html5 working draft:

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

How do you overcome the HTML form nesting limitation?

I would implement this exactly as you described: submit everything to the server and do a simple if/else to check what button was clicked.

And then I would implement a Javascript call tying into the form's onsubmit event which would check before the form was submitted, and only submit the relevant data to the server (possibly through a second form on the page with the ID needed to process the thing as a hidden input, or refresh the page location with the data you need passed as a GET request, or do an Ajax post to the server, or...).

This way the people without Javascript are able to use the form just fine, but the server load is offset because the people who do have Javascript are only submitting the single piece of data needed. Getting yourself focused on only supporting one or the other really limits your options unnecessarily.

Alternatively, if you're working behind a corporate firewall or something and everybody has Javascript disabled, you might want to do two forms and work some CSS magic to make it look like the delete button is part of the first form.

Are nested forms valid in HTML5?

The HTML5 document does mention it in the section you link above:

Content model

Flow content, but with no form element descendants.

"Content model" means "what this element may contain". So no, nested forms are not allowed.

Form inside a form, is that alright?

Though you can have several <form> elements in one HTML page, you cannot nest them.

solution for nested forms

No you can't have nested forms but there is a simple solution to your problem.

<form action="" method="post">
    <input type="submit" name="action" value="action1" />
    <input type="submit" name="action" value="action2" />
</form>

If you use PHP this code will handle your form submissions:

//if user clicks on the first submit button, action1 is triggered
if (isset($_POST['action']) && $_POST['action'] == 'action1') {
    // do something    
}

//if user clicks on the second submit button, action2 is triggered    
if (isset($_POST['action']) && $_POST['action'] == 'action2') {
    // do something else
}

ps: As I see you work with C# and .NET, this would be translated into:

public class ExampleController : Controller
{
    ....

    [HttpPost]
    public ActionResult Index(string action)
    {

        if (!string.IsNullOrEmpty(action) == "action1") {
            // Do something
        }

        if (!string.IsNullOrEmpty(action) == "action2") {
            // Do something
        }
    }

    ...
}

Is it valid to have a html form inside another html form?

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)

With nested HTML forms, is it possible to target which one's content is transmitted upon submit?

Like others have said...nested forms aren't allowed.

However, that doesn't mean some browsers won't do something with such. In the example that you have presented, the browser appears to be ignoring the second <form> tag in a similar fashion to how an unknown tag (i.e. <notAValidTag>) is also ignored. Since JavaScript also doesn't allow for embedded form collections, the best way to ensure that FormB's information is submitted is to make it no longer a nested form. This will break up your markup and UI into more distinct sections which may be beneficial from a UX perspective as well.

Can I nest form tags in other form tags?

No, nested forms are forbidden.

---

This is expressed in the HTML 4.01 DTDs as:

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

— http://www.w3.org/TR/html4/interact/forms.html#h-17.3

This means A FORM has a mandatory start tag, mandatory end tag and can contain anything in %block or SCRIPT, except other FORMs.

---

XML DTDs aren't as expressive as SGML DTDs so in XHTML this rule is specified only in the human readable text of the specification:

form must not contain other form elements.

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

---

HTML 5 isn't an SGML application and doesn't have an official machine readable description of the language. It also expresses this rule in text:

Content model:

Flow content, but with no form element descendants.

— http://www.w3.org/TR/html5/forms.html#the-form-element

---

Related Topics