Is het geldige html om het volgende te hebben:
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
Dus wanneer u “b” indient, krijgt u alleen de velden binnen het binnenste formulier. Wanneer u “a” invoert, krijgt u alle velden minus die binnen “b”.
Als het niet mogelijk is, welke oplossingen voor deze situatie zijn dan beschikbaar?
Antwoord 1, autoriteit 100%
A. Het is geen geldige HTML of XHTML
In de officiële W3C XHTML-specificatie staat in sectie B. “Elementverboden”, dat:
"form must not contain other form elements."
http://www.w3.org/TR/xhtml1/#prohibitions
Wat betreft de oudere HTML 3.2-specificatie,
de sectie over het FORMS-element stelt dat:
“Elk formulier moet worden ingesloten in een
FORM-element. Er kunnen er meerdere zijn
formulieren in één document, maar de
FORM-element kan niet worden genest.”
B. De oplossing
Er zijn tijdelijke oplossingen voor het gebruik van JavaScript zonder dat formuliertags hoeven te worden genest.
“Een genest formulier maken.”(ondanks de titel zijn dit geengeneste formuliertags, maar een JavaScript-oplossing).
Antwoorden op deze StackOverflow-vraag
Opmerking:Hoewel men de W3C-validators kan misleiden om een pagina door te geven door de DOM te manipuleren via scripting, is het nog steeds geen legale HTML. Het probleem met het gebruik van dergelijke benaderingen is dat het gedrag van uw code nu niet gegarandeerd is voor alle browsers. (omdat het niet standaard is)
Antwoord 2, autoriteit 14%
Als iemand dit bericht hier vindt, is dit een geweldige oplossing zonder dat JS nodig is. Gebruik twee verzendknoppen met verschillende naamattributen. Controleer in uw servertaal op welke verzendknop is gedrukt, want er wordt er maar één naar de server verzonden.
<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>
De serverkant kan er ongeveer zo uitzien als je php gebruikt:
<?php
if(isset($_POST['save']))
echo "Stored!";
else if(isset($_POST['delete']))
echo "Deleted!";
else
echo "Action is missing!";
?>
Antwoord 3, autoriteit 7%
HTML 4.x & HTML5 staat geneste formulieren niet toe, maar HTML5 staat een tijdelijke oplossing toe met het kenmerk “form” (“form owner”).
Voor HTML 4.x kunt u:
- Gebruik (een) extra formulier(en) met alleen verborgen velden & JavaScript om de invoer in te stellen en het formulier in te dienen.
- Gebruik CSS om verschillende HTML-formulieren op één lijn te brengen zodat ze eruitzien als een enkele entiteit, maar ik denk dat dat te moeilijk is.
Antwoord 4, autoriteit 3%
Zoals anderen al hebben gezegd, is het geen geldige HTML.
Het klinkt alsof je dit doet om de formulieren visueel in elkaar te positioneren. Als dat het geval is, doe dan twee afzonderlijke formulieren en gebruik CSS om ze te positioneren.
Antwoord 5, Autoriteit 2%
Nee, de HTML-specificatie stelt aan dat nee FORMelement een ander FORM-element moet bevatten.
Antwoord 6
Een mogelijkheid is om een iframe in de buitenvorm te hebben. De IFRAME bevat het innerlijke formulier. Zorg ervoor dat u de BASE TARGET VAN DE <base target="_parent" />TAG in de koptag van de IFRAME om het formulier te laten gedragen als onderdeel van de hoofdpagina.
Antwoord 7
U kunt uw eigen vraag zeer eenvoudig beantwoorden door de HTML-code in te voeren naar de W3 Validator . (Het bevat een tekstinvoerveld, u hoeft niet eens uw code op een server te plaatsen …)
(en nee, het zal niet valideren.)
Antwoord 8
Gebruik eerder een aangepaste JavaScript-methode in het actieattribuut van het formulier!
bijv.
<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>
Antwoord 9
nee,
zie w3c
Antwoord 10
Nee, het is niet geldig. Maar een “oplossing” kan zijn om een modaal venster te maken buiten formulier “a” dat het formulier “b” bevat.
<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>
Het kan gemakkelijk worden gedaan als je bootstrap gebruikt of css materialiseert.
Ik doe dit om het gebruik van iframe te vermijden.
Antwoord 11
Een niet-JavaScript-oplossing voor het nesten van formuliertags:
Omdat je toestaat
alle velden minus die binnen “b”.
bij het indienen van “a”, zou het volgende werken, met behulp van gewone webformulieren zonder fancy JavaScript-trucs:
Stap 1. Zet elk formulier op zijn eigen webpagina.
Stap 2. Voeg een iframe in waar u dit subformulier wilt laten verschijnen.
Stap 3. Winst.
Ik heb geprobeerd een code-playground-website te gebruiken om een demo te laten zien, maar veel van hen verbieden het insluiten van hun websites in iframes, zelfs binnen hun eigen domein.
Antwoord 12
Als tijdelijke oplossing kunt u formaction-kenmerk op de verzendknop. En gebruik gewoon verschillende namen voor uw invoer.
<form action="a">
<input.../>
<!-- Form 2 inputs -->
<input.../>
<input.../>
<input.../>
<input type="submit" formaction="b">
</form>
<input.../>
Antwoord 13
Als u uw formulier nodig heeft om gegevens in te dienen/vast te leggen in een 1:M relationele database, raad ik u aan een “after insert” DB-trigger te maken op tabel A die de benodigde gegevens voor tabel B zal invoegen.