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

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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 7

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 8

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 9

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?

Answer 10

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>