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

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 2

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

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 4

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 5

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 6

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

Answer 7

I donot 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 potition 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 8

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 9

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>