表單內部的表單，好嗎？

Question

我們是否可以在另一個表單中有一個表單？這有什麼問題嗎？

Answer 1

雖然在一個HTML頁面中可以有多個<form>元素，但不能將它們嵌套。

Answer 2

是的。這是錯誤的。它不會工作，因爲它是錯誤的。大多數瀏覽器只會看到一種形式。

http://www.w3.org/MarkUp/html3/forms.html

Answer 3

號HTML明確禁止嵌套形式。

從HTML 5 draft：

內容模型： 流量的內容，但沒有表單元素後裔。

從HTML 4.01 Recommendation：

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

（注意 - （FORM）一節）。

Answer 4

這不是有效的XHTML必須有嵌套窗體。但是，您可以使用多個提交按鈕並使用服務器端腳本根據用戶點擊哪個按鈕來運行不同的代碼。

Answer 5

不，我們不能另一種形式中嵌套形式這樣

<form name='form1'> 
     <form name='form2'> 
      //some code here 
     </form> 
</form> 

它會在某些情況下工作，但不推薦用於通用平臺。您可以在單個窗體中使用大量的SUBMIT按鈕，但不能適當地管理嵌套窗體。

Answer 6

如果你有一個主表單，並且被迫有一個「帶有表單的表單」這裏是你可以做的......在我的情況下，我有一個在globalHeader中的鏈接，我想在它執行一個帖子時被點擊：

實例形式後與鏈接按鈕提交：

取而代之的是形式...換你輸入一個div：

<div id="gap_form"><input type="hidden" name="PostVar"/><a id="myLink" href="javascript:Form2.submit()">A Link</a></div> 

js文件：

$(document).ready(function() { 
(function() { 
    $('#gap_form').wrap('<form id="Form2" action="http://sitetopostto.com/postpage" method="post" target="_blank"></form>'); 
})();}); 

這將包裹一切表格內的div「gap_form」內的所有內容，鏈接將提交該表單。我現在有一個確切的例子在一個頁面上工作...（在我的例子中...你可以通過重定向到一個新頁面並在該頁面上提交表單來完成同樣的事情......但我更喜歡這樣）

Answer 7

嵌套表單不受支持，不屬於w3c標準（正如你們許多人所說的）。

但是HTML5增加了對輸入的支持，這些輸入不必是任何形式的後代，但可以通過使用「form」屬性以多種形式提交。這並不完全允許嵌套窗體，但通過使用此方法，可以模擬嵌套窗體。

「form」屬性的值必須是表單的id，或者在多個表單的情況下，將表單id與空格分開。

你可以閱讀更多here

Answer 8

另一種解決辦法是啓動包含其自身形式

Answer 9

表格嵌套可以用新的HTML5輸入元素的形式屬性來實現一個模態窗口。儘管我們沒有在結構上嵌套表格，但是投入的評估方式是以自己的形式進行的。在我的測試中，除IE（IE11）外，3種主流瀏覽器都支持這一功能。表單嵌套限制是HTML UI設計的一大障礙。

這裏是一個示例代碼，當您單擊保存按鈕，你應該看到 「2次3成功」（原件http://www.impressivewebs.com/html5-form-attribute/）：

<form id="saveForm" action="/post/dispatch/save" method="post"></form> 
<form id="deleteForm" action="/post/dispatch/delete" method="post"></form> 

<div id="toolbar"> 
    <input type="text" name="foo" form="saveForm" /> 
    <input type="hidden" value="some_id" form="deleteForm" /> 
    <input type="text" name="foo2" id="foo2" form="saveForm" value="success" /> 

    <input type="submit" name="save" value="Save" form="saveForm" onclick="alert(document.getElementById('deleteForm').elements.length + ' ' + document.getElementById('saveForm').elements.length + ' ' + document.getElementById('saveForm').elements['foo2'].value);return false;" /> 
    <input type="submit" name="delete" value="Delete" form="deleteForm" /> 
    <a href="/home/index">Cancel</a> 
</div>