Do NOT make 2 forms. Use proper HTML elements and CSS for layout. Feel free to use javascript to animate and add effects as needed.

By proper elements I mean you could do something like:

<form action="actions.php">
    <fieldset id="personalInfo">
        <legend>Personal Information:</legend>
        <input type="text" name="field1" />
        <input type="text" name="field2" />
        <input type="submit" name="button" id="button" value="submit" />
    </fieldset>

    <fieldset id="addressInfo">
        <legend>Address information:</legend>
        <input type="text" name="field3" />
        <input type="text" name="field4" />
    </fieldset>
</form>

And use CSS to place them.

#personalInfo {position: relative; top: 0px}
#addressInfo {position: relative; top: 200px;}

Of course, adapt the example to your needs.

You can add hidden fields in the second form and fill these fields (using java script) with the first form values before submission.

I do not know your actual requirement but it is advisable and standard practice(as what I know) to have one form and put the elements into that.. may be position them inside div/table/css etc. Then by using javascript you can get the control values. e.g:

document.getElementById("controlid").value

or

document.forms[0].Element[0].value    
document.forms[1].Element[0].value

hope this will give some idea

I know how old this question is, but here is the answer anyway, using HTML5 Form attribute. (an attribute not a tag.)
Just make an id for your main form (i.e. id="main-form")
And in your other inputs (without using another form tag) put the new HTML5 form attribute (an attribute not a tag) with a value of your main form id (i.e. form="main-form").
* However It s not supported in IE

<form action="actions.php" id="main-form">
  <input type="text">
  <input type="text">
  <input type="submit" name="button" id="button" value="submit" /> 
</form> 


<input type="text" form="main-form">
<input type="text" form="main-form"> 

If I m not mistaken, you can put stuff in between the <input> entries in a <form>, if that s what you re worried about. Just make the form span the entire portion of the page which contains the inputs from what are currently two forms, and put the other non-form stuff inside the new <form>.

<form action="actions.php">
<input type="text">
<input type="text">
<input type="text">
<input type="text">

 <input type="submit" name="button" id="button" value="submit" />

</form> 

Now they are combined.

To be useful, your input tags need name attributes.

Use divisions and CSS, like this:

<style>
.part1 {float: left}
.part2 {float: right}
</style>

<form action="actions.php">

<div class="part1">
<input name="input1" type="text">
<input name="input2" type="text">
<input type="submit" name="button" id="button" value="submit" />
</div>

<div class="part2">
<input name="input3" type="text">
<input name="input4" type="text">
</div>

</form>

CSS can be used to position each part of your form.

Another option would be to use javascript, like this:

<form name="form1" action="actions.php">
<input name="input1" type="text">
<input name="input2" type="text">
<input name="input3" type="hidden">
<input name="input4" type="hidden">
<input type="submit" name="button" id="button" value="submit" />

<form name="form2">
<input onBlur="document.form1.input3.value = this.value" name="input3" type="text">
<input onBlur="document.form1.input4.value = this.value" name="input4" type="text">
</form>

The inverse can also be done:

<form onSubmit="this.input3.value = document.form2.input3.value; this.input4.value = document.form2.input4.value;" name="form1" action="actions.php">
<input name="input1" type="text">
<input name="input2" type="text">
<input name="input3" type="hidden">
<input name="input4" type="hidden">
<input type="submit" name="button" id="button" value="submit" />

<form name="form2">
<input name="input3" type="text">
<input name="input4" type="text">
</form>

Just use a single form tag:

<form action="actions.php">
  <input type="text">
  <input type="text">
  <input type="submit" name="button" id="button" value="submit" />
  <input type="text">
  <input type="text">
</form> 

All the form data will be submitted in one call (as you indicate is what you want in one of your comments) to actions.php.

Note that this form (and the ones you posted in your question) are not very useful without any IDs on any of the input elements, as you will find it difficult to tell the values apart without one.

In regards to how the form look - you should use CSS to style and position the different elements.

With javascript you can grab all the form elements and combine them all into the same form and submit them at the same time. Is that kind of what you re looking for?

HTML lets you have other text and tags inside of a form. Just do this:

<form action="actions.php">
<input type="text">
<input type="text">
<input type="submit" name="button" id="button" value="submit" />
<input type="text">
<input type="text">
</form>