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

我知道这个问题有多久了，但无论如何，这里是使用 HTML5 Form 属性的答案。 （属性而不是标签。）
只需为您的主表单创建一个 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"> 

Answer 3

我不知道你的实际要求，但建议和标准做法（据我所知）有一种形式并将元素放入其中..可以将它们放置在 div/table/css 等内部。然后通过使用 javascript 你可以获取控制值。例如：

document.getElementById("controlid").value

或者

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

希望这会给一些想法

Answer 4

不要制作 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 5

如果我没记错的话，你可以在 之间放置一些东西。

中的条目，如果您担心的话。只需使表单跨越页面的整个部分，其中包含当前两个表单的输入，并将其他非表单内容放入新的 中。

Answer 6

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

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

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

Answer 9

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

Answer 10

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>