html - 如何组合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> 中的 <input> 条目之间放置一些东西，如果这是你所担心的。只需使表单跨越页面的整个部分，其中包含来自当前两个表单的输入，并将其他非表单内容放入新的 <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> 

现在它们结合在一起了。

Answer 5

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

使用部门和 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 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

我知道这个问题有多老了，但无论如何，这就是答案，使用 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 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>