คุณสามารถซ้อนแบบฟอร์ม html ได้หรือไม่

เป็นไปได้หรือไม่ที่จะซ้อนรูปแบบ HTML เช่นนี้

<form name="mainForm">
  <form name="subForm">
  </form>
</form>

เพื่อให้ทั้งสองรูปแบบทำงานอย่างไร เพื่อนของฉันมีปัญหากับสิ่งนี้เป็นส่วนหนึ่งของsubFormงานในขณะที่อีกส่วนหนึ่งไม่ได้ทำงาน

ในคำที่ไม่มี คุณสามารถมีหลายรูปแบบในหน้า แต่ไม่ควรซ้อนกัน

จากแบบร่างการทำงาน html5 :

4.10.3 formองค์ประกอบ

รูปแบบเนื้อหา:

เนื้อหา Flow แต่ไม่มีการสืบทอดองค์ประกอบของฟอร์ม

ฉันพบปัญหาที่คล้ายกันและฉันรู้ว่านี่ไม่ใช่คำตอบสำหรับคำถาม แต่สามารถช่วยคนที่มีปัญหาแบบนี้ได้:
หากจำเป็นต้องใส่องค์ประกอบของสองรูปแบบหรือมากกว่านั้นในลำดับที่กำหนด ที่HTML5 <input> formแอตทริบิวต์สามารถแก้ปัญหา

จากhttp://www.w3schools.com/tags/att_input_form.asp :

1. แอตทริบิวต์ของฟอร์มเป็นสิ่งใหม่ใน HTML5
2. ระบุ<form>องค์ประกอบที่<input>องค์ประกอบเป็นของ ค่าของแอตทริบิวต์นี้ต้องเป็นแอตทริบิวต์ id ของ<form>องค์ประกอบในเอกสารเดียวกัน

สถานการณ์สมมติ :

• input_Form1_n1
• input_Form2_n1
• input_Form1_n2
• input_Form2_n2

การใช้งาน :

<form id="Form1" action="Action1.php" method="post"></form>
<form id="Form2" action="Action2.php" method="post"></form>

<input type="text" name="input_Form1_n1" form="Form1" />
<input type="text" name="input_Form2_n1" form="Form2" />
<input type="text" name="input_Form1_n2" form="Form1" />
<input type="text" name="input_Form2_n2" form="Form2" />

<input type="submit" name="button1" value="buttonVal1" form="Form1" />
<input type="submit" name="button2" value="buttonVal2" form="Form2" />

ที่นี่คุณจะพบความเข้ากันได้ของเบราว์เซอร์

รูปแบบที่สองจะถูกมองข้ามดูตัวอย่างจาก WebKit ตัวอย่าง:

bool HTMLParser::formCreateErrorCheck(Token* t, RefPtr<Node>& result)
{
    // Only create a new form if we're not already inside one.
    // This is consistent with other browsers' behavior.
    if (!m_currentFormElement) {
        m_currentFormElement = new HTMLFormElement(formTag, m_document);
        result = m_currentFormElement;
        pCloserCreateErrorCheck(t, result);
    }
    return false;
}

HTML ธรรมดาไม่สามารถอนุญาตให้คุณทำเช่นนี้ได้ แต่ด้วยจาวาสคริปต์คุณสามารถทำเช่นนั้นได้ หากคุณใช้ javascript / jquery คุณสามารถจำแนกองค์ประกอบแบบฟอร์มของคุณด้วยคลาสจากนั้นใช้ serialize () เพื่อจัดลำดับเฉพาะองค์ประกอบแบบฟอร์มเหล่านั้นสำหรับชุดย่อยของรายการที่คุณต้องการส่ง

<form id="formid">
    <input type="text" class="class1" />
    <input type="text" class="class2">
</form>

จากนั้นในจาวาสคริปต์ของคุณคุณสามารถทำสิ่งนี้เพื่อทำให้องค์ประกอบของคลาส 1 เป็นอนุกรม

$(".class1").serialize();

