คุณจะเอาชนะข้อ จำกัด การซ้อนแบบฟอร์ม HTML ได้อย่างไร

ฉันรู้ว่า XHTML ไม่สนับสนุนแท็กแบบซ้อนและฉันได้อ่านคำตอบอื่น ๆ ที่นี่ใน Stack Overflow เกี่ยวกับเรื่องนี้แล้ว แต่ฉันยังไม่ได้หาวิธีแก้ปัญหาที่สง่างาม

บางคนบอกว่าคุณไม่ต้องการมันและพวกเขาไม่สามารถคิดได้ว่าจะต้องมีสถานการณ์แบบนี้ โดยส่วนตัวแล้วฉันไม่สามารถนึกถึงสถานการณ์ที่ฉันไม่ต้องการได้

มาดูตัวอย่างง่ายๆ

คุณกำลังสร้างแอพบล็อกและคุณมีแบบฟอร์มที่มีบางฟิลด์สำหรับสร้างโพสต์ใหม่และแถบเครื่องมือที่มี "การกระทำ" เช่น "บันทึก", "ลบ", "ยกเลิก"

<form
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"
method="post">

    <input type="text" name="foo" /> <!-- several of those here -->
    <div id="toolbar">
        <input type="submit" name="save" value="Save" />
        <input type="submit" name="delete" value="Delete" />
        <a href="/home/index">Cancel</a>
    </div>
</form>

วัตถุประสงค์ของเราคือการเขียนแบบฟอร์มในลักษณะที่ไม่ต้องใช้ JavaScriptเพียงแค่ใช้แบบฟอร์ม HTML ธรรมดาและส่งปุ่ม

เนื่องจาก URL การกระทำถูกกำหนดไว้ในแท็กแบบฟอร์มและไม่ได้อยู่ในปุ่มส่งแต่ละปุ่มตัวเลือกเดียวของเราคือโพสต์ไปยัง URL ทั่วไปแล้วเริ่ม "ถ้า ... จากนั้น ... อื่น" เพื่อกำหนดชื่อของปุ่มที่ ถูกส่ง ไม่หรูหรามาก แต่เป็นทางเลือกเดียวของเราเนื่องจากเราไม่ต้องการพึ่งพา JavaScript

ปัญหาเพียงอย่างเดียวคือการกด "ลบ" จะส่งฟิลด์แบบฟอร์มทั้งหมดบนเซิร์ฟเวอร์แม้ว่าสิ่งเดียวที่จำเป็นสำหรับการกระทำนี้คืออินพุตที่ซ่อนพร้อม post-id ไม่ใช่เรื่องใหญ่ในตัวอย่างเล็ก ๆ นี้ แต่ฉันมีแบบฟอร์มที่มีหลายร้อย (เพื่อพูดถึง) ของฟิลด์และแท็บในแอปพลิเคชันLOBของฉันที่ (เนื่องจากความต้องการ) ต้องส่งทุกอย่างในครั้งเดียวและในกรณีใด ๆ และของเสีย หากสนับสนุนการซ้อนกันของฟอร์มอย่างน้อยที่สุดฉันก็จะสามารถห่อปุ่ม "ลบ" ส่งภายในรูปแบบของตัวเองโดยมีเพียงฟิลด์โพสต์ -id

คุณอาจพูดว่า "เพียงใช้" ลบ "เป็นลิงก์แทนที่จะส่ง" สิ่งนี้จะผิดในหลาย ๆ ระดับ แต่ที่สำคัญที่สุดเพราะการกระทำข้างเคียงเช่น "ลบ" ที่นี่ไม่ควรเป็นคำขอ GET

ดังนั้นคำถามของฉัน (โดยเฉพาะอย่างยิ่งกับผู้ที่กล่าวว่าพวกเขาไม่ต้องการทำรังในรูปแบบ) คุณจะทำอย่างไร มีวิธีแก้ปัญหาที่สวยงามที่ฉันขาดหายไปหรือบรรทัดล่างคือ "ต้องการ JavaScript หรือส่งทุกอย่าง"

ฉันจะใช้สิ่งนี้ตามที่คุณอธิบาย: ส่งทุกอย่างไปยังเซิร์ฟเวอร์และทำง่าย ๆ ถ้า / อื่นเพื่อตรวจสอบว่ามีการคลิกปุ่มใด

