2009-02-17 21 views
257

E 'valido html per avere la seguente:È valido avere un modulo html all'interno di un altro modulo html?

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

Così, quando si invia "b" si ottiene 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?

+22

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 quel campo collegato senza dover lasciare il modulo corrente. Le sotto-forme annidate sarebbero un modo molto intuitivo per farlo (e l'interfaccia utente è implementata da diversi database desktop). – monotasker

+1

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 annidamento possono essere eseguiti ma NON è la risposta! – user1596138

+1

possibile duplicato di [Puoi annidare i moduli html?] (Http://stackoverflow.com/questions/379610/can-you-nest-html-forms) – user

risposta

301

A. Non è HTML valido nè XHTML

Nella specifica ufficiale del W3C XHTML, sezione B. "Elemento Divieti", si afferma che:

"form must not contain other form elements." 

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

Per quanto riguarda il vecchio HTML 3.2 spec, la sezione sull'elemento FORME afferma che:

"Ogni modulo deve essere racchiuso all'interno di un elemento FORM. Ci possono essere diversi forme in un unico documento, ma l'elemento modulo non può essere annidato "

B. La soluzione

Tuttavia, qualcuno ha già tentato quella a:.

"Come creare un formato nidificato."

http://blog.avirtualhome.com/how-to-create-nested-forms/

Nota:Anche se uno può ingannare i validatori W3C per passare una pagina manipolando il DOM tramite script, non è ancora HTML legale. Il problema con l'utilizzo di tali approcci è che il comportamento del tuo codice non è ora garantito nei browser. (poiché non è standard)

+62

standard pshh. La parola mi insulta –

+18

Per cosa è lo standard pshh? –

+436

"Pshh" in questo contesto, è apparentemente un'onomatopea usata per esprimere disgusto con un particolare corpo standard. Trasmette lo stesso significato di "sì giusto", "come se" o "qualsiasi cosa". All'inizio del 21 ° secolo, la parola divenne una frase a sé stante, in effetti un'intercettazione, è usata come blocco conversativo passivo-aggressivo strumento, lasciando il risponditore senza una risposta convincente.Si dice che il W3C abbia pubblicato un Working Draf che descrive i meriti dell'introduzione dell'elemento in una futura versione di HTML. – GeneQ

7

No, la specifica HTML indica che nessun elemento FORM deve contenere un altro elemento FORM.

6

preferisce utilizzare un javascript-metodo personalizzato all'interno l'attributo di azione della forma!

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

Proprio quello che stavo cercando! –

5

Si può rispondere alla tua domanda molto facilmente inserendo il codice HTML nel W3 Validator. (È dotato di un campo di testo, non sarà nemmeno bisogno di inserire il codice sul server ...)

(E no, non si convalidare.)

12

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

Sembra che lo stiate facendo per posizionare le forme visivamente l'una dentro l'altra. Se questo è il caso, basta fare due moduli separati e usare i CSS per posizionarli.

+2

+1 per fare due moduli separati e usare il CSS per posizionarli. – billrichards

+0

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

20

HTML 4.x & HTML5 non consente l'inserimento di moduli annidati, ma HTML5 consentirà una soluzione con l'attributo "form" ("proprietario del modulo").

Per quanto riguarda 4.x HTML è possibile:

  1. utilizzare un modulo aggiuntivo (s) con i campi solo nascosti & JavaScript per impostare il suo ingresso e di inviare il modulo.
  2. Usa i CSS per allineare diversi moduli HTML per assomigliare a una singola entità - ma penso che sia troppo difficile.
+1

Non so perché questo è stato down-votato. Qui il link alla sezione W3C dei proprietari di moduli: http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-owner – SooDesuNe

+4

@SooDesuNe il tuo link non è aggiornato, ecco la nuova http://www.w3.org/TR/html5/forms.html#form-owner – chiliNUT

6

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

40

Nel caso in cui qualcuno trovi questo post qui è un'ottima soluzione senza la necessità di JS. Utilizza due pulsanti di invio con attributi di nome diversi controlla nella lingua del server che è stato premuto il pulsante di invio perché 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 essere simile a questo, se si utilizza PHP:

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

Non è la stessa cosa, in questo caso si vuole andare alla stessa pagina e fare diverse azioni, con 2 moduli si può andare a pagine diverse E/O avere diverse informazioni inviate in ogni caso. –

+0

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

+0

Ho più pulsanti di cancellazione nel mio modulo (la ragione per cui stavo venendo qui considerando un modulo annidato) 1 per ogni record e un elenca la casella di controllo su ognuno per eseguire un'eliminazione di massa. La tua risposta mi ha spinto a ripensare al mio piano pensando ora che dovrei nominare i pulsanti per l'eliminazione individuale con un ID numerico e l'eliminazione collettiva come quella. Il php fa lo smistamento. – Chris

0

Se è necessario il modulo per inviare/commit dati a un 1: database relazionale M, mi sento di raccomandare la creazione di un "dopo l'inserimento" trigger DB sulla tabella A che inserirà i dati necessari per la tabella B.

1

No, non è valido. Ma una "soluzione" può essere la creazione di una finestra modale al di fuori della forma "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 il bootstrap o si materializza css. Lo sto facendo per evitare di usare iframe.