Is it valid html to have the following:
<form action="a">
<input.../>
<form action="b">
<input.../>
<input.../>
<input.../>
</form>
<input.../>
</form>
So when you submit "b" you only get the fields within the inner form. When you submit "a" you get all fields minus those within "b".
If it isn't possible, what workarounds for this situation are available?
No, the HTML specification states that one FORM element may not contain another.
rather use a custom javascript-method inside the action attribute of the form!
eg
<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>
You can answer your own question very easily by inputting the HTML code into the W3 Validator. (It features a text input field, you won't even have to put your code on a server...)
(And no, it won't validate.)
Even if it is allowed (which it isn't), it creates a very confusing user interface.
For a user, a form is a form and you should not change this, unless you want to add confusion.
A. It is not valid HTML nor XHTML
In the official W3C XHTML specification, Section B. "Element Prohibitions", states that:
"form must not contain other form elements."
http://www.w3.org/TR/xhtml1/#prohibitions
As for the older HTML 3.2 spec, the section on the FORMS element states that:
"Every form must be enclosed within a FORM element. There can be several forms in a single document, but the FORM element can't be nested."
B. The Workaround
However, someone has already attempted that at:
"How to create a nested form."
http://blog.avirtualhome.com/2008/10/01/how-to-create-a-nested-form/
Note: Although one can trick the W3C Validators to pass a page by manipulating the DOM via scripting, it's still not legal HTML. The problem with using such approaches is that the behavior of your code is now not guaranteed across browsers. (since it's not standard)
I actually have a very similar issue here where i want 3 forms on the same page , and the page is being built on the fly using PHP.
The way the tables are built are left to right and there are 3 checkboxes per line with different submit buttons.
Now to build the tables top to bottom it means reading the data 4 times which will slow it down (though it is possible) and will also risk some checkboxes not lining up correctly.
I basically wanted to have the 3 forms on the table with a submit button on the bottom of each column so i would need a way to have them nested within each other and submit all of the checkboxes ticked in that column.
I know it sounds complex , but the alternative is a slower site build and id like it to be as fast as possible.
HTML 4.x & HTML5 disallow nested forms, but HTML5 will allow a workaround with "form" attribute ("form owner").
As for HTML 4.x you can: