Est-il valide un formulaire HTML dans une autre forme html?

StackOverflow https://stackoverflow.com/questions/555928

Question

est-il valide html avoir les éléments suivants: 

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

Ainsi, lorsque vous soumettez « b » vous obtenez seulement les champs de la forme intérieure. Lorsque vous soumettez « un » vous obtenez tous les champs moins ceux dans « b ».

S'il est impossible, que des solutions de contournement de cette situation sont disponibles?

Était-ce utile?

La solution

A. Il est pas valide HTML ni XHTML

Dans la spécification officielle du W3C XHTML, Section B: "Élément Interdictions", stipule que: 

"form must not contain other form elements."

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

En ce qui concerne l'ancien HTML 3.2 spec , la section de l'élément FORMES indique que:

  

«Chaque formulaire doit être joint dans un   élément FORM. Il peut y avoir plusieurs   formes dans un seul document, mais la   élément FORM ne peut pas être imbriquées. "

B. La solution

Il y a des solutions de contournement en utilisant JavaScript sans avoir besoin de balises forme de nid.

"Comment créer un emboîtées." (malgré le titre c'est pas balises emboîtées, mais une solution JavaScript).

réponses à cette question StackOverflow

Remarque: Bien que l'on peut tromper les validateurs du W3C pour passer d'une page en manipulant les DOM via un script, il est toujours pas HTML juridique. Le problème avec l'utilisation de telles approches est que le comportement de votre code est maintenant pas garanti dans les navigateurs. (Car ce n'est pas standard)

Autres conseils

En cas où quelqu'un trouve ce poste est une excellente solution ici sans avoir besoin de JS. Utilisez deux boutons de soumission avec le nom des attributs différents check dans votre langue du serveur qui a été pressé bouton de soumission seule cause un 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!";
?>

HTML 4.x et HTML5 désavouer les formulaires imbriqués, mais HTML5 permettra une solution de contournement avec l'attribut ( "forme propriétaire") "forme".

Comme pour HTML 4.x, vous pouvez:

  1. Utilisez un formulaire supplémentaire (s) avec des champs cachés et ne JavaScript pour définir de son entrée et soumettre le formulaire.
  2. Utilisez CSS pour aligner plusieurs formulaire HTML pour ressembler à une seule entité -. Mais je pense que c'est trop dur

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

On dirait que vous êtes en train de faire cela pour positionner les formes visuellement dans l'autre. Si tel est le cas, il suffit de faire deux formes distinctes et utiliser les CSS pour les positionner.

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

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

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

(Et non, ce ne sera pas validée.)

Une possibilité est d'avoir un iframe à l'intérieur de la forme extérieure. Le iframe contient la forme intérieure. Assurez-vous d'utiliser la balise <base target="_parent" /> dans la balise de tête de l'iframe pour rendre la forme se comportent comme une partie de la page principale.

non, voir w3c

Non, ce n'est pas valide. Mais une « solution » peut être la création d'une fenêtre modale en dehors de la forme « un » 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>

Il peut se faire facilement si vous utilisez bootstrap ou se matérialisent css. Je fais cela pour éviter d'utiliser iframe.

Si vous avez besoin de votre formulaire pour soumettre / valider les données à un 1:. M base de données relationnelle, je recommande la création d'un « après insertion » déclencheur DB sur la table A qui insérera les données nécessaires pour la table B

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top