จากนั้นฉันจะใช้การเรียก Javascript ในเหตุการณ์ onsubmit ของฟอร์มซึ่งจะตรวจสอบก่อนที่จะส่งแบบฟอร์มและส่งข้อมูลที่เกี่ยวข้องไปยังเซิร์ฟเวอร์เท่านั้น (อาจผ่านฟอร์มที่สองบนหน้าเว็บที่มี ID ที่จำเป็นในการประมวลผลสิ่งต่าง ๆ เช่น อินพุตที่ซ่อนอยู่หรือรีเฟรชตำแหน่งหน้าเว็บด้วยข้อมูลที่คุณต้องการผ่านเป็นคำขอ GET หรือโพสต์ Ajax ไปยังเซิร์ฟเวอร์หรือ ... )

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

หรือหากคุณทำงานอยู่หลังไฟร์วอลล์ขององค์กรหรือทุกอย่างและทุกคนปิดการใช้งาน Javascript คุณอาจต้องการทำสองรูปแบบและใช้เวทมนตร์ CSS เพื่อให้ดูเหมือนว่าปุ่มลบเป็นส่วนหนึ่งของแบบฟอร์มแรก

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ HTML5 มีตัวเลือกใหม่สองสามอย่าง

สิ่งแรกคือการแยกแบบฟอร์มจากแถบเครื่องมือในมาร์กอัปเพิ่มแบบฟอร์มอื่นสำหรับการดำเนินการลบและเชื่อมโยงปุ่มในแถบเครื่องมือกับฟอร์มที่เกี่ยวข้องโดยใช้แอformททริบิวต์

<form id="saveForm" action="/post/dispatch/save" method="post">
    <input type="text" name="foo" /> <!-- several of those here -->  
</form>
<form id="deleteForm" action="/post/dispatch/delete" method="post">
    <input type="hidden" value="some_id" />
</form>
<div id="toolbar">
    <input type="submit" name="save" value="Save" form="saveForm" />
    <input type="submit" name="delete" value="Delete" form="deleteForm" />
    <a href="/home/index">Cancel</a>
</div>

ตัวเลือกนี้มีความยืดหยุ่นค่อนข้างมาก แต่โพสต์ดั้งเดิมยังกล่าวถึงอีกว่ามันอาจจำเป็นในการดำเนินการต่าง ๆ ด้วยแบบฟอร์มเดียว HTML5 มาถึงการช่วยเหลืออีกครั้ง คุณสามารถใช้แอformactionททริบิวกับปุ่มส่งดังนั้นปุ่มที่แตกต่างกันในแบบฟอร์มเดียวกันจึงสามารถส่งไปยัง URL ต่าง ๆ ได้ ตัวอย่างนี้เพียงเพิ่มวิธีการโคลนไปยังแถบเครื่องมือนอกฟอร์ม แต่มันจะทำงานในลักษณะซ้อนกันในแบบฟอร์ม

<div id="toolbar">
    <input type="submit" name="clone" value="Clone" form="saveForm"
           formaction="/post/dispatch/clone" />
</div>

http://www.whatwg.org/specs/web-apps/current-work/#attributes-for-form-submission

ข้อได้เปรียบของฟีเจอร์ใหม่เหล่านี้คือพวกเขาทำสิ่งนี้ทั้งหมดโดยไม่ต้องใช้ JavaScript ข้อเสียคือพวกเขาไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าดังนั้นคุณต้องทำ polyfilling สำหรับเบราว์เซอร์รุ่นเก่า

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

<form method="post" action="delete_processing_page">
   <input type="hidden" name="id" value="foo" />
   <input type="submit" value="delete" class="css_makes_me_pretty" />
</form>

<form method="post" action="add_edit_processing_page">
   <input type="text" name="foo1"  />
   <input type="text" name="foo2"  />
   <input type="text" name="foo3"  />
   ...
   <input type="submit" value="post/edit" class="css_makes_me_pretty" />
</form>

