331

เป็น html ที่ถูกต้องหรือไม่ที่จะมีสิ่งต่อไปนี้:

<form action="a">
    <input.../>
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
    <input.../>
</form>

ดังนั้นเมื่อคุณส่ง "b" คุณจะได้รับฟิลด์ภายในแบบฟอร์มด้านในเท่านั้น เมื่อคุณส่ง "a" คุณจะได้รับฟิลด์ทั้งหมดลบด้วยฟิลด์ภายใน "b"

หากไม่สามารถทำได้การแก้ไขปัญหาใดบ้างสำหรับสถานการณ์นี้

html web-standards standards-compliance

— allyourcode
แหล่งที่มา

28

ฉันคิดว่านี่เป็นความต้องการทั่วไปที่คุ้นเคยจากส่วนต่อประสาน db - ถ้าแบบฟอร์มอัปเดตตาราง A และตารางนั้นมีเขตข้อมูลที่เชื่อมโยงกับตาราง B เรามักต้องการวิธีอัปเดตหรือสร้างรายการสำหรับสิ่งนั้น เขตข้อมูลที่เชื่อมโยงโดยไม่ต้องออกจากแบบฟอร์มปัจจุบัน แบบฟอร์มย่อยที่ซ้อนกันจะเป็นวิธีที่ใช้งานง่ายมาก (และเป็น UI ที่ใช้โดยฐานข้อมูลเดสก์ท็อปหลายตัว)

— monotasker

3

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

2

เป็นไปได้ที่ซ้ำกันของคุณสามารถซ้อนแบบฟอร์ม html ได้หรือไม่

— ผู้ใช้

คำถามนั้นดี แต่การค้นหา google อย่างรวดเร็ว (โดยไม่ต้องคลิกที่ลิงก์ที่ให้ไว้) แสดงให้เห็นว่าแบบฟอร์มภายในแบบฟอร์มนั้นถูกต้องหรือไม่ ฉันเองชอบ @Andreas คำตอบ

— Jarett Lloyd

380

A. มันไม่ถูกต้อง HTML หรือ XHTML

ในข้อกำหนดอย่างเป็นทางการของ W3C XHTML ส่วน B. "องค์ประกอบต้องห้าม" ระบุว่า:

"form must not contain other form elements."

http://www.w3.org/TR/xhtml1/#prohibitions

สำหรับข้อมูลจำเพาะ HTML 3.2 ที่เก่ากว่าส่วนในองค์ประกอบ FORMS ระบุว่า:

"ทุกรูปแบบจะต้องอยู่ในองค์ประกอบ FORM ซึ่งอาจมีหลายรูปแบบในเอกสารเดียว แต่องค์ประกอบ FORM ไม่สามารถซ้อนกันได้"

B. วิธีแก้ปัญหา

มีวิธีแก้ไขปัญหาโดยใช้ JavaScript โดยไม่จำเป็นต้องซ้อนแท็กฟอร์ม

"วิธีสร้างแบบฟอร์มซ้อนกัน" (แม้จะมีชื่อเรื่องนี่ไม่ใช่แท็กฟอร์มที่ซ้อนกัน แต่มีวิธีแก้ไข JavaScript)

คำตอบสำหรับคำถาม StackOverflow นี้

หมายเหตุ: แม้ว่าใครสามารถหลอกลวงผู้ตรวจสอบความถูกต้องของ W3C ให้ส่งหน้าโดยจัดการ DOM ผ่านการเขียนสคริปต์ แต่ก็ยังไม่ใช่ HTML ที่ถูกกฎหมาย ปัญหาของการใช้วิธีการดังกล่าวคือพฤติกรรมของรหัสของคุณไม่ได้รับการรับประกันกับเบราว์เซอร์ (เนื่องจากไม่ได้มาตรฐาน)

— Geneq
แหล่งที่มา

4

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

53

ในกรณีที่มีคนพบโพสต์นี้ที่นี่เป็นทางออกที่ดีโดยไม่ต้องใช้ JS ใช้ปุ่มส่งสองปุ่มที่มีแอททริบิวชื่อที่แตกต่างกันตรวจสอบในภาษาเซิร์ฟเวอร์ของคุณซึ่งกดปุ่มส่งเนื่องจากมีเพียงปุ่มเดียวเท่านั้นที่จะถูกส่งไปยังเซิร์ฟเวอร์

<form method="post" action="ServerFileToExecute.php">
    <input type="submit" name="save" value="Click here to save" />
    <input type="submit" name="delete" value="Click here to delete" />
</form>

ฝั่งเซิร์ฟเวอร์อาจมีลักษณะเช่นนี้หากคุณใช้ php:

