web-dev-qa-db-fra.com

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>

afin que les deux formes fonctionnent? Mon ami a des problèmes avec ceci, une partie de subForm fonctionne, alors qu'une autre partie ne fonctionne pas.

htmlnested-forms
400
Levi

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

À partir du brouillon de travail html5 :

4.10.3 L'élément form

Modèle de contenu:

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

417
Craig

Le second formulaire sera ignoré, voir le 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;
}
85
Vitalii Fedorenko

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 placer les éléments de deux ou plusieurs formulaires dans une séquence donnée, l'attribut HTML5<input> form peut être la solution.

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

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

Scénario:

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_n2

La mise en oeuvre:

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

63
Cliff Burton

Plain html ne peut pas vous permettre de le faire. Mais avec javascript, vous pouvez faire cela . Si vous utilisez javascript/jquery, vous pouvez classer vos éléments de formulaire avec une classe, puis utiliser serialize () pour ne sérialiser que ces éléments de formulaire pour le sous-ensemble des éléments souhaités. 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 des éléments de classe 1

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

Pour class2 tu pourrais faire

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

Pour la forme entière

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

ou simplement

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

Si vous utilisez AngularJS, toutes les balises <form> de votre ng-app sont remplacées à l'exécution par les directives ngForm 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 le sont également. Cependant, les navigateurs n'autorisant pas l'imbrication d'éléments <form>, Angular fournit donc la directive ngForm qui se comporte de manière identique à <form> mais qui peut être imbriquée. Cela vous permet d’avoir des formulaires imbriqués, ce qui est très utile lors de l’utilisation de directives de validation angulaires dans des formulaires générés dynamiquement à l’aide de la directive ngRepeat. ( la source )

29
roufamatic

Comme Craig l'a dit, non.

Mais, en ce qui concerne votre commentaire sur pourquoi :

Il serait peut-être plus facile d’utiliser 1 <form> avec les entrées et le bouton "Mettre à jour" et d’utiliser les entrées masquées avec le bouton "Soumettre la commande" dans un autre <form>.

11
Jonathan Lonowski

Un autre moyen de contourner ce problème, si vous utilisez un langage de script côté serveur permettant de manipuler les données postées, consiste à déclarer votre formulaire HTML comme suit:

<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 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 ne contient plus que vos données de "formulaire principal" et vos données de sous-formulaire sont stockées dans une autre variable que vous pouvez manipuler à votre guise.

J'espère que cela t'aides!

10
Pierre

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#h-A.3.9 (la spécification html4 ne note aucune modification concernant les formulaires imbriqués 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 imbriqués de 4.0 à 4.1)

https://www.w3.org/TR/html5-diff/ (la spécification html5 n'indique aucune modification concernant les formulaires imbriqués de 4 à 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms comments to "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 que cela est spécifié dans la spécification html3 :)

8
Mark Peterson

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.

4
Ezion

Vous auriez même du mal à le faire fonctionner dans différentes versions du même navigateur. Alors évitez de l'utiliser.

2
MP.

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. Ainsi, même si vous pouvez le faire fonctionner certains du temps, vous ne pourrez certainement pas le faire fonctionner tout du temps.

2
Mike Hofer

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

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

Cela serait imbriqué dans le formulaire original en tant que bouton séparé. 

2
Chief Buddy

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

Scénario d'utilisation: Un superform permettant de changer N éléments à la fois. Il a un bouton "Soumettre tout" en bas. Chaque article veut avoir son propre formulaire imbriqué avec un bouton "Soumettre l'article n °". Mais ne peut pas ...

Dans ce cas, il est possible d'utiliser un seul formulaire, puis de nommer les boutons submit_1..submit_N et submitAll et de le gérer côté serveur, en regardant uniquement 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 vraiment une invention, mais ça fait le travail.

2
Peter V. Mørch

Utilisez une balise de formulaire vide avant votre formulaire imbriqué

Testé et travaillé sur Firefox, Chrome

Non testé sur I.E.

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

À propos des formes de nidification: un après-midi, j'ai passé 10 ans à essayer de déboguer un script ajax.

ma réponse précédente/exemple 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 invalide form_2.

Lorsque j'ai déplacé le conteneur ajaxContainer qui a généré le formulaire_2 <i>outside</i> du formulaire_1, j'étais de retour dans les affaires. C'est la réponse à la question de savoir pourquoi on pourrait imbriquer des formulaires. Je veux dire, vraiment, à quoi sert l'ID s'il ne faut pas définir quel formulaire doit être utilisé? Il doit y avoir un meilleur travail plus lisse. 

1
larry

Vraiment pas possible .... Je ne pouvais pas imbriquer des 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 d'autres choses

et appliqué certains 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
      }
  }
});
0
diogosimao

Comme nous sommes en 2019, j'aimerais donner une réponse à 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 pour former des contrôles en dehors d'un formulaire afin de 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 code 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" form="sub-form" value="Save"/>
    </div>

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

L'attribut de formulaire est pris en charge par tous les navigateurs modernes. IE ne prend pas cela en charge, mais IE n'est plus un navigateur, mais un outil de compatibilité, comme le confirme Microsoft lui-même: https://www.zdnet.com/article/Microsoft-security -chief-ie-n'est-pas-un-navigateur-so-stop-using-it-as-your-default- . Il est temps que nous cessions de nous préoccuper 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 de éléments de formulaire imbriqués.

0
Creative

Bien que la question soit assez ancienne et que je sois d’accord avec tous les pays, l’imbrication de formulaire n’est pas autorisée en HTML. 

Mais ce quelque chose que tous pourraient vouloir voir ceci

où vous pouvez pirater (je l'appelle un piratage depuis que 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>

JS FIDDLE LINK 

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

0
Viren