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

331

Ist es gültig, HTML zu haben, um 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 der inneren Form. Wenn Sie "a" einreichen, erhalten Sie alle Felder abzüglich der Felder in "b".

Welche Problemumgehungen sind für diese Situation verfügbar, wenn dies nicht möglich ist?

html  web-standards  standards-compliance 
— allyourcode
quelle
28
Es scheint mir, dass dies tatsächlich eine sehr häufige Anforderung ist, die von Datenbankschnittstellen bekannt ist. Wenn ein Formular Tabelle A aktualisiert und diese Tabelle ein mit Tabelle B verknüpftes Feld enthält, möchten wir häufig eine Möglichkeit, Einträge dafür zu aktualisieren oder zu erstellen verknüpftes Feld, ohne das aktuelle Formular verlassen zu müssen. Verschachtelte Unterformulare wären eine sehr intuitive Möglichkeit (und die Benutzeroberfläche wird von mehreren Desktop-Datenbanken implementiert).
— Monotasker
3
Es ist nicht gültig. Es gibt Problemumgehungen, aber Sie sollten eine andere Methode verwenden, um diese Daten zu erhalten. Stellen Sie sich ein Formular vor, in dem alle Daten an ein PHP-Mail-Skript gesendet werden, das dann einen Teil (den Teil von a) als eine E-Mail und einen Teil (den Teil von b) als eine andere E-Mail sendet. Oder in eine Datenbank oder was auch immer Sie mit diesen Daten tun. Verschachtelungsformen können durchgeführt werden, aber es ist NICHT die Antwort!
2
— Benutzer
Die Frage ist gut, aber eine schnelle Google-Suche (ohne auf die bereitgestellten Links zu klicken) zeigt, ob Formulare in Formularen gültig sind oder nicht. Ich persönlich mochte die Antwort von @Andreas.
— Jarett Lloyd

Antworten:

380

A. Es ist weder HTML noch XHTML gültig

In der offiziellen W3C XHTML-Spezifikation heißt es in Abschnitt B. "Elementverbote":

"form must not contain other form elements."

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

In Bezug auf die ältere HTML 3.2-Spezifikation heißt es im Abschnitt über das FORMS-Element:

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

B. Die Problemumgehung

Es gibt Problemumgehungen mit JavaScript, ohne dass Formular-Tags verschachtelt werden müssen.

"So erstellen Sie ein verschachteltes Formular." (Trotz des Titels handelt es sich nicht um verschachtelte Formular-Tags, sondern um eine JavaScript-Problemumgehung.)

Antworten auf diese StackOverflow-Frage

Hinweis: Obwohl man die W3C-Validatoren dazu bringen kann, eine Seite zu übergeben, 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 für alle Browser garantiert ist. (da es nicht Standard ist)

— GeneQ
quelle
4
Siehe meinen Kommentar oben ... Dies ist eine wundervolle Antwort, eine großartige Lösung, aber eine schreckliche Praxis. Sie können genau das Gleiche mit weniger Aufwand tun, indem Sie alle Daten an ein PHP-Skript senden und von dort aus teilen und an ihre eigenen Ziele senden. Obwohl Sie die Frage beantwortet haben, was großartig ist, ist es nur eine schlechte und sinnlose Übung, weil Sie es in kürzerer Zeit richtig machen können.
53

Für den Fall, dass jemand diesen Beitrag hier findet, ist dies eine großartige Lösung, ohne dass JS erforderlich ist. Verwenden Sie zwei Senden-Schaltflächen mit unterschiedlichen Namensattributen. Überprü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 ungefähr so ​​aussehen, wenn Sie PHP verwenden:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>
— Andreas
quelle
Dies ist nicht dasselbe. In diesem Fall möchten Sie zur gleichen Seite gehen und verschiedene Aktionen ausführen. Mit 2 Formularen können Sie zu verschiedenen Seiten gehen und / ODER jeweils unterschiedliche Informationen senden lassen.
— Luis Tellez
Sie können eine PHP-Datei als Wrapper verwenden und jede gewünschte Datei einfügen, wenn Sie den Code in verschiedenen Dateien haben möchten. Anstelle von (Echo "gespeichert!";) Könnten Sie also schreiben (einschließlich "a.php";)
— Andreas
Ich habe mehrere Löschschaltflächen in meinem Formular (der Grund, warum ich hierher gekommen bin, um ein verschachteltes Formular in Betracht zu ziehen) 1 für jeden Datensatz und ein Listen-Kontrollkästchen für jeden Datensatz, um einen Massenlöschvorgang durchzuführen. Ihre Antwort hat mich veranlasst, meinen Plan zu überdenken. Ich denke jetzt, dass ich die Schaltflächen für das einzelne Löschen mit einer numerischen ID und dem Massenlöschen als solches benennen sollte. Ich lasse PHP die Sortierung machen.
— Chris
@Andreas ist auf dem Geld. Dies ist die natürliche Lösung, um zu variieren, wie Formulareingaben interpretiert werden. Wenn Sie Post / Redirect / Get verwenden, kann das Ziel ebenfalls variieren. Wenn Sie jedoch auf der Serverseite nicht die Flexibilität haben, Ihre Aktionen in einem einzigen 'aORb'-Endpunkt zu kombinieren, stecken Sie leider mit einem Hack fest, fürchte ich.
27

