Pouvez-vous imbriquer des formulaires HTML?

Est-il possible d’imbriquer des formulaires HTML comme ceci

pour que les deux formes fonctionnent? Mon ami a des problèmes avec cela, une partie du sous- subForm fonctionne, alors qu’une autre partie ne fonctionne pas.

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

A partir du brouillon html5 :

4.10.3 L’élément de form

Modèle de contenu:

Contenu de stream, mais sans descendants d’élément de formulaire.

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

 bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr& 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 placer les éléments de plusieurs formulaires dans une séquence donnée, l’atsortingbut de form HTML5 form peut être la solution.

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

  1. L’ atsortingbut de formulaire est nouveau en HTML5.
  2. Spécifie à quel élément

    un élément appartient. La valeur de cet atsortingbut doit être l’atsortingbut id d’un élément

    dans le même document.

Scénario :

  • input_Form1_n1
  • input_Form2_n1
  • input_Form1_n2
  • input_Form2_n2

Mise en œuvre :

 

Vous trouverez ici la compatibilité du navigateur.

Le HTML simple ne peut pas vous permettre de faire ceci. 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 du sous-ensemble des éléments à soumettre.

 

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

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

Pour class2 tu pourrais faire

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

Pour toute la forme

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

ou simplement

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

Si vous utilisez AngularJS, toutes les balises

intérieur de votre ng-app sont remplacées à l’exécution par les directives ngForm conçues pour être nestedes.

Les formes angulars peuvent être nestedes. Cela signifie que le formulaire externe est valide lorsque toutes les fiches enfants sont également valides. Cependant, les navigateurs n’autorisent pas l’imbrication d’éléments

. Par conséquent, Angular fournit la directive ngForm qui se comporte de manière identique à

mais peut être nestede. Cela vous permet d’avoir des formulaires nesteds, ce qui est très utile lorsque vous utilisez des directives de validation angular dans des formulaires générés dynamicment à l’aide de la directive ngRepeat . ( source )

Comme l’a dit Craig, non.

Mais, en ce qui concerne votre commentaire quant à pourquoi :

Il peut être plus facile d’utiliser 1

avec les entrées et le bouton “Update”, et d’utiliser les entrées masquées avec le bouton “Submit Order” dans un autre

.

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, consiste à déclarer votre formulaire HTML comme ceci:

 

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

Vous pouvez alors faire quelque chose comme:

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

Votre $ _POST n’a plus que vos données “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!

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 (spécification html4 n’indique aucun changement concernant les formes d’imbrication de 3.2 à 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (spécification html4 n’indique aucun changement 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 commentaires à “Cette fonctionnalité permet aux auteurs de contourner le manque de prise en charge des éléments de formulaire nesteds.” ne pas citer 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 simple consiste à utiliser un iframe pour contenir le formulaire “nested”. Visuellement, le formulaire est nested mais du côté du code, il se trouve dans un fichier HTML distinct.

Même si vous pouviez le faire fonctionner dans un navigateur, rien ne garantit que cela fonctionnerait de la même manière dans tous les navigateurs. Donc, même si vous pouvez le faire fonctionner de temps en temps, vous ne pourrez certainement pas le faire fonctionner tout le temps.

Vous auriez même des problèmes à le faire fonctionner dans différentes versions du même navigateur. Alors évitez de l’utiliser.

Bien que je ne présente pas de solution aux formulaires nesteds (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 modifier N éléments à la fois. Il comporte un bouton “Envoyer tout” en bas. Chaque élément veut avoir son propre formulaire nested avec un bouton “Soumettre un élément # N”. Mais ne peut pas …

Dans ce cas, il est possible d’utiliser un seul formulaire, puis de submit_1 le nom des boutons submit_1 .. submit_N et submitAll et de le gérer côté serveur, en ne regardant que les parameters se terminant par _1 si le nom du bouton était submit_1 .

 

Ok, donc pas beaucoup d’invention, mais ça fait le boulot.

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 précédente / exemple n’a pas tenu compte du balisage HTML, désolé.

 


JS FIDDLE LINK

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

Aujourd’hui, je me suis également retrouvé bloqué dans le même problème et j’ai résolu le problème en ajoutant un contrôle utilisateur et
sur ce contrôle j’utilise ce code

 
'
'

et sur l’événement PreRenderComplete de la page appelez cette méthode

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

Je crois que cela aidera.

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

  

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