HTML5 มีแนวคิดว่า "เจ้าของแบบฟอร์ม" - แอตทริบิวต์ "ฟอร์ม" สำหรับองค์ประกอบอินพุต อนุญาตให้เลียนแบบฟอร์มซ้อนกันและจะแก้ปัญหาได้

ประเภทของหัวข้อเก่า แต่หัวข้อนี้อาจมีประโยชน์สำหรับใครบางคน:

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

ในกรณีของฉันดูเหมือนว่านี้:

<form id="Main">
  <form></form> <!--this is the dummy one-->
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  <input...><form id="Nested 1> ... </form>
  ......
</form>

ทำงานได้ดีกับ Chrome, FireFox และ Safari IE สูงสุด 9 (ไม่แน่ใจประมาณ 10) และ Opera ไม่พบพารามิเตอร์ในรูปแบบหลัก $ _REQUEST โกลบอลว่างเปล่าโดยไม่คำนึงถึงอินพุต ดูเหมือนว่ารูปแบบภายในจะทำงานได้ดีทุกที่

ยังไม่ได้ทดสอบคำแนะนำอื่นที่อธิบายไว้ที่นี่ - fieldset รอบรูปแบบซ้อนกัน

แก้ไข : frameset ไม่ทำงาน! ฉันเพียงแค่เพิ่มรูปแบบหลักหลังจากที่อื่น ๆ (ไม่มีรูปแบบซ้อนกันมากขึ้น) และใช้ "โคลน" ของ jQuery เพื่อทำซ้ำอินพุตในแบบฟอร์มเมื่อคลิกปุ่ม เพิ่ม. leather () ให้กับแต่ละอินพุตโคลนเพื่อไม่ให้เลย์เอาต์มีการเปลี่ยนแปลงและตอนนี้มันทำงานเหมือนเครื่องราง

ฉันคิดว่าถูกต้องแล้ว หากการดำเนินการ "ลบ" ของคุณเป็นแบบขั้นต่ำให้จัดทำในรูปแบบด้วยตัวเองแล้วจัดเรียงให้ตรงกับปุ่มอื่น ๆ เพื่อให้อินเทอร์เฟซมีลักษณะเหมือนแบบฟอร์มเดียวแม้ว่าจะไม่ใช่ก็ตาม

หรือแน่นอนออกแบบอินเทอร์เฟซของคุณใหม่และให้คนอื่นลบอย่างสิ้นเชิงซึ่งไม่ต้องการให้พวกเขาเห็นรูปแบบมหาศาลเลย

วิธีหนึ่งที่ฉันจะทำได้โดยไม่ใช้จาวาสคริปต์ก็คือการเพิ่มชุดของปุ่มตัวเลือกที่กำหนดการกระทำ:

• ปรับปรุง
• ลบ
• อะไรก็ตาม

จากนั้นสคริปต์การกระทำจะดำเนินการต่าง ๆ ขึ้นอยู่กับค่าของชุดตัวเลือก

อีกวิธีหนึ่งคือการวางฟอร์มสองแบบบนหน้าเว็บตามที่คุณแนะนำไม่ซ้อนกัน เค้าโครงอาจควบคุมได้ยาก:

<form name = "editform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "update" />
   <input type = "text" name = "foo" />
   <input type = "submit" name = "save" value = "Save" />
</ form>

<form name = "delform" action = "the_action_url" method = "post">
   <input type = "hidden" name = "task" value = "delete" />
   <input type = "hidden" name = "post_id" value = "5" />
   <input type = "submit" name = "delete" value = "Delete" />
</ form>

ใช้ฟิลด์ "งาน" ที่ซ่อนอยู่ในสคริปต์การจัดการเพื่อแยกสาขาอย่างเหมาะสม

การสนทนานี้ยังเป็นที่สนใจของฉัน เบื้องหลังโพสต์ต้นฉบับคือ "ข้อกำหนด" ซึ่ง OP ดูเหมือนว่าจะแบ่งปัน - นั่นคือรูปแบบที่เข้ากันได้ย้อนหลัง ในฐานะที่เป็นคนที่ทำงานในเวลาเขียนบางครั้งต้องสนับสนุนกลับไปที่ IE6 (และอีกหลายปีข้างหน้า) ฉันขุดมัน

