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

Question

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 1

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)

Solution 2

In case someone find this post here is a great solution without the need of JS. Use two submit buttons with different name attributes check in your server language which submit button was pressed cause only one of them will be sent to the server.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

The server side could look something like this if you use php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>

Solution 3

HTML 4.x & HTML5 disallow nested forms, but HTML5 will allow a workaround with "form" attribute ("form owner").

As for HTML 4.x you can:

1. Use an extra form(s) with only hidden fields & JavaScript to set its input's and submit the form.
2. Use CSS to line up several HTML form to look like a single entity - but I think that's too hard.

Solution 4

As others have said, it is not valid HTML.

It sounds like your are doing this to position the forms visually within each other. If that is the case, just do two separate forms and use CSS to position them.

Solution 5

No, the HTML specification states that no FORM element should contain another FORM element.

View more solutions

Comments

[SooDesuNe]

Not sure why this was down-voted. Here the link to the W3C section of form owners: w3.org/TR/html5/…

[Admin]

See my comment up above.... This is a wonderful answer, great work-around, but a terrible practice. You can do the exact same thing with less hassle submitting all the data to a PHP script and dividing and sending to their own destinations from there. Although, you did answer the question which is great, it's just a bad and pointless practice because you could do it the right way in less time.

[Luis Tellez]

This is not the same, in this case you want to go to the same page and do different actions, with 2 forms you can go to different pages And/ OR have different information sent in each case.

[chiliNUT]

@SooDesuNe your link is out of date, here is the new one w3.org/TR/html5/forms.html#form-owner

[Andreas]

You could use a php file as wrapper and include any file you want if you want the code in different files. So instead of (echo "stored!";) you could write (include "a.php";)

[CodingInTheUK]

I have multiple delete buttons in my form (the reason i was coming here considering a nested form) 1 for each record and a list checkbox on each to do a bulk delete. Your response has prompted me to rethink my plan im thinking now that i should name the buttons for the individual delete with a numeric id and the bulk delete as that. Il make php do the sorting.

[Admin]

@Andreas is on the money. This is the natural solution to vary how form input is interpreted. If you use Post/Redirect/Get then the destination can vary also. However, if you don't have the flexibility on the server side to combine your actions into a single 'aORb' endpoint then I think you're stuck with a hack I'm afraid.

[Brian Peterson]

This is what I was thinking I would need for my website,but would love an example of how to do this.

[picklepirate28]

What if the methods are different though? If I need a POST method for one form and a GET method for another it won't work.

[AxelTheGerman]

@delivey probably a bit late for you, but the documentation linked by @Szel also shows a formmethod attribute see developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…