Pouvez-vous imbriquer des formulaires html?

Est-il possible d'imbriquer des formulaires html comme celui-ci

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

pour que les deux formes fonctionnent? Mon ami a des problèmes avec cela, une partie des subFormœuvres, tandis qu'une autre partie n'en a pas.

En un mot, non. Vous pouvez avoir plusieurs formulaires dans une page, mais ils ne doivent pas être imbriqués.

Du projet de travail html5 :

4.10.3 Le form élément

Modèle de contenu:

Contenu de flux, mais sans descendants d'éléments de formulaire.

J'ai rencontré un problème similaire, et je sais que ce n'est pas une réponse à la question, mais cela peut être utile à 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 , l' attribut HTML5 <input> form peut être la solution.

Sur http://www.w3schools.com/tags/att_input_form.asp :

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

Scénario :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

Réalisation :

<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.

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;
}

Le html simple ne peut pas vous permettre de faire cela. 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 ces é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 de classe 1

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

Pour la classe 2, vous pourriez faire

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

Pour l'ensemble du formulaire

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

ou simplement

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

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

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

Comme c'est 2019, je voudrais donner une réponse mise à jour à cette question. Il est possible d'obtenir le même résultat que les formes imbriquées, mais sans les imbriquer. HTML5 a introduit l'attribut de formulaire. Vous pouvez ajouter l'attribut de formulaire à des contrôles de formulaire en dehors d'un formulaire pour les lier à un élément de formulaire spécifique (par id).

https://www.impressivewebs.com/html5-form-attribute/

De cette façon, vous pouvez structurer votre html comme ceci:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

L'attribut formulaire est pris en charge par tous les navigateurs modernes. IE ne le prend pas en charge, mais IE n'est plus un navigateur, mais plutôt un outil de compatibilité, comme l'a confirmé Microsoft lui-même: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser-so-stop-using-it-as-your-default / . Il est temps que nous cessions de nous soucier de faire fonctionner les choses dans IE.

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

De la spécification html:

Cette fonctionnalité permet aux auteurs de contourner le manque de prise en charge des éléments de formulaire imbriqués.

Une autre façon de contourner ce problème, si vous utilisez un langage de script côté serveur qui vous 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 publiées (j'utiliserai PHP ici), vous obtiendrez un tableau comme celui-ci:

//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',
      ),
    );

Ensuite, vous pouvez simplement faire quelque chose comme:

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

Votre $ _POST a maintenant seulement vos données de "formulaire principal", et vos données de sous-formulaire sont stockées dans une autre variable que vous pouvez manipuler à volonté.

J'espère que cela t'aides!

Comme Craig l'a dit, non.

Mais, en ce qui concerne votre commentaire à pourquoi :

Il pourrait être plus facile d'utiliser 1 <form>avec les entrées et le bouton "Mettre à jour", et d'utiliser la copie des entrées cachées avec le bouton "Soumettre la commande" dans un autre <form>.

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

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (la spécification html4 ne note aucune modification concernant les formes d'imbrication de 3.2 à 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (la spécification html4 ne note aucune modification concernant les formes 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 commente "Cette fonctionnalité permet aux auteurs de contourner le manque de prise en charge des éléments de formulaire imbriqués", mais ne ne cite pas où cela est spécifié, je pense qu'ils supposent que nous devrions supposer que cela 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 se trouve dans un fichier html distinct.

Vous pouvez également utiliser formaction = "" à l'intérieur de la balise button.

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

Cela serait imbriqué dans le formulaire d'origine en tant que bouton séparé.

Même si vous pouviez le faire fonctionner dans un seul navigateur, rien ne garantit qu'il fonctionnerait de la même manière dans tous les navigateurs. Donc, bien que vous puissiez le faire fonctionner une partie du temps, vous ne pourrez certainement pas le faire fonctionner tout le temps.

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

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 superforme permettant de changer N éléments à la fois. Il a un bouton "Soumettre tout" en bas. Chaque élément souhaite avoir son propre formulaire imbriqué avec un bouton «Soumettre l'élément n ° N». Mais je ne peux pas ...

Dans ce cas, on peut effectivement utiliser une forme unique, et ensuite le nom des boutons soient submit_1.. submit_Net submitAllet le manipuler côté des serveurs, en ne regardant que params se terminant en _1si 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 vraiment une invention, mais ça fait l'affaire.

A propos des formes 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 échouait constamment en disant form_2 invalide.

Quand j'ai déplacé le ajaxContainer qui a produit form_2 <i>outside</i>de form_1, j'étais de retour dans les affaires. C'est la réponse à la question de savoir pourquoi on pourrait imbriquer des formes. Je veux dire, vraiment, à quoi sert l'ID sinon pour définir quel formulaire doit être utilisé? Il doit y avoir un meilleur travail, plus lisse.

Utilisez une 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 formulaire n'est pas autorisée en HTML

Mais ce quelque chose que tout le monde voudra peut-être voir

où vous pouvez pirater (je l'appelle un hack car je suis sûr que ce n'est pas légitime) html pour permettre au navigateur d'avoir une forme imbriquée

<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>

JS FIDDLE LINK

http://jsfiddle.net/nzkEw/10/

Non, vous ne pouvez pas avoir de formulaire imbriqué. Au lieu de cela, vous pouvez ouvrir un modal qui contient un formulaire et effectuer une soumission de formulaire Ajax.

Vraiment pas possible ... Je ne pouvais pas imbriquer de balises de formulaire ... Cependant j'ai utilisé ce code:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

avec {% csrf_token %}et des trucs

et appliqué un peu de JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

Aujourd'hui, je suis également resté coincé dans le même problème, et résoudre le problème, 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 vous aidera.

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

Les formulaires imbriqués m'ont donné une pièce d'identité à analyser pour prendre la bonne mesure. Je n'ai pas cassé jusqu'à ce que j'essaie de joindre un champ à l'un des boutons et que Validate se soit plaint. Ce n'était pas un gros problème pour le démêler - j'ai utilisé une chaîne explicite sur le formulaire externe, donc peu importait la soumission et le formulaire ne correspondait pas. Ouais, ouais, j'aurais dû prendre les boutons d'une soumission à un onclick.

Le fait est qu'il y a des circonstances où il n'est pas entièrement cassé. Mais "pas entièrement cassé" est peut-être une norme trop basse pour laquelle tirer :-)