HTML 4.x und HTML5 verbieten verschachtelte Formulare, HTML5 ermöglicht jedoch eine Problemumgehung mit dem Attribut "form" ("Formulareigentümer").

Für 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 zu senden.
  2. Verwenden Sie CSS, um mehrere HTML-Formulare so auszurichten, dass sie wie eine einzelne Entität aussehen - aber ich denke, das ist zu schwierig.
— Nishi
quelle
1
Ich bin mir nicht sicher, warum dies abgelehnt wurde. Hier der Link zum W3C-Bereich der Formularbesitzer: w3.org/TR/html5/…
— SooDesuNe
5
@SooDesuNe Ihr Link ist veraltet, hier ist der neue w3.org/TR/html5/forms.html#form-owner
— chiliNUT
13

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

Es hört sich so an, als würden Sie dies tun, um die Formulare visuell ineinander zu positionieren. Wenn dies der Fall ist, führen Sie einfach zwei separate Formulare aus und positionieren Sie sie mithilfe von CSS.

— user64075
quelle
1
Dies ist, was ich dachte, ich würde für meine Website brauchen, aber ich würde ein Beispiel dafür lieben, wie das geht.
— Brian Peterson
8

Nein, die HTML-Spezifikation besagt, dass kein FORMElement ein anderes FORMElement enthalten soll .

— David Grant
quelle
5

Sie können Ihre eigene Frage sehr 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.)

— Christian Studer
quelle
5

Verwenden Sie lieber 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>
— Andreas Niedermair
quelle
5

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

— Robin Manoli
quelle
1

Nein, es ist nicht gültig. Eine "Lösung" kann jedoch darin bestehen, ein modales Fenster außerhalb des Formulars "a" zu erstellen, das das Formular "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>

Dies ist einfach möglich, wenn Sie Bootstrap verwenden oder CSS materialisieren. Ich mache das, um die Verwendung von Iframe zu vermeiden.

— Jonathas Hortense
quelle
0

Eine Nicht-JavaScript-Problemumgehung zum Verschachteln von Formular-Tags:

Weil du es zulässt

alle Felder abzüglich der Felder innerhalb von "b".

Wenn Sie "a" senden, funktioniert Folgendes mit normalen Webformularen ohne ausgefallene JavaScript-Tricks:

Schritt 1. Platzieren Sie jedes Formular auf einer eigenen Webseite.

Schritt 2. Fügen Sie an jeder Stelle, an der dieses Unterformular angezeigt werden soll, einen Iframe ein.

Schritt 3. Gewinn.

Ich habe versucht, eine Code-Playground-Website zu verwenden, um eine Demo zu zeigen, aber viele von ihnen verbieten das Einbetten ihrer Websites in Iframes, selbst innerhalb ihrer eigenen Domain.

— ADJenks
quelle
-1

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" in Tabelle A zu erstellen, der die erforderlichen Daten für Tabelle B einfügt.

— cbWrites
quelle
-2

Nein, es ist nicht gültig, aber Sie können Ihre innere Formposition auf der HTMLmit Hilfe CSSund jQueryVerwendung austricksen. Erstellen Sie zuerst ein Container-Div in Ihrem übergeordneten Formular und dann an einer anderen Stelle auf der Seite das Div mit Ihrem untergeordneten (inneren) Formular:

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

Geben Sie Ihrem Container div eine stabile Wärme

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

Dank Trick die "other_form" Position relativ zu Container Div.

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS: Du musst mit Zahlen spielen, damit es schön aussieht.

— Jaroslaw Varkhol
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.