Reputation: 39
I searched around on the site before posting so I hope this isn't a duplicate, but this has been a question that has been bothering me.
Why doesn't HTML allow nested forms (without JS)? I have seen that it doesn't allow nested forms, but never why they are not allowed. To me, it doesn't make sense why they aren't allowed, especially if each form routes to two different actions. Why is this?
Upvotes: 1
Views: 805
Reputation: 791
I can understand why it seems like this might work...
Think about HTML code in general; you open a <tag>
and close the </tag>
. Most of the tags can contain multiple other tags, right? The header tag holds tags for the <title>
, <meta data>
, etc., and the <body>
tag wraps a whole bunch of stuff together before you see the </body>
tag. Some tags have different rules; like the <img>
tag which stands alone. The <form>
tag falls into one of those tags with "different rules".
A <form>
is actually part of a script. It is presented on the HTML page to your site visitors as a means of gathering information. Once the site visitor clicks on the submit button, the <form>
sends the information to it's related script to be processed. All of the <form>
tags, whether they are <input>
values, <checkboxes>
, or <password>
fields, are bundled between the opening and closing </form>
tags.
Every <form></form>
sends information to a seperate script. So, a script that logs the user in would need one <form></form>
and a script that allows the user to change his password would be another <form></form>
. If you want the script to handle both options, then you would have to code your script to process all of those bits of information.
In summary, a <form></form>
cannot be nested because they function as a User Interface to gather information that will be processed by a script stored on your websites' server.
Upvotes: 1
Reputation: 2411
The reasoning behind this is because the <form>
tag expects an event action to be specified and having one form within another form would only cause problems because each form is expecting a different event to occur which could cause unexpected results with submit buttons because their default event to fire is whatever event has been specified in your form action.
The being said, you can have multiple <form>
tags on a page, just not nested.
EDIT You can also read the W3C documentation on the form element here: https://www.w3.org/MarkUp/html3/forms.html
One of the first thing it says is: **
Note you are not allowed to nest FORM elements!
**
Upvotes: 2
Reputation: 10850
HTML doesn't all nested forms because they would cause more problems than they solve.
Forms in HTML are built for single HTTP requests. If you submit a parent form, should you submit the child form as fields in the parent form to the parent action? Or should the child fields be submitted to the child action as well? How do you handle the responses to both of these requests? Which response do you render? What if the parent submit fails and the child succeeds? How do you handle this in the response markup?
Any of these answers are handled in script rather than markup.
If the fields are required in the parent form, that should be part of its form as a single encapsulated way to represent the data needed for a single request. Any nested form is its own request and should be encapsulated as such.
Upvotes: 3