สำหรับ class2 คุณสามารถทำได้

$(".class2").serialize();

สำหรับแบบฟอร์มทั้งหมด

$("#formid").serialize();

หรือเพียงแค่

$("#formid").submit();

หากคุณใช้ AngularJS <form>แท็กใด ๆภายในของคุณng-appจะถูกแทนที่ด้วยรันไทม์พร้อมngFormคำสั่งที่ออกแบบมาให้ซ้อนกัน

ในรูปแบบเชิงมุมสามารถซ้อนกันได้ ซึ่งหมายความว่าแบบฟอร์มด้านนอกจะใช้ได้เมื่อแบบฟอร์มย่อยทั้งหมดนั้นถูกต้องเช่นกัน อย่างไรก็ตามเบราว์เซอร์ไม่อนุญาตให้มีการซ้อน<form>องค์ประกอบดังนั้น Angular จึงมีngFormคำสั่งที่ทำงานเหมือนกัน<form>แต่สามารถซ้อนกันได้ สิ่งนี้ช่วยให้คุณมีรูปแบบซ้อนกันซึ่งมีประโยชน์มากเมื่อใช้คำสั่งการตรวจสอบเชิงมุมในรูปแบบที่สร้างขึ้นแบบไดนามิกโดยใช้ngRepeatคำสั่ง (ที่มา )

เนื่องจากเป็นปี 2019 ฉันต้องการให้คำตอบที่อัปเดตสำหรับคำถามนี้ เป็นไปได้ที่จะได้ผลลัพธ์เช่นเดียวกับแบบฟอร์มซ้อน แต่ไม่มีการซ้อน HTML5 แนะนำคุณสมบัติของแบบฟอร์ม คุณสามารถเพิ่มแอตทริบิวต์ form เพื่อควบคุมฟอร์มภายนอกฟอร์มเพื่อลิงก์ไปยังองค์ประกอบของฟอร์ม (โดย id)

https://www.impressivewebs.com/html5-form-attribute/

วิธีนี้คุณสามารถจัดโครงสร้าง html ของคุณดังนี้:

<form id="main-form" action="/main-action" method="post"></form>
<form id="sub-form"  action="/sub-action"  method="post"></form>

<div class="main-component">
    <input type="text" name="main-property1" form="main-form" />
    <input type="text" name="main-property2" form="main-form" />

    <div class="sub-component">
        <input type="text" name="sub-property1" form="sub-form" />
        <input type="text" name="sub-property2" form="sub-form" />
        <input type="submit" name="sub-save" value="Save" form="sub-form" />
    </div>

    <input type="submit" name="main-save" value="Save" form="main-form" />
</div>

แอตทริบิวต์แบบฟอร์มได้รับการสนับสนุนโดยเบราว์เซอร์ที่ทันสมัยทั้งหมด IE ไม่สนับสนุนสิ่งนี้ แต่ IE ไม่ใช่เบราว์เซอร์อีกต่อไป แต่เป็นเครื่องมือที่ใช้งานร่วมกันได้ตามที่ได้รับการยืนยันโดย Microsoft: https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a -browser ให้หยุดใช้มันเป็นของคุณเริ่มต้น / / มันเป็นเวลาที่เราหยุดใส่ใจที่จะทำให้สิ่งต่าง ๆ ทำงานได้ใน IE

https://caniuse.com/#feat=form-attribute
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fae-form

จากสเป็ค html:

คุณลักษณะนี้ช่วยให้ผู้เขียนสามารถหลีกเลี่ยงการขาดการสนับสนุนองค์ประกอบแบบซ้อน

อีกวิธีหนึ่งในการแก้ไขปัญหานี้หากคุณใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ที่ให้คุณสามารถจัดการกับข้อมูลที่โพสต์ได้คือการประกาศฟอร์ม html ของคุณดังนี้:

<form>
<input name="a_name"/>
<input name="a_second_name"/>
<input name="subform[another_name]"/>
<input name="subform[another_second_name]"/>
</form>