หากองค์กรไม่ต้องการผลักดันกรอบการทำงาน (ทุกองค์กรต้องการสร้างความมั่นใจในความเข้ากันได้ / ความทนทานและฉันไม่ได้ใช้การอภิปรายนี้เป็นข้ออ้างสำหรับกรอบการทำงาน) โซลูชัน Drupal ในประเด็นนี้น่าสนใจ Drupal นั้นมีความเกี่ยวข้องโดยตรงเนื่องจากเฟรมเวิร์กมีนโยบายที่ยาวนานว่า "มันควรจะทำงานได้โดยไม่ต้องใช้ Javascript (เฉพาะในกรณีที่คุณต้องการ)" เช่นปัญหาของ OP

Drupal ใช้มันค่อนข้างกว้างขวาง ฟังก์ชั่นform.incเพื่อค้นหา triggering_element (ใช่นั่นคือชื่อในโค้ด) ดูด้านล่างของรหัสที่แสดงอยู่ในหน้า API สำหรับform_builder (หากคุณต้องการที่จะเจาะลึกรายละเอียดแนะนำแหล่งที่มา - drupal-x.xx / include / form.inc ) ผู้สร้างใช้การสร้างแอททริบิวต์ HTML อัตโนมัติและสามารถตรวจจับย้อนกลับได้ว่ากดปุ่มใดและดำเนินการตามนั้น (สามารถตั้งค่าให้เรียกใช้กระบวนการแยกกันได้)

นอกเหนือจากเครื่องมือสร้างแบบฟอร์ม Drupal แยกการกระทำ 'ลบ' ข้อมูลออกเป็น URL / แบบฟอร์มแยกกันซึ่งอาจเป็นเพราะเหตุผลที่กล่าวถึงในโพสต์ต้นฉบับ ขั้นตอนนี้ต้องการขั้นตอนการค้นหา / รายการบางอย่าง ( คร่ำครวญฟอร์มอื่น! แต่ใช้งานง่าย) เป็นข้อมูลเบื้องต้น แต่นี่มีข้อดีของการกำจัดปัญหา "ส่งทุกอย่าง" แบบฟอร์มขนาดใหญ่พร้อมข้อมูลใช้สำหรับจุดประสงค์การสร้าง / ปรับปรุงข้อมูล (หรือแม้แต่การกระทำ 'ผสาน')

กล่าวอีกนัยหนึ่งวิธีหนึ่งในการแก้ไขปัญหาคือการพัฒนาฟอร์มเป็นสองส่วนจากนั้นปัญหาก็จะหายไป (และวิธีการ HTML สามารถแก้ไขผ่าน POST ได้เช่นกัน)

ใช้iframeสำหรับรูปแบบซ้อน หากพวกเขาต้องการแชร์ฟิลด์ดังนั้น ... มันไม่ซ้อนกันจริงๆ

ทางออกของฉันคือการมีปุ่มเรียกฟังก์ชั่น JS ซึ่งเขียนแล้วส่งแบบฟอร์มที่มีรูปแบบหลัก

