如何组合html表单

如何组合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> 

---

如果我没弄错的话，你可以把东西放在a中的条目之间，如果这是你担心的。只需使表单覆盖页面的整个部分，其中包含来自当前两个表单的输入，并将其他非表单内容放入新表单中。

---

现在它们组合在一起了。

使用javascript，您可以获取所有表单元素，并将它们组合到同一个表单中，同时提交它们。这就是你想要的吗？

只需使用一个

表单

标签：

<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

（正如您在注释中指出的那样）

请注意，如果没有任何输入元素上的ID，此表单（以及您在问题中发布的表单）就不是很有用，因为如果没有ID，您将发现很难区分这些值

---

关于表单的外观-您应该使用CSS来设置不同元素的样式和位置。

为了有用，您的输入标记需要名称属性

使用分区和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>

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

.part1{float:left}
.part2{float:right}

CSS可以用来定位表单的每个部分

另一种选择是使用javascript，如下所示：

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

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

您可以在第二个表单中添加隐藏字段，并在提交前用第一个表单值填充这些字段（使用java脚本）。

我不知道您的实际要求，但建议使用一个表单并将元素放入其中，这是一种标准做法。。可以将它们放在div/table/css等中。然后使用javascript可以获得控制值。e、 g:

document.getElementById("controlid").value

或

---

希望这会给你一些想法

不要做两张表格。使用适当的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>

---

当然，根据您的需要调整示例。

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>

---

我知道这个问题有多老了，但下面是答案，使用HTML5表单属性（属性而非标记）。
只需为您的主窗体创建一个id（即id=“main form”）
在您的其他输入中（不使用其他表单标记），将新的HTML5表单属性（属性不是标记）与主表单id（即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"> 

---

您需要提供您试图完成的工作的其他详细信息。如果最终要合并它们，为什么要将它们分开？也许最好确保你的代码不生成两个表单。你说的“合并”是什么意思？为了做什么？我正在尝试组合成不同位置的表格。所以我可以一次发布所有的数据。你应该使用CSS来定位两个表单的字段，这就是CSS的作用。+1可以反转向下投票。在我看来，您提供的正是OP要求的内容。@Oded:我想OP希望他的表单出现在网页的不同部分。“这可不行！”吉姆·费尔——我认为OP根本没有明确他的意图。这是一个很好的猜测。
<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">