หากคุณพิมพ์ข้อมูลที่โพสต์ (ฉันจะใช้ PHP ที่นี่) คุณจะได้รับอาร์เรย์ดังนี้:

//print_r($_POST) will output :
    array(
    'a_name' => 'a_name_value',
    'a_second_name' => 'a_second_name_value',
    'subform' => array(
      'another_name' => 'a_name_value',
      'another_second_name' => 'another_second_name_value',
      ),
    );

จากนั้นคุณสามารถทำสิ่งที่ชอบ:

$my_sub_form_data = $_POST['subform'];
unset($_POST['subform']);

ตอนนี้ $ _POST ของคุณมีเพียงข้อมูล "แบบฟอร์มหลัก" ของคุณและข้อมูลฟอร์มย่อยของคุณจะถูกเก็บไว้ในตัวแปรอื่นที่คุณสามารถจัดการได้ตามต้องการ

หวังว่านี่จะช่วยได้!

อย่างที่เครกบอกว่าไม่

แต่เกี่ยวกับความคิดเห็นของคุณว่าทำไม :

มันอาจจะง่ายต่อการใช้ 1 <form>กับปัจจัยการผลิตและปุ่ม "Update" และการใช้ปัจจัยการผลิตที่คัดลอกซ่อนด้วยปุ่ม "ส่งคำสั่งซื้อ" <form>ในอีก

หมายเหตุคุณไม่ได้รับอนุญาตให้ซ้อนองค์ประกอบแบบฟอร์ม!

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

https://www.w3.org/TR/html4/appendix/changes.html#hA.3.9 (ข้อมูลจำเพาะ html4 ไม่มีการเปลี่ยนแปลงเกี่ยวกับรูปแบบการซ้อนจาก 3.2 เป็น 4)

https://www.w3.org/TR/html4/appendix/changes.html#hA.1.1.12 (หมายเหตุข้อกำหนด html4 ไม่มีการเปลี่ยนแปลงเกี่ยวกับรูปแบบการซ้อนจาก 4.0 เป็น 4.1)

https://www.w3.org/TR/html5-diff/ (หมายเหตุข้อกำหนด html5 ไม่มีการเปลี่ยนแปลงเกี่ยวกับรูปแบบการซ้อนจาก 4 เป็น 5)

https://www.w3.org/TR/html5/forms.html#association-of-controls-and-formsความคิดเห็นที่ "คุณลักษณะนี้ช่วยให้ผู้เขียนสามารถหลีกเลี่ยงการสนับสนุนองค์ประกอบแบบฟอร์มซ้อนกัน" แต่ไม่ ไม่อ้างว่ามีการระบุไว้ที่ไหนฉันคิดว่าพวกเขากำลังสมมติว่าเราควรสันนิษฐานว่ามันระบุไว้ในข้อกำหนด html3 :)

วิธีแก้ปัญหาง่ายๆคือใช้ iframe เพื่อเก็บฟอร์ม "ซ้อน" มองเห็นรูปแบบซ้อนกัน แต่ในด้านรหัสในรูปแบบไฟล์ html แยกกันโดยสิ้นเชิง

คุณยังสามารถใช้ formaction = "" ภายในแท็กปุ่ม

<button type="submit" formaction="/rmDog" method='post' id="rmDog">-</button>

สิ่งนี้จะซ้อนในรูปแบบดั้งเดิมเป็นปุ่มแยก

แม้ว่าคุณจะสามารถทำให้มันทำงานได้ในเบราว์เซอร์เดียว แต่ก็ไม่รับประกันว่ามันจะทำงานได้เหมือนกันในทุกเบราว์เซอร์ ดังนั้นในขณะที่คุณสามารถทำให้มันทำงานได้บางเวลาคุณจะไม่สามารถทำงานได้ตลอดเวลา

คุณอาจมีปัญหาในการใช้งานเบราว์เซอร์รุ่นเดียวกัน ดังนั้นหลีกเลี่ยงการใช้สิ่งนั้น

