Embed an HTML <form> within a larger <form>?

You cannot have nested forms (source) so this will not work.

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

What you have described will not work.

One workaround would be to create two forms that are not nested. You would use hidden inputs for your original parent form that duplicate the inputs from your original nested form. Then use Javascript/DOM manipulation to hook the submit event on your "parent" form, copying the values from the "nested" form into the hidden inputs in the "parent" form before allowing the form to submit.

Your form structure would look something like this (ignoring layout HTML):

<form id="form1">
  <input name="val1"/>
  <input name="val2" type="hidden" />
  <input type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">
</form>
<form id="form2">
  <input name="val2"/>
  <input type="button" name="Submit Form 2 ONLY">
</form>

quite late but you can do this:

  <form id="form1"></form>
  <form id="form2"></form>
  <input ***form="form1"*** name="val1"/>
  <input ***form="form1"*** name="val2" type="hidden" />

  <input ***form="form2"*** name="val2"/>
  <input ***form="form2"*** type="button" name="Submit Form 2 ONLY">

  <input ***form="form1"*** type="button" name="Submit Form 1 data including form 2" 
         onsubmit="return copyFromForm2Function()">

The "form" element within the input tag has been added to get around the inability to nest forms.