<?php
    if(isset($_POST['save']))
        echo "Stored!";
    else if(isset($_POST['delete']))
        echo "Deleted!";
    else
        echo "Action is missing!";
?>

— อันเดรีย
แหล่งที่มา

นี่ไม่ใช่สิ่งเดียวกันในกรณีนี้คุณต้องการไปที่หน้าเดียวกันและดำเนินการต่าง ๆ ด้วยแบบฟอร์ม 2 แบบคุณสามารถไปที่หน้าอื่นและ / หรือมีข้อมูลที่แตกต่างกันในแต่ละกรณี

— Luis Tellez

คุณสามารถใช้ไฟล์ php เป็น wrapper และรวมไฟล์ที่คุณต้องการหากคุณต้องการรหัสในไฟล์ที่แตกต่างกัน ดังนั้นแทนที่จะ (echo "เก็บไว้!";) คุณสามารถเขียน (รวมถึง "a.php";)

— Andreas

ฉันมีปุ่มลบหลายปุ่มในแบบฟอร์มของฉัน (เหตุผลที่ฉันมาที่นี่เพื่อพิจารณารูปแบบซ้อนกัน) 1 สำหรับแต่ละระเบียนและช่องทำเครื่องหมายรายการในแต่ละรายการเพื่อทำการลบแบบกลุ่ม คำตอบของคุณทำให้ฉันคิดใหม่แผนของฉันคิดว่าตอนนี้ฉันควรตั้งชื่อปุ่มสำหรับการลบแต่ละรายการด้วยรหัสตัวเลขและการลบแบบกลุ่ม ฉันจะทำให้ PHP ทำการเรียงลำดับ

— Chris

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

27

HTML 4.x & HTML5 ไม่อนุญาตให้ใช้แบบฟอร์มซ้อนกัน แต่ HTML5 จะอนุญาตให้แก้ไขปัญหาด้วยแอตทริบิวต์ "form" ("เจ้าของแบบฟอร์ม")

สำหรับ HTML 4.x คุณสามารถ:

ใช้แบบฟอร์มพิเศษที่มีเฉพาะฟิลด์ที่ถูกซ่อน & JavaScript เพื่อตั้งค่าอินพุตและส่งแบบฟอร์ม
ใช้ CSS เพื่อจัดเรียงฟอร์ม HTML หลายแบบให้ดูเหมือนเอนทิตี้เดียว - แต่ฉันคิดว่ามันยากเกินไป

— Nishi
แหล่งที่มา

1

ไม่แน่ใจว่าทำไมสิ่งนี้ถึงถูกโหวต นี่คือลิงค์ไปยังส่วน W3C ของเจ้าของแบบฟอร์ม: w3.org/TR/html5/…

— SooDesuNe

5

@SooDesuNe ลิงก์ของคุณล้าสมัยแล้วนี่คืออันใหม่w3.org/TR/html5/forms.html#form-owner

— chiliNUT

13

อย่างที่คนอื่น ๆ พูดกันมันไม่ถูกต้อง HTML

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

— user64075
แหล่งที่มา

1

นี่คือสิ่งที่ฉันคิดว่าฉันจะต้องการสำหรับเว็บไซต์ของฉัน แต่จะรักตัวอย่างของวิธีการทำเช่นนี้

— Brian Peterson

8

ไม่ข้อมูลจำเพาะ HTML ระบุว่าไม่มีFORMองค์ประกอบใดควรมีFORMองค์ประกอบอื่น

— เดวิดแกรนท์
แหล่งที่มา

5

คุณสามารถตอบคำถามของคุณเองได้อย่างง่ายดายมากโดยป้อนโค้ด HTML ลงในW3 ตรวจสอบ (มันมีช่องป้อนข้อความคุณไม่ต้องใส่รหัสบนเซิร์ฟเวอร์ ... )

(และไม่มันจะไม่ตรวจสอบ)

— Christian Studer
แหล่งที่มา

5

ค่อนข้างใช้จาวาสคริปต์ที่กำหนดเองวิธีการภายในแอตทริบิวต์การกระทำของแบบฟอร์ม!

เช่น

<html>
    <head>
        <script language="javascript" type="text/javascript">
        var input1 = null;
        var input2 = null;
        function InitInputs() {
            if (input1 == null) {
                input1 = document.getElementById("input1");
            }
            if (input2 == null) {
                input2 = document.getElementById("input2");
            }

            if (input1 == null) {
                alert("input1 missing");
            }
            if (input2 == null) {
                alert("input2 missing");
            }
        }
        function myMethod1() {
            InitInputs();
            alert(input1.value + " " + input2.value);
        }
        function myMethod2() {
            InitInputs();
            alert(input1.value);
        }
        </script>
    </head>
    <body>
        <form action="javascript:myMethod1();">
            <input id="input1" type="text" />
            <input id="input2" type="text" />
            <input type="button" onclick="myMethod2()" value="myMethod2"/>
            <input type="submit" value="myMethod1" />
        </form>
    </body>