ในขณะที่ฉันไม่ได้นำเสนอวิธีแก้ปัญหาสำหรับรูปแบบที่ซ้อนกัน (มันไม่ทำงานอย่างน่าเชื่อถือ) แต่ฉันก็นำเสนอวิธีแก้ปัญหาที่เหมาะกับฉัน:

สถานการณ์การใช้งาน: superform อนุญาตให้เปลี่ยนรายการ N ในครั้งเดียว มีปุ่ม "ส่งทั้งหมด" ที่ด้านล่าง แต่ละรายการต้องการมีรูปแบบซ้อนกันของตัวเองพร้อมปุ่ม "ส่งรายการ # N" แต่ไม่สามารถ ...

ในกรณีนี้จริงสามารถใช้รูปแบบเดียวและจากนั้นมีชื่อของปุ่มเป็นsubmit_1.. submit_NและsubmitAllและจัดการเซิร์ฟเวอร์ด้านโดยเฉพาะการมองหาที่สิ้นสุดใน params ถ้าชื่อของปุ่มได้_1submit_1

<form>
    <div id="item1">
        <input type="text" name="foo_1" value="23">
        <input type="submit" name="submit_1" value="Submit Item #1">
    </div>
    <div id="item2">
        <input type="text" name="foo_2" value="33">
        <input type="submit" name="submit_2" value="Submit Item #2">
    </div>
    <input type="submit" name="submitAll" value="Submit All Items">
</form>

ตกลงสิ่งประดิษฐ์ไม่มากนัก แต่ทำงานได้จริง

เกี่ยวกับรูปแบบการทำรัง: ฉันใช้เวลา 10 ปีในบ่ายวันหนึ่งพยายามแก้จุดบกพร่องสคริปต์อาแจ็กซ์

คำตอบ / ตัวอย่างก่อนหน้าของฉันไม่ได้คำนึงถึงมาร์กอัป html ขออภัย

<form id='form_1' et al>
  <input stuff>
  <submit onClick='ajaxFunction(That_Puts_form_2_In_The_ajaxContainer)' >
  <td id='ajaxContainer></td>
</form>

form_2 ล้มเหลวอย่างต่อเนื่องโดยบอกว่า form_2 ไม่ถูกต้อง

เมื่อฉันย้าย ajaxContainer ที่สร้าง form_2 <i>outside</i>จาก form_1 ฉันกลับมาทำธุรกิจอีกครั้ง มันเป็นคำตอบของคำถามว่าทำไมคนคนหนึ่งอาจซ้อนแบบฟอร์ม ฉันหมายถึงจริงๆ ID สำหรับถ้าไม่ให้กำหนดรูปแบบที่จะใช้คืออะไร? ต้องมีวิธีที่ดีกว่า

ใช้แท็กแบบฟอร์มเปล่าก่อนแบบฟอร์มซ้อนของคุณ

ผ่านการทดสอบและทำงานบน Firefox, Chrome

ไม่ได้ทดสอบบน IE

<form name="mainForm" action="mainAction">
  <form></form>
  <form name="subForm"  action="subAction">
  </form>
</form>

แม้ว่าคำถามจะค่อนข้างเก่าและฉันเห็นด้วยกับ @everyone ว่าไม่อนุญาตให้สร้างแบบฟอร์มซ้อนใน HTML

แต่สิ่งนี้ทุกคนอาจต้องการเห็นสิ่งนี้

ที่คุณสามารถแฮ็ค (ฉันเรียกมันว่าแฮ็คเพราะฉันแน่ใจว่านี่ไม่ถูกต้อง) html ที่อนุญาตให้เบราว์เซอร์มีรูปแบบซ้อนกัน

