I want to have an HTML form embedded in another form like so:
I resolved this by having multiple submit buttons in the form. The buttons reference different CGIs and brought along the additional fields that I needed to handle conditional processing in the CGIs.
Code snippet
<form name="ep" method="put" action="/cgi-bin/edit_plan.pl">
[...]
<tr>
<td><input type="text" size="20" value="red" name="RN0"></td>
<td><input type="text" size="3" value="2" name="RT0"></td>
<td><input type="submit" value="Set row 0" name="RUN0"></td>
</tr>
[...] Add as many rows as needed, increment the 0 in all places Add an ending submit for overall processing instead of row processing: <input type="submit" value="Set ALL" name="SET">
</form>
It's not valid and will in my experience produce arbitrary results.
You could work around this using Javascript's DOM functions, taking form2 out of form1, putting it into the body, submitting it and putting it back into form1.
Edit: This won't be 100% right either, as it still has nested forms. As some of the answers point out, you have to have two separate forms. You can still do this using DOM magic but with a few more turns - .see Randolpho's answer.
As other people have said, you cannot nest form elements. The way I would handle something like this would be to use a single form and then group the elements with fieldsets. You can then add events to the submit buttons with javascript and enable/disable the input fields that should be submitted.
With jQuery, MooTools or any other framework this would be very simple. It will break if the client disables scripts, though.
A MooTools solution could look like this:
$('submit2').addEvent('click', function (e) {
e.stop();
$$('#fieldset1 input').set('disabled', 'disabled');
$('form').submit();
$$('#fieldset2 input').set('disabled', '');
}
Oh, and I trust you have a good reason for doing this, because to me it sounds suspiciously like bad usability :-)