2009-02-17 22 views
257

Czy to ważne html mieć następujące:Czy prawidłowe jest posiadanie formularza html w innym formularzu HTML?

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

Więc po przesłaniu „b” można dostać tylko pola w formularzu wewnętrznej. Kiedy przesyłasz "a", otrzymujesz wszystkie pola minus te w "b".

Jeśli nie jest możliwe, jakie obejścia dla tej sytuacji są dostępne?

+22

Wydaje mi się, że jest to bardzo popularna potrzeba, która jest znana z interfejsów db. Jeśli formularz aktualizuje tabelę A, a ta tabela zawiera pole powiązane z tabelą B, często chcemy mieć możliwość aktualizacji lub utworzenia wpisy dla tego połączonego pola bez konieczności opuszczania obecnego formularza. Zagnieżdżone pod-formy byłyby bardzo intuicyjnym sposobem (i jest to implementacja interfejsu użytkownika przez kilka baz danych). – monotasker

+1

To nie jest prawidłowe. Istnieją obejścia, ale powinieneś używać innej metody uzyskania tych danych. Rozważmy jedną formę wysyłania wszystkich danych do skryptu poczty PHP, który następnie przesyła część (część z a) jako jedną wiadomość e-mail, a część (część z b) jako inną wiadomość e-mail. Lub do bazy danych lub cokolwiek robisz z tymi danymi. Zagnieżdżanie formularzy może być wykonane, ale NIE jest to odpowiedź! – user1596138

+1

możliwy duplikat [Można zagnieździć formularze html?] (Http://stackoverflow.com/questions/379610/can-you-nest-html-forms) – user

Odpowiedz

301

A. To nie jest poprawny HTML ani XHTML

W oficjalnej specyfikacji W3C XHTML, sekcja B. Zakazy "element", stwierdza, że:

"form must not contain other form elements." 

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

chodzi o starszą HTML 3.2 spec, części dotyczącej element tworzy stwierdza:

„Każdy formularz musi być zamknięty w elemencie FORM. Nie może być kilka formularzy w jednym dokumencie, ale element formie nie mogą być zagnieżdżone „

B. obejścia

jednak ktoś już próbował, że pod adresem:.

"Jak tworzyć zagnieżdżone formularza."

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

Uwaga:Chociaż można oszukać Walidatory W3C, aby przekazać stronę poprzez manipulowanie DOM za pomocą skryptów, nadal nie jest to legalne HTML. Problem z zastosowaniem takich podejść jest taki, że zachowanie twojego kodu nie jest teraz gwarantowane w różnych przeglądarkach. (ponieważ nie jest standardem)

+62

standardów pshh. Słowo obraża mnie –

+18

Do czego służy standard pshh? –

+436

"Pshh" w tym kontekście jest najwyraźniej onomatopeą używaną do wyrażania obrzydzenia w odniesieniu do określonego organu normalizacyjnego. Podaje to samo znaczenie, co "tak, tak", "jak gdyby" lub "cokolwiek" .W początkach XXI wieku słowo stało się zdaniem samym w sobie, w efekcie interpelacją, służy jako bierno-agresywne blokowanie konwersacji narzędzie, pozostawiając respondenta bez przekonującej odpowiedzi.Słowo to mówi, że W3C opublikował Working Draf opisujący zalety wprowadzenia elementu w przyszłej wersji HTML. – GeneQ

7

Nie, specyfikacja HTML stwierdza, że ​​żaden element FORM nie powinien zawierać innego elementu FORM.

6

raczej użyć niestandardowego Javascript metodę wewnątrz atrybutu działania formularza!

np

<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

Właśnie tego szukałem! –

5

Możesz odpowiedzieć na własne pytanie bardzo łatwo poprzez wprowadzenie kodu HTML do W3 Validator. (Posiada pole wprowadzania tekstu, nie będzie nawet musiał umieścić swój kod na serwerze ...)

(I nie, to nie potwierdzi.)

12

Jak powiedzieli inni, nie jest to poprawny HTML.

Wygląda na to, że robisz to, aby wizualnie umieścić formularze w obrębie siebie. Jeśli tak jest, po prostu wykonaj dwa osobne formularze i użyj CSS, aby je umieścić.

+2

+1 do zrobienia dwóch oddzielnych formularzy i użycia CSS do ich umieszczenia. – billrichards

+0

To jest to, co myślałem, że będę potrzebował dla mojej strony internetowej, ale chciałbym, aby był przykładem tego, jak to zrobić. –

20

HTML 4.x & HTML5 blokuje zagnieżdżone formularze, ale HTML5 umożliwia obejście z atrybutem "formularz" ("właściciel formularza").

chodzi o 4.x HTML można:

  1. użyć dodatkowy formularz (S) tylko ukryte pola & JavaScript, aby ustawić jego wejście i złożyć formularz.
  2. Użyj CSS, aby wyrównać kilka formularzy HTML, aby wyglądać jak jeden obiekt - ale myślę, że to zbyt trudne.
+1

Nie wiem, dlaczego zostało to odrzucone. Tutaj link do sekcji W3C właścicieli formularzy: http://www.w3.org/TR/html5/association-of-controls-and-forms.html#form-owner – SooDesuNe

+4

@SooDesuNie Twój link jest nieaktualny, tutaj jest nowy http://www.w3.org/TR/html5/forms.html#form-owner – chiliNUT

6

Możliwe jest posiadanie elementu iframe wewnątrz zewnętrznej formy. Element iframe zawiera wewnętrzną formę. Użyj znacznika <base target="_parent" /> w tagu głównym elementu iframe, aby formularz zachowywał się jako część strony głównej.

40

Jeśli ktoś znajdzie ten wpis, jest to świetne rozwiązanie bez potrzeby JS. Użyj dwóch przycisków przesyłania z różnymi atrybutami nazw Sprawdź język serwera, który został wciśnięty, ponieważ tylko jeden z nich zostanie wysłany na serwer.

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

Bok serwer może wyglądać mniej więcej tak, jeśli używasz PHP:

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

To nie to samo, w tym przypadku chcesz przejść do tej samej strony i wykonać inne czynności, z 2 formularze można przejść do różnych stron i/LUB mają różne informacje wysyłane w każdym przypadku. –

+0

Możesz użyć pliku php jako opakowania i dołączyć dowolny plik, jeśli chcesz kod w różnych plikach. Zamiast więc (echo "przechowywane!";) Można napisać (w tym "a.php";) – Andreas

+0

Mam wiele przycisków usuwania w mojej formie (powód, dla którego tu przybyłem, biorąc pod uwagę zagnieżdżony formularz) 1 dla każdego rekordu i listy wyboru każdej z nich, aby wykonać masowe usuwanie. Twoja odpowiedź skłoniła mnie do ponownego przemyślenia mojego planu, teraz myślę, że powinienem nazwać przyciski dla pojedynczego usunięcia z identyfikatorem numerycznym i masowym usunięciem. Spraw, aby php dokonało sortowania. – Chris

0

Jeśli potrzebujesz formularza do zgłaszania/popełnić danych do 1: M relacyjnej bazy danych, polecam stworzenie "po wstawieniu" wyzwalacz DB w tabeli A, który wstawi niezbędne dane do tabeli B.

1

Nie, jest nieważny. Ale "rozwiązaniem" może być stworzenie modalnego okna poza formą "a" zawierającą formularz "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> 

Można to łatwo zrobić, jeśli używasz bootstrap lub materializuj css. Robię to, aby uniknąć używania elementu iframe.

Powiązane problemy