Form Inside a Form, Is That Alright

Form inside a form, is that alright?

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

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)

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.

Laravel: How to open a form in an other form

This wouldn't really be Laravel's issue - you shouldn't be nesting a form within a form, as explained here: Form inside a form, is that alright?

If you really need to do something like this, you'd be better off making the submit(verifie) action an ajax call.

Very loosely:

View:

{!! form::open(['id' => 'foo']) !!}
...
<button id="bar"></>
...
{!! form::submit() !!}
{!! form::close() !!}

JS (jQuery):

$('#bar').on(click, function() {

    information = $(YOUR INPUT).val();

    $.ajax({
        url: YOUR ROUTE + information,
        type: GET,
        success: function(data) {
            // do something
        }
    });

});

You could even attach both actions to the form's submit button, and use preventDefault() to delay the done submit action until the verifie submit action has run.

Updated to add: you mention user registration - an ajax call within a form is how, for instance, twitter can check for a unique username as you type on their signup page

JavaScript this.form returns unexpected form

HTML forms cannot be nested. What happens here is the browser sees your first <form id="form1"> tag, but it ignores the nested <form id="deleteform"> tag.

Then it sees the </form> and closes the <form id="form1">. After that it sees the <form id="addfileform"> tag and starts a new form, which gets closed by the next </form>.

Then there is the last <input type="submit" value="send"> button, which is parsed as expected but is not inside any form at all.

Finally there is an extra </form> at the end which it ignores.

In other words, it's the same as if you'd written:

<form id="form1" action="default.asp">
    <input type="checkbox" name="deleter" value="somedocument.txt">somedocument.txt<br>
    <input type="checkbox" name="deleter" value="some_otherdocument.doc">some_otherdocument.doc<br>
    <input type="button" onclick="console.log(this.form); ajaxcall('delete.asp', this.form);" />
 </form>
<form id="addfileform" action="upload.asp">
    <input type="file" name="file"/>
    <input type="button" onclick="console.log(this.form); ajaxcall('upload.asp', this.form);" />
</form>
<input type="button" value="send" onclick="dataValidation(form1),"/>

One easy way to see when something like this happens is to use the DOM inspector in your browser. This shows the DOM that the browser generated from your HTML code - which will sometimes surprise you! You should also validate your HTML code as others have mentioned.

When you try console.log(document.getElementById('deleteform')), that logs undefined because as described above, your deleteform never made it into the DOM.

Is input well formed without a form ?

<input> without a <form> appears valid, yes (at least for html 4.01, look near the end of 17.2.1):

The elements used to create controls
generally appear inside a FORM
element, but may also appear outside
of a FORM element declaration when
they are used to build user
interfaces. This is discussed in the
section on intrinsic events. Note that
controls outside a form cannot be
successful controls.

Nested forms in Wicket: form breaks

The <form> tag of the inner form is transformed to <div>. Same should be the case for its closing tag.

Nesting <form> inside another <form> is invalid according to HTML specifications!

Check whether your markup is valid before passing it to Wicket. You must have only one issue - the nested <form>s. Fix everything else!

AngularJS nested froms, submit button not working

You could not have nested form on HTML, but angular does provide the ability to have them nested. For implementing the same thing you need to use ng-form directive.

Outer form will have ng-submit event, but the inner form would have ng-click event with button type="button", if you won't change the button type then it will call the parent form ng-submit method.

Demo Fiddle

ng-submit directive work only with form element, so you need to specify form tag for outer form, since you want ng-submit there.

---

Related Topics