</html>

— Andreas Niedermair
แหล่งที่มา

5

ความเป็นไปได้คือการมี iframe ภายในรูปแบบภายนอก iframe มีแบบฟอร์มด้านใน ตรวจสอบให้แน่ใจว่าใช้<base target="_parent" />แท็กที่อยู่ภายในแท็กส่วนหัวของ iframe เพื่อทำให้ฟอร์มทำงานเป็นส่วนหนึ่งของหน้าหลัก

— Robin Manoli
แหล่งที่มา

4

ไม่เห็นw3c

— tliff
แหล่งที่มา

1

ไม่มันไม่ถูกต้อง แต่ "โซลูชัน" สามารถสร้างหน้าต่างโมดัลนอกฟอร์ม "a" ที่มีฟอร์ม "b"

<div id="myModalFormB" class="modal">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
        <button type="submit">Save</button>
    </form>
</div>

<form action="a">
    <input.../>
    <a href="#myModalFormB">Open modal b </a>
    <input.../>
</form>

มันสามารถทำได้อย่างง่ายดายถ้าคุณใช้ bootstrap หรือ materialize css ฉันกำลังทำสิ่งนี้เพื่อหลีกเลี่ยงการใช้ iframe

— Jonathas Hortense
แหล่งที่มา

0

วิธีแก้ปัญหาที่ไม่ใช่ JavaScript สำหรับแท็กฟอร์มซ้อน:

เพราะคุณอนุญาตให้

เขตข้อมูลทั้งหมดลบด้วยเขตข้อมูลภายใน "b"

เมื่อส่ง "a" สิ่งต่อไปนี้สามารถใช้งานได้โดยใช้แบบฟอร์มเว็บปกติโดยไม่ต้องใช้เทคนิค JavaScript แฟนซี:

ขั้นตอน 1. วางแต่ละแบบฟอร์มบนหน้าเว็บของตัวเอง

ขั้นตอนที่ 2 ใส่ iframe ทุกที่ที่คุณต้องการให้ฟอร์มย่อยปรากฏ

ขั้นตอนที่ 3 กำไร

ฉันพยายามใช้เว็บไซต์สนามเด็กเล่นรหัสเพื่อแสดงตัวอย่าง แต่หลายคนห้ามการฝังเว็บไซต์ของพวกเขาใน iframes แม้ในโดเมนของตัวเอง

— ADJenks
แหล่งที่มา

-1

หากคุณต้องการแบบฟอร์มของคุณเพื่อส่ง / ส่งข้อมูลไปยังฐานข้อมูลเชิงสัมพันธ์ 1: M ฉันขอแนะนำให้สร้างทริกเกอร์ DB "หลังจากแทรก" ในตาราง A ที่จะแทรกข้อมูลที่จำเป็นสำหรับตาราง B

— cbWrites
แหล่งที่มา

-2

ไม่มันไม่ถูกต้อง แต่คุณสามารถลวงตำแหน่งในของคุณได้HTMLด้วยความช่วยเหลือCSSและjQueryการใช้งาน ขั้นแรกให้สร้างคอนเทนเนอร์ div ในฟอร์มหลักของคุณจากนั้นในส่วนอื่น ๆ ของเพจจะมีรูปแบบ div พร้อมลูก (ภายใน) ของคุณ:

<form action="a">
    <input.../>
    <div class="row" id="other_form_container"></div>
    <input.../>
</form>

....

<div class="row" id="other_form">
    <form action="b">
        <input.../>
        <input.../>
        <input.../>
    </form>
</div>

ให้ตู้คอนเทนเนอร์ของคุณกองบ้างมั่นคง

<style>
  #other_form_container {
    height:90px;
    position:relative;
  }
</style>

ขอขอบคุณเคล็ดลับตำแหน่ง "other_form" ที่ค่อนข้างตรงกับคอนเทนเนอร์ div

<script>
  $(document).ready(function() {
    var pos = $("#other_form_container").position();
    $("#other_form").css({
      position: "absolute",
      top: pos.top - 40,
      left: pos.left + 7,
      width: 500,
    }).show();
  });
</script>

PS: คุณจะต้องเล่นกับตัวเลขเพื่อให้มันดูดี

— Yaroslav Varkhol
แหล่งที่มา

การมีแบบฟอร์ม html ภายในแบบฟอร์ม html อื่นนั้นถูกต้องหรือไม่

วิธีแก้ปัญหาที่ไม่ใช่ JavaScript สำหรับแท็กฟอร์มซ้อน: