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

不要讓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 2

如果我沒有記錯的話，你可以把東西放在<輸入>條目之間的<形式>，如果這就是你擔心。只需將表單跨越包含來自當前兩種表單的輸入的頁面的整個部分，並將其他非表單內容放入新的<表格>中。

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

使用JavaScript，您可以獲取所有表單元素，並將它們全部合併爲相同的表單並同時提交。那種你在找什麼？

Answer 5

只需使用單一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 6

要有用，您的輸入標籤需要名稱屬性。

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

您可以在第二個窗體添加隱藏字段，並填寫這些字段（使用java腳本）與提交前的第一個表單值。

Answer 8

我不知道你的實際需求，但它是明智的和標準的做法（如我所知）具有一種形式並將元素放入..可能會將它們放置在div/table/css等內。然後按使用JavaScript，你可以得到控制值。即G：

document.getElementById("controlid").value 

或

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

希望這會給一些想法

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

我知道這個問題有多大，但無論如何，這裏是使用HTML5 Form屬性的答案。 （屬性不是一個標籤。）
只是要一個id爲您的主要形式（即ID =「主表」）
而在你的其他投入（不使用另一種形式的標籤）把新的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">