<head>
<script>
function removeMe(A, B){
        document.write('<form name="removeForm" method="POST" action="Delete.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.removeForm.submit();
}
function insertMe(A, B){
        document.write('<form name="insertForm" method="POST" action="Insert.php">');
        document.write('<input type="hidden" name="customerID" value="' + A + '">');
        document.write('<input type="hidden" name="productID" value="' + B + '">');
        document.write('</form>');
        document.insertForm.submit();
}
</script>
</head>

<body>
<form method="POST" action="main_form_purpose_page.php">

<input type="button" name="remove" Value="Remove" onclick="removeMe('$customerID','$productID')">
<input type="button" name="insert" Value="Insert" onclick="insertMe('$customerID','$productID')">

<input type="submit" name="submit" value="Submit">
</form>
</body>

หากคุณไม่ต้องการใช้หลายรูปแบบ (เช่น Jason sugests) ให้ใช้ปุ่มและตัวจัดการ onclick

<form id='form' name='form' action='path/to/add/edit/blog' method='post'>
    <textarea name='message' id='message'>Blog message here</textarea>
    <input type='submit' id='save' value='Save'>
</form>
<button id='delete'>Delete</button>
<button id='cancel'>Cancel</button>

แล้วใน javascript (ฉันใช้ jQuery ที่นี่เพื่อความง่าย) (แม้ว่าจะค่อนข้าง overkill สำหรับการเพิ่มตัวจัดการ onclick บางอย่าง)

$('#delete').click( function() {
   document.location = 'path/to/delete/post/id'; 
});
$('#cancel').click( function() {
   document.location = '/home/index';
});

ฉันรู้ว่านี่จะทำให้ครึ่งหน้าไม่สามารถใช้งานได้หากไม่มี javascript

ในการตอบคำถามที่โพสต์โดย Yar ในความคิดเห็นต่อคำตอบของเขาฉันได้แสดง JavaScript ซึ่งจะปรับขนาด iframe สำหรับกรณีของปุ่มแบบฟอร์มจะถือว่าปลอดภัยหาก iframe จะอยู่ในโดเมนเดียวกัน นี่คือรหัสที่ฉันใช้ คุณจะต้องเปลี่ยนคณิตศาสตร์ / ค่าคงที่สำหรับเว็บไซต์ของคุณเอง:

function resizeIFrame(frame)
{
    try {
        innerDoc = ('contentDocument' in frame) ? frame.contentDocument : frame.contentWindow.document;
        if('style' in frame) {
            frame.style.width = Math.min(755, Math.ceil(innerDoc.body.scrollWidth)) + 'px';
            frame.style.height = Math.ceil(innerDoc.body.scrollHeight) + 'px';
        } else {
            frame.width = Math.ceil(innerDoc.body.scrollWidth);
            frame.height = Math.ceil(innerDoc.body.scrollHeight);
        }
    } catch(err) {
        window.status = err.message;
    }
}

จากนั้นเรียกมันว่าสิ่งนี้:

<iframe ... frameborder="0" onload="if(window.parent && window.parent.resizeIFrame){window.parent.resizeIFrame(this);}"></iframe>

ฉันเพิ่งมาด้วยวิธีที่ดีในการทำมันด้วย jquery

<form name="mainform">    
    <div id="placeholder">
    <div>
</form>

<form id="nested_form" style="position:absolute">
</form>

<script>
   $(document).ready(function(){
      pos = $('#placeholder').position();
      $('#nested_form')
         .css('left', pos.left.toFixed(0)+'px')
         .css('top', pos.top.toFixed(0)+'px');
   });
</script>

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

<form   
 action="/post/dispatch/too_bad_the_action_url_is_in_the_form_tag_even_though_conceptually_every_submit_button_inside_it_may_need_to_post_to_a_diffent_distinct_url"  
method="post">  

    <input type="text" name="foo" /> <!-- several of those here -->  
    <div id="toolbar">
        <input type="submit" name="action:save" value="Save" />
        <input type="submit" name="action:delete" value="Delete" />
        <input type="submit" name="action:cancel" value="Cancel" />
    </div>
</form>

ดังนั้นในฝั่งเซิร์ฟเวอร์คุณเพียงแค่มองหาพารามิเตอร์ที่เริ่มต้นสตริงความกว้าง "การกระทำ:" และส่วนที่เหลือจะบอกคุณว่าการกระทำที่จะดำเนินการ

ดังนั้นเมื่อคุณคลิกที่ปุ่มบันทึกเบราว์เซอร์จะส่งสิ่งที่คุณต้องการเช่น foo = asd & action: save = Save

ฉันไปรอบ ๆ ปัญหาโดยรวมช่องทำเครื่องหมายขึ้นอยู่กับสิ่งที่คนต้องการทำ จากนั้นใช้ 1 ปุ่มเพื่อส่งแบบฟอร์มทั้งหมด

อีกวิธีหนึ่งคุณสามารถกำหนดแบบฟอร์ม actiob ได้ทันที ... อาจไม่ใช่วิธีที่ดีที่สุด แต่แน่นอนว่าจะช่วยลดตรรกะด้านเซิร์ฟเวอร์ ...

<form name="frm" method="post">  
    <input type="submit" value="One" onclick="javascript:this.form.action='1.htm'" />  
    <input type="submit" value="Two" onclick="javascript:this.form.action='2.htm'" />  
</form>