331

È html valido avere quanto segue:

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

Quindi quando invii "b" ottieni solo i campi all'interno del modulo interno. Quando invii "a" ottieni tutti i campi meno quelli all'interno di "b".

Se non è possibile, quali soluzioni alternative per questa situazione sono disponibili?

html web-standards standards-compliance

— allyourcode
fonte

28

Mi sembra che questo sia in realtà un bisogno molto comune che è familiare dalle interfacce db - Se un modulo aggiorna la tabella A e quella tabella ha un campo collegato alla tabella B, spesso vogliamo un modo per aggiornare o creare voci per quello campo collegato senza dover lasciare il modulo corrente. I sottomoduli nidificati sarebbero un modo molto intuitivo per farlo (ed è l'interfaccia utente implementata da diversi database desktop).

— monotasker,

3

Non è valido Esistono soluzioni alternative ma è necessario utilizzare un altro metodo per ottenere questi dati. Considera un modulo che invia tutti i dati a uno script di posta PHP, che quindi invia parte (la parte da a) come una e-mail e parte (la parte da b) come un'altra e-mail. O in un database o qualunque cosa tu stia facendo con questi dati. I moduli di nidificazione possono essere eseguiti ma NON è la risposta!

2

possibile duplicato di Puoi nidificare i moduli HTML?

— utente

La domanda è buona, ma una rapida ricerca su Google (senza fare clic sui collegamenti forniti) rivela se i moduli all'interno dei moduli sono validi o meno. personalmente, mi è piaciuta la risposta @Andreas.

— Jarett Lloyd

380

R. Non è un codice HTML né XHTML valido

Nella specifica ufficiale XHTML del W3C, la sezione B. "Divieti di elementi" afferma che:

"form must not contain other form elements."

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

Per quanto riguarda le specifiche HTML 3.2 precedenti , la sezione sull'elemento FORMS afferma che:

"Ogni modulo deve essere racchiuso in un elemento FORM. Possono esserci più moduli in un singolo documento, ma l'elemento FORM non può essere nidificato."

B. La soluzione alternativa

Esistono soluzioni alternative che utilizzano JavaScript senza dover nidificare i tag del modulo.

"Come creare un modulo nidificato." (nonostante il titolo, questo non è un tag modulo nidificato, ma una soluzione alternativa a JavaScript).

Risposte a questa domanda StackOverflow

Nota: sebbene si possano indurre i validatori W3C a passare una pagina manipolando il DOM tramite script, non è ancora un codice HTML legale. Il problema con l'utilizzo di tali approcci è che il comportamento del codice non è ora garantito su tutti i browser. (poiché non è standard)

— GeneQ
fonte

4

Vedi il mio commento sopra ... Questa è una risposta meravigliosa, un ottimo modo per aggirare, ma una pratica terribile. Puoi fare esattamente la stessa cosa con meno problemi inviando tutti i dati a uno script PHP e dividendo e inviando da lì le loro destinazioni. Sebbene, hai risposto alla domanda che è grandiosa, è solo una pratica cattiva e inutile perché potresti farlo nel modo giusto in meno tempo.

53

Nel caso in cui qualcuno trovi questo post qui è un'ottima soluzione senza la necessità di JS. Utilizzare due pulsanti di invio con attributi di nome diversi, verificare nella lingua del server in cui è stato premuto il pulsante di invio, poiché solo uno di essi verrà inviato al server.

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

Il lato server potrebbe assomigliare a questo se usi php:

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

— Andreas
fonte

Questo non è lo stesso, in questo caso vuoi andare sulla stessa pagina e fare azioni diverse, con 2 moduli puoi andare su pagine diverse E / O avere informazioni diverse inviate in ciascun caso.

— Luis Tellez,

È possibile utilizzare un file php come wrapper e includere qualsiasi file desiderato se si desidera il codice in file diversi. Quindi invece di (echo "stored!";) Potresti scrivere (include "a.php";)

— Andreas,

Ho più pulsanti di eliminazione nel mio modulo (il motivo per cui stavo venendo qui considerando un modulo nidificato) 1 per ogni record e una casella di controllo di elenco su ciascuno per eseguire un'eliminazione in blocco. La tua risposta mi ha spinto a ripensare il mio piano, pensando ora che dovrei nominare i pulsanti per l'eliminazione individuale con un ID numerico e l'eliminazione in blocco come quella. Il php fa l'ordinamento.

— Chris,

@Andreas ha i soldi. Questa è la soluzione naturale per variare il modo in cui viene interpretato l'input del modulo. Se usi Posta / Reindirizzamento / Ricevi, la destinazione può variare anche. Tuttavia, se non hai la flessibilità sul lato server di combinare le tue azioni in un singolo endpoint "aORb", penso che tu sia bloccato con un hack, temo.

27

HTML 4.x e HTML5 non consentono i moduli nidificati, ma HTML5 consentirà una soluzione alternativa con l'attributo "form" ("proprietario del modulo").

Per quanto riguarda HTML 4.x puoi:

Utilizza uno o più moduli con solo campi nascosti e JavaScript per impostare i suoi input e inviare il modulo.
Usa i CSS per allineare diversi moduli HTML in modo che appaiano come una singola entità, ma penso che sia troppo difficile.

— Nishi
fonte

1

Non sono sicuro del perché sia stato votato in negativo. Ecco il link alla sezione W3C dei proprietari dei moduli: w3.org/TR/html5/…

— SooDesuNe

5

@SooDesuNe il tuo link non è aggiornato, ecco il nuovo w3.org/TR/html5/forms.html#form-owner

— chiliNUT

13

Come altri hanno già detto, non è un HTML valido.

Sembra che tu lo stia facendo per posizionare visivamente le forme l'una nell'altra. In tal caso, basta fare due moduli separati e utilizzare i CSS per posizionarli.

— user64075
fonte

1

Questo è quello che stavo pensando di cui avrei bisogno per il mio sito Web, ma mi piacerebbe un esempio di come farlo.

— Brian Peterson,

8

No, la specifica HTML afferma che nessun FORMelemento dovrebbe contenere un altro FORMelemento.

— David Grant
fonte

5

Puoi rispondere alla tua domanda molto facilmente inserendo il codice HTML nel W3 Validator . (Presenta un campo di input di testo, non dovrai nemmeno mettere il tuo codice su un server ...)

(E no, non verrà convalidato.)

— Christian Studer
fonte

5

piuttosto usa un metodo javascript personalizzato all'interno dell'attributo action del modulo!

per esempio

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

5

Una possibilità è quella di avere un iframe all'interno della forma esterna. L'iframe contiene la forma interna. Assicurati di utilizzare il <base target="_parent" />tag all'interno del tag head dell'iframe per far sì che il modulo si comporti come parte della pagina principale.

— Robin Manoli
fonte

4

no, vedi w3c

— tliff
fonte

1

No, non è valido Ma una "soluzione" può creare una finestra modale al di fuori del modulo "a" contenente il modulo "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>

Può essere fatto facilmente se si utilizza bootstrap o materializza css. Lo sto facendo per evitare di usare iframe.

— Jonathas Hortense
fonte

0

Una soluzione alternativa non JavaScript per i tag del modulo di nidificazione:

Perché lo consenti

tutti i campi meno quelli all'interno di "b".

quando invii "a", funzionerebbe quanto segue, usando i normali moduli web senza trucchi JavaScript fantasiosi:

Passaggio 1. Inserire ciascun modulo nella propria pagina Web.

Passaggio 2. Inserire un iframe nel punto in cui si desidera visualizzare questo modulo secondario.

Passaggio 3. Profitto.

Ho cercato di utilizzare un sito Web di giochi per codice per mostrare una demo, ma molti vietano di incorporare i loro siti Web negli iframe, anche all'interno del proprio dominio.

— ADJenks
fonte

-1

Se è necessario il modulo per inviare / eseguire il commit dei dati in un database relazionale 1: M, si consiglia di creare un trigger DB "dopo l'inserimento" nella tabella A che inserirà i dati necessari per la tabella B.

— cbWrites
fonte

-2

No, non è valido ma puoi ingannare la posizione della tua forma interiore HTMLcon l'aiuto CSSe l' jQueryutilizzo. Prima crea un div contenitore nel tuo modulo genitore e poi in qualsiasi altro posto nella pagina il div con il tuo modulo (interno) di tuo figlio:

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

Dai al tuo container un po 'di stabilità

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

Grazie a ingannare la posizione "other_form" relativamente al div container.

<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: dovrai giocare con i numeri per farlo sembrare bello.

— Yaroslav Varkhol
fonte

È valido avere un modulo HTML all'interno di un altro modulo HTML?

Una soluzione alternativa non JavaScript per i tag del modulo di nidificazione: