How to Nest Form Tags in Other Form Tags

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

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.

First form of nested form tags not responding to css display:none

There's never a good reason to have nested forms. Instead, use proper HTML syntax and adjust your jQuery code accordingly. Here's some valid HTML markup:

HTML

<form>
  <h5>Main Form</h5>
  <input type="text">
  <div class="one" style="display:none">
    <input type="text">
    <input type="text">
  </div>
  <div class="two" style="display:none">
    <input type="text">
    <input type="text">
  </div>
</form>

Let's say you want to reset all text inputs, checkboxes, radio buttons, and select menus in the first subsection. This would only take two simple lines of jQuery:

$(".one input, .one select").val("");
$(".one textarea").html("");

If you want to restore default values, you should store the values in the HTML markup using the data attribute. Here's an example: http://jsfiddle.net/pgNrF/3/

Form inside a form, is that alright?

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

multiple form tags in page or one form tag?

I feel like you've already answered your questions.

1. One sign up form = one form tags.
2. Multiple forms = many form tags.

Just don't nest them.

EDIT

Form tags are meant to hold a variety of fields (i.e. input tags) that you will eventually pass to a target URL using a GET or POST request.

Take this login form, for example:

<form action="login.php">
  <input id="name" type="text" name="name">
  <input id="passwd" type="password" name="passwd">
  <input type="submit" value="Login">
</form>

This has a login, a password, and a submit button. When the "Login" button (type = "submit") is pressed, the form will take that information and send it to another URL (in this case, "login.php", and that URL will handle the information accordingly (e.g. validate, sign you in, display captcha).

---

Related Topics