Pouvez-vous imbriquer des formulaires html?

Le deuxième formulaire sera ignoré, voir l'extrait de WebKit par exemple:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

J'ai rencontré un problème similaire, et je sais que ce n'est pas une réponse à la question, mais cela peut aider quelqu'un avec ce genre de problème:
s'il est nécessaire de mettre les éléments de deux ou plusieurs formes dans une séquence donnée, le HTML5 <input> form attribut peut être la solution.

À partir de http://www.w3schools.com/tags/att_input_form.asp:

1. le formulaire attribut est nouveau en HTML5.
2. spécifie quel <form> Élément un <input> l'élément appartient à. La valeur de cet attribut doit être l'attribut id d'un <form> élément dans le même document.

Scénario:

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

La mise en Œuvre:

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

Ici Vous trouverez la compatibilité du navigateur.

HTML simple ne peut pas vous permettre de le faire. Mais avec javascript, vous pouvez le faire. Si vous utilisez javascript / jquery, vous pouvez classer vos éléments de formulaire avec une classe, puis utiliser serialize () pour sérialiser uniquement les éléments de formulaire pour le sous-ensemble des éléments que vous souhaitez soumettre.

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

Ensuite, dans votre javascript, vous pouvez le faire pour sérialiser les éléments class1

$(".class1").serialize();

Pour class2 vous pouvez faire

$(".class2").serialize();

Pour l'ensemble du formulaire

$("#formid").serialize();

Ou simplement

$("#formid").submit();

Si vous utilisez AngularJS, toutes les balises <form> à l'intérieur de votre ng-app sont remplacées à l'exécution par des directives ngForm conçues pour être imbriquées.

Dans les formes angulaires peuvent être imbriqués. Cela signifie que le formulaire externe est valide lorsque tous les formulaires enfants sont également valides. Cependant, les navigateurs n'autorisent pas l'imbrication des éléments <form>, donc Angular fournit la directive ngForm qui se comporte de manière identique à <form> mais peut être imbriquée. Cela vous permet d'avoir des formes imbriquées, ce qui est très utile lorsque utilisation de directives de validation angulaire dans des formulaires générés dynamiquement à l'aide de la directive ngRepeat. (source)

Comme Craig l'a dit, non.

Mais, concernant votre commentaire sur pourquoi:

Il peut être plus facile d'utiliser 1 <form> avec les entrées et le bouton" Update", et d'utiliser les entrées masquées avec le bouton "Submit Order" dans un autre <form>.

Une Autre façon de contourner ce problème, si vous utilisez un langage de script côté serveur qui permet de manipuler les données publiées, est de déclarer votre formulaire html comme ceci :

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

Si vous imprimez les données postées (j'utiliserai PHP ici), vous obtiendrez un tableau comme ceci:

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

, Alors vous pouvez simplement faire quelque chose comme :

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

Votre $_POST n'a plus que vos données "main form", et vos données de sous-formulaire sont stockées dans une autre variable que vous pouvez manipuler sera.

Espérons que cela aide!

Notez que vous n'êtes pas autorisé à imbriquer des éléments de formulaire!

Http://www.w3.org/MarkUp/html3/forms.html

Https://www.w3.org/TR/html4/appendix/changes.html#h-A.3.9 (la spécification html4 ne Note Aucun changement concernant les formulaires d'imbrication de 3.2 à 4)

Https://www.w3.org/TR/html4/appendix/changes.html#h-A.1.1.12 (la spécification html4 ne Note Aucun changement concernant les formulaires d'imbrication de 4.0 à 4.1)

Https://www.w3.org/TR/html5-diff/ (la spécification html5 ne Note Aucun changement concernant les formes d'imbrication de 4 à 5)

Https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms commentaires sur " cette fonctionnalité permet aux auteurs de contourner le manque de prise en charge des éléments de formulaire imbriqués.", mais ne cite pas où cela est spécifié, je pense qu'ils supposent que nous devrions supposer qu'il est spécifié dans la spécification html3 :)

Une solution de contournement simple consiste à utiliser un iframe pour contenir le formulaire "imbriqué". Visuellement, le formulaire est imbriqué mais du côté du code, il est complètement dans un fichier html séparé.