<form id="form_one" action="http://apple.com">
  <div>
    <div>
        <form id="form_two" action="/">
            <!-- DUMMY FORM TO ALLOW BROWSER TO ACCEPT NESTED FORM -->
      </form>
    </div>
      <br/>
    <div>
      <form id="form_three" action="http://www.linuxtopia.org/">
          <input type='submit' value='LINUX TOPIA'/>
      </form>
    </div>
      <br/>

    <div>
      <form id="form_four" action="http://bing.com">
          <input type='submit' value='BING'/>
      </form>
    </div>
      <br/>  
    <input type='submit' value='Apple'/>
  </div>  
</form>

ลิงก์ JS FIDDLE

http://jsfiddle.net/nzkEw/10/

ไม่คุณไม่มีแบบฟอร์มซ้อนอยู่ แต่คุณสามารถเปิด Modal ที่มีรูปแบบและดำเนินการส่งแบบฟอร์ม Ajax

เป็นไปไม่ได้จริง ๆ ... ฉันไม่สามารถซ้อนแท็กแบบฟอร์ม ... อย่างไรก็ตามฉันใช้รหัสนี้:

<form>
    OTHER FORM STUFF

    <div novalidate role="form" method="post" id="fake_form_id_0" data-url="YOUR_POST_URL">
        THIS FORM STUFF
    </div>
</form>

กับ {% csrf_token %}และสิ่งต่าง ๆ

และใช้บาง JS

var url = $(form_id).attr("data-url");

$.ajax({
  url: url,
  "type": "POST",
   "data": {
    'csrfmiddlewaretoken': '{{ csrf_token }}',
    'custom-param-attachment': 'value'
  },
  success: function (e, data) {
      if (e.is_valid) {
         DO STUFF
      }
  }
});

วันนี้ฉันยังติดอยู่ในปัญหาเดียวกันและแก้ไขปัญหาที่ฉันได้เพิ่มการควบคุมผู้ใช้และ
ในการควบคุมนี้ฉันใช้รหัสนี้

<div class="divformTagEx">

</div>

<asp:Literal runat="server" ID="litFormTag" Visible="false">
'<div> <form  style="margin-bottom: 3;" action="http://login.php" method="post" name="testformtag"></form> </div>'</asp:Literal>

และในเหตุการณ์ PreRenderComplete ของหน้าเรียกเมธอดนี้

private void InitializeJavaScript()
{
        var script = new StringBuilder();
        script.Append("$(document).ready(function () {");
        script.Append("$('.divformTagEx').append( ");
        script.Append(litFormTag.Text);
        script.Append(" )");
        script.Append(" });");
        ScriptManager.RegisterStartupScript(this, GetType(), "nestedFormTagEx", script.ToString(), true);
    }

ฉันเชื่อว่านี่จะช่วยได้

ก่อนที่ฉันจะรู้ว่าฉันไม่ควรทำสิ่งนี้ฉันมีแบบฟอร์มซ้อนกันเพื่อให้มีปุ่มส่งหลายปุ่ม ใช้วิธีนี้เป็นเวลา 18 เดือนธุรกรรมการสมัครใช้งานนับพันไม่มีใครโทรหาเราเกี่ยวกับปัญหาใด ๆ

แบบฟอร์มที่ซ้อนกันให้ฉัน ID แยกวิเคราะห์สำหรับการกระทำที่ถูกต้องที่จะใช้ ไม่หักเลยจนกว่าฉันจะพยายามแนบฟิลด์กับหนึ่งในปุ่มและตรวจสอบความถูกต้องบ่น ไม่ใช่เรื่องใหญ่ที่จะแก้ให้หายยุ่ง - ฉันใช้ stringify ที่ชัดเจนในแบบฟอร์มด้านนอกดังนั้นมันจึงไม่สำคัญว่ารูปแบบการส่งและแบบไม่ตรงกัน ใช่แล้วคุณควรจะเอาปุ่มจากการส่งไปยังออนคลิก

ประเด็นคือมีสถานการณ์ที่ไม่แตกสลายอย่างสิ้นเชิง แต่ "ไม่เสียทั้งหมด" อาจต่ำเกินไปที่มาตรฐานในการถ่ายเพื่อ :-)