как объединить HTML формы

Question

Как бы я объединил 2 HTML формы

Я пытаюсь объединить формы, которые находятся в другом положении. так что я могу опубликовать все данные сразу.

Вот например

<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

Вы можете добавить скрытые поля во второй форме и заполнить эти поля (используя скрипт java) первыми значениями формы перед отправкой.

Answer 2

Я не знаю ваших реальных требований, но рекомендуется и стандартная практика (как то, что я знаю) иметь одну форму и помещать элементы в нее .. может быть помещать их в div / table / css и т.д. Затем с помощью Javascript вы можете получить контрольные значения. например:

document.getElementById("controlid").value

или

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

надеюсь, что это даст некоторую идею

Answer 3

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

Теперь они объединены.

Answer 4

Если я не ошибаюсь, вы можете поместить вещи между записями в , если вы об этом беспокоитесь. Просто сделайте так, чтобы форма охватывала всю часть страницы, которая содержит входные данные из двух форм, и поместите другие не-формы внутри нового .

Answer 5

Я знаю, сколько лет этому вопросу, но в любом случае вот ответ, используя атрибут формы HTML5. (атрибут, а не тег.)
Просто создайте идентификатор для своей главной формы (т.е. id = "main-form")
И в других ваших входных данных (без использования другого тега формы)поместите новый атрибут формы HTML5 (атрибут не тег) со значением вашего основного идентификатора формы (т. е. form = "main-form").
* Однако это не поддерживается в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 6

НЕ делайте 2 формы.Используйте правильные элементы HTML и CSS для макета.Не стесняйтесь использовать javascript для анимации и добавления эффектов по мере необходимости.

Под правильными элементами я имею в виду, что вы можете сделать что-то вроде:

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

И использовать CSS для их размещения.

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

Конечно, адаптируйте пример под свои нужды.

Answer 7

Чтобы быть полезными, ваши входные теги должны иметь атрибуты имени.

Используйте разделы и CSS, как это:

<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 можно использовать для позиционирования каждой части вашей формы.

Другой вариант - использовать javascript, например:

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

Обратное также можно сделать:

<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

Просто используйте один тег form:

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

Все данные формы будут отправлены в один вызов (как вы указали, что вы хотите в одном из ваших комментариев) на actions.php.

Обратите внимание, что эта форма (и те, которые вы разместили в своем вопросе) не очень полезны без каких-либо идентификаторов на любом из элементов ввода, так как вам будет сложно отличить значения без одного.

Относительно того, как выглядит форма - вы должны использовать CSS для стилизации и расположения различных элементов.

Answer 9

HTML позволяет вам иметь другой текст и теги внутри формы.Просто сделайте это:

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

С помощью javascript вы можете захватить все элементы формы, объединить их в одну форму и отправить их одновременно. Это то, что вы ищете?