Même si vous pouviez le faire fonctionner dans un navigateur, il n'y a aucune garantie que cela fonctionnerait de la même manière dans tous les navigateurs. Ainsi, alors que vous pourriez être en mesure de l'obtenir pour fonctionner certains du temps, vous ne voudrais certainement pas être en mesure de l'obtenir pour fonctionner tous les du temps.

Vous auriez même des problèmes pour le faire fonctionner dans différentes versions du même navigateur. Donc, évitez d'utiliser cela.

Bien que je ne présente pas de solution aux formulaires imbriqués (cela ne fonctionne pas de manière fiable), je présente une solution de contournement qui fonctionne pour moi:

Scénario D'utilisation: une superform permettant de changer N éléments à la fois. Il a un bouton "Soumettre tout" en bas. Chaque élément veut avoir son propre formulaire imbriqué avec un bouton "Soumettre L'élément # N". Mais ne le peuvent pas...

Dans ce cas, on peut effectivement utiliser un seul formulaire, et ensuite le nom des touches est submit_1..submit_N et submitAll et le gérer côté serveurs, par seulement en regardant les paramètres se terminant par _1 si le nom du bouton était submit_1.

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

Ok, donc pas beaucoup d'invention, mais ça fait le travail.

A propos des formulaires d'imbrication: j'ai passé 10 ans un après-midi à essayer de déboguer un script ajax.

Ma réponse/exemple précédent ne tenait pas compte du balisage html, désolé.

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

Form_2 a constamment échoué en disant form_2 invalide.

Quand j'ai déplacé l'ajaxContainer qui produisait form_2 {[1] } de form_1, j'étais de retour en affaires. Il la réponse à la question de savoir pourquoi on pourrait nid formes. Je veux dire, vraiment, à quoi sert L'identifiant sinon pour définir quelle forme doit être utilisée? Il doit y avoir un mieux, slicker travailler autour.

Utilisez la balise de formulaire vide avant votre formulaire imbriqué

Testé et travaillé sur Firefox, Chrome

Non testé sur IE

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

Bien que la question soit assez ancienne et je suis d'accord avec @everyone que l'imbrication de la forme n'est pas autorisée en HTML

Mais ce quelque chose tous pourraient vouloir voir ceci

Où vous pouvez pirater (Je l'appelle un hack puisque je suis sûr que ce n'est pas légitime) html pour permettre au navigateur d'avoir un formulaire imbriqué

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

LIEN JS FIDDLE

Http://jsfiddle.net/nzkEw/10/

Aujourd'hui, je suis également coincé dans le même problème, et résoudre le problème que j'ai ajouté un contrôle utilisateur et
sur ce contrôle, j'utilise ce code

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

Et sur l'événement PreRenderComplete de la page appelez cette méthode

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

Je crois que cela va aider.

Vous pouvez également utiliser formaction=" " dans la balise button.

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

Cela serait imbriqué dans la forme originale en tant que bouton séparé.

Avant de savoir que je n'étais pas censé faire cela, j'avais des formulaires imbriqués dans le but d'avoir plusieurs boutons de soumission. Couru de cette façon pendant 18 mois, des milliers de transactions d'inscription, personne ne nous a appelé au sujet des difficultés.

Les formulaires imbriqués m'ont donné un identifiant pour analyser l'action correcte à prendre. N'a pas cassé jusqu'à ce que j'ai essayé d'attacher un champ à l'un des boutons et de valider s'est plaint. Ce n'était pas un gros problème pour le démêler-j'ai utilisé un stringify explicite sur la forme externe, donc ça n'avait pas d'importance soumettre et formulaire ne correspond pas. Ouais, ouais, aurait dû prendre les boutons d'une soumission à un onclick.

Le Point est qu'il y a des circonstances où ce n'est pas entièrement cassé. Mais "pas tout à fait cassé" est peut-être un standard trop bas pour tirer: -)

Non vous ne pouvez pas avoir une forme imbriquée. Au lieu de cela, vous pouvez ouvrir un Modal qui contient form et effectuer Ajax form submit.