how to combine html forms

Question

How would i combined 2 html forms

I am trying to combined to forms that are in different position. so i can post all the data at once.

Here is a eg

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

</form> 


<form>
<input type="text">
<input type="text">
 </form> 

Answer 1

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.

Answer 2

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"> 

Answer 3

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>

Answer 4

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>

Answer 5

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.

Answer 6

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>.