web-dev-qa-db-fra.com

Est-il valide d'avoir un formulaire HTML dans un autre formulaire HTML?

Est-ce que c'est valide HTML d'avoir les éléments suivants:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

Ainsi, lorsque vous soumettez "b", vous n'obtenez que les champs du formulaire interne. Lorsque vous soumettez "a", vous obtenez tous les champs moins ceux de "b".

Si ce n'est pas possible, quelles solutions de contournement pour cette situation sont disponibles?

htmlweb-standardsstandards-compliance
304
FlyByQuestionGuy

A. Ce n'est pas valide HTML ni XHTML

Dans la spécification officielle W3C XHTML, la section B. "Éléments interdits" indique que:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

Comme pour l'ancien HTML 3.2 spec , la section relative à l'élément FORMS indique que:

"Chaque formulaire doit être inclus dans un élément FORM. Il peut y avoir plusieurs formulaires dans un seul document, mais l'élément FORM ne peut pas être imbriqué."

B. La solution de contournement

Il existe des solutions de contournement utilisant JavaScript sans qu'il soit nécessaire d'imbriquer des balises de formulaire.

"Comment créer un formulaire imbriqué." (malgré le titre, il s’agit de ) non balises de formulaire imbriquées, mais une solution de contournement JavaScript).

Réponses à cette question StackOverflow

Remarque: Bien que l'on puisse duper les validateurs du W3C pour passer une page en manipulant le DOM via un script, ce n'est toujours pas légal HTML . Le problème avec l'utilisation de telles approches est que le comportement de votre code n'est plus garanti entre les navigateurs. (puisque ce n'est pas standard)

353
GeneQ

Si quelqu'un trouve cet article, voici une excellente solution sans avoir besoin de JS. Utilisez deux boutons de soumission avec des attributs de nom différents dans la langue de votre serveur. Vérifiez que le bouton de soumission a été activé car un seul d'entre eux sera envoyé au serveur.

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

Le côté serveur pourrait ressembler à ceci si vous utilisez php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
48
Andreas

HTML 4.x et HTML5 n'autorisent pas les formulaires imbriqués, mais HTML5 autorisera une solution de contournement avec l'attribut "formulaire" ("propriétaire du formulaire").

En ce qui concerne HTML 4.x, vous pouvez:

  1. Utilisez un (des) formulaire (s) supplémentaire (s) avec uniquement des champs cachés et JavaScript pour définir ses entrées et soumettre le formulaire.
  2. Utilisez CSS pour aligner plusieurs formulaires HTML afin de ressembler à une seule entité, mais je pense que c'est trop difficile.
24
Nishi

Comme d'autres l'ont dit, ce n'est pas du HTML valide.

Il semble que vous fassiez cela pour positionner les formulaires visuellement les uns dans les autres. Si tel est le cas, il suffit de créer deux formulaires distincts et d'utiliser CSS pour les positionner.

13
user64075

Non, la spécification HTML stipule qu'aucun élément FORM ne doit contenir un autre élément FORM.

7
David Grant

utilisez plutôt une méthode javascript personnalisée dans l'attribut action du formulaire!

par exemple

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>
6
Andreas Niedermair

Une possibilité est d'avoir un iframe dans la forme externe. L'iframe contient la forme interne. Veillez à utiliser la balise <base target="_parent" /> à l'intérieur de la balise head de l'iframe pour que le formulaire se comporte comme une partie de la page principale.

5
Robin Manoli

Vous pouvez répondre à votre propre question très facilement en entrant le code HTML dans le W3 Validator . (Il comporte un champ de saisie de texte, vous n'aurez même pas à mettre votre code sur un serveur ...)

(Et non, ça ne va pas valider.)

5
Christian Studer

non, voir w3c

4
tliff

Non, ce n'est pas valide. Mais une "solution" peut être la création d’une fenêtre modale en dehors de la forme "a" contenant la forme "b".

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

Cela peut être facilement fait si vous utilisez bootstrap ou matérialisez css. Je fais cela pour éviter d'utiliser iframe.

2
Jonathas Hortense

Si vous avez besoin que votre formulaire envoie/valide des données dans une base de données relationnelle 1: M, je vous recommande de créer un déclencheur de base de données "après insertion" sur la table A, qui insérera les données nécessaires pour la table B.

1
cbWrites