it-swarm.com.de

Ist es gültig, ein HTML-Formular in einem anderen HTML-Formular zu haben?

Ist es für HTML gültig, Folgendes zu haben:

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

Wenn Sie also "b" einreichen, erhalten Sie nur die Felder innerhalb des inneren Formulars. Wenn Sie "a" einreichen, erhalten Sie alle Felder abzüglich der Felder innerhalb von "b".

Wenn es nicht möglich ist, welche Problemumgehungen für diese Situation sind verfügbar?

304

A. Es ist weder HTML noch XHTML gültig

In der offiziellen W3C XHTML-Spezifikation, Abschnitt B. "Element Prohibitions", heißt es:

"form must not contain other form elements."

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

Für das ältere HTML 3.2-Spezifikation heißt es im Abschnitt des FORMS-Elements:

"Jedes Formular muss in einem FORM-Element enthalten sein. Ein Dokument kann mehrere Formulare enthalten, das FORM-Element kann jedoch nicht verschachtelt sein."

B. Die Problemumgehung

Es gibt Problemumgehungen bei der Verwendung von JavaScript, ohne dass Formular-Tags verschachtelt werden müssen.

"So erstellen Sie ein verschachteltes Formular." (Trotz Titel ist dies nicht verschachtelte Formular-Tags, aber eine JavaScript-Problemumgehung ).

Antworten auf diese StackOverflow-Frage

Hinweis: Obwohl man die W3C-Validatoren überlisten kann, indem man das DOM per Skript manipuliert, ist es immer noch kein legaler HTML-Code. Das Problem bei der Verwendung solcher Ansätze besteht darin, dass das Verhalten Ihres Codes jetzt nicht mehr für alle Browser garantiert ist. (da es nicht Standard ist)

353
GeneQ

Für den Fall, dass jemand diesen Beitrag hier findet, ist dies eine großartige Lösung ohne die Notwendigkeit von JS. Verwenden Sie zwei Senden-Schaltflächen mit unterschiedlichen Namensattributen. Prüfen Sie in Ihrer Serversprache, welche Senden-Schaltfläche gedrückt wurde, da nur eine davon an den Server gesendet wird.

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

Die Serverseite könnte wie folgt aussehen, wenn Sie PHP verwenden:

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

In HTML 4.x und HTML5 sind verschachtelte Formulare nicht zulässig, in HTML5 ist jedoch eine Problemumgehung mit dem Attribut "form" ("Formulareigentümer") möglich.

Wie bei HTML 4.x können Sie:

  1. Verwenden Sie zusätzliche Formulare mit nur ausgeblendeten Feldern und JavaScript, um die Eingaben festzulegen und das Formular abzusenden.
  2. Verwenden Sie CSS, um mehrere HTML-Formulare so anzuordnen, dass sie wie eine einzige Entität aussehen - aber ich denke, das ist zu schwierig.
24
Nishi

Wie andere gesagt haben, ist es kein gültiges HTML.

Es klingt so, als würden Sie die Formulare visuell ineinander positionieren. Wenn dies der Fall ist, führen Sie einfach zwei separate Formulare aus und positionieren Sie sie mit CSS.

13
user64075

Nein, die HTML-Spezifikation besagt, dass kein FORM -Element ein anderes FORM -Element enthalten sollte.

7
David Grant

verwenden Sie stattdessen eine benutzerdefinierte JavaScript-Methode im Aktionsattribut des Formulars!

z.B

<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

Eine Möglichkeit besteht darin, einen Iframe in der äußeren Form zu haben. Der Iframe enthält die innere Form. Stellen Sie sicher, dass Sie das <base target="_parent" /> -Tag innerhalb des Head-Tags des Iframes, damit sich das Formular als Teil der Hauptseite verhält.

5
Robin Manoli

Sie können Ihre eigene Frage ganz einfach beantworten, indem Sie den HTML-Code in den W3 Validator eingeben. (Es verfügt über ein Texteingabefeld, Sie müssen nicht einmal Ihren Code auf einem Server ablegen ...)

(Und nein, es wird nicht validiert.)

5

nein, siehe w3c

4
tliff

Nein, es ist nicht gültig. Eine "Lösung" kann jedoch sein, ein modales Fenster außerhalb der Form "a" zu erstellen, das die Form "b" enthält.

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

Es kann leicht gemacht werden, wenn Sie bootstrap oder materialize css verwenden. Ich mache dies, um die Verwendung von iframe zu vermeiden.

2

Wenn Sie Ihr Formular zum Senden/Festschreiben von Daten an eine relationale 1: M-Datenbank benötigen, würde ich empfehlen, einen DB-Trigger "nach dem Einfügen" für Tabelle A zu erstellen, der die erforderlichen Daten für Tabelle B einfügt.

1
cbWrites