क्या HTML फॉर्म को किसी अन्य HTML फॉर्म के अंदर रखना वैध है?

Question

क्या यह मान्य HTML निम्नलिखित है:

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

इसलिए जब आप "b" सबमिट करते हैं तो आपको केवल आंतरिक रूप में फ़ील्ड मिलते हैं। जब आप "a" जमा करते हैं, तो आपको "b" के भीतर सभी फ़ील्ड माइनस मिलते हैं।

यदि यह संभव नहीं है, तो इस स्थिति के लिए कौन से वर्कअराउंड उपलब्ध हैं?

Comments

यह मुझे लगता है कि यह वास्तव में एक बहुत ही सामान्य आवश्यकता है जो db इंटरफेस से परिचित है - यदि कोई प्रपत्र तालिका A को अपडेट करता है, और उस तालिका में तालिका B से जुड़ा फ़ील्ड है, तो हम अक्सर उसके लिए प्रविष्टियां अपडेट या बनाने का एक तरीका चाहते हैं। लिंक किए गए फ़ील्ड को वर्तमान फ़ॉर्म को छोड़ने के बिना। नेस्टेड सब-फॉर्म इसे करने के लिए एक बहुत ही सहज तरीका होगा (और कई डेस्कटॉप डेटाबेस द्वारा लागू किया गया यूआई है)।

— मोनोटस्कर

यह मान्य नहीं है। वर्कअराउंड हैं लेकिन आपको इस डेटा को प्राप्त करने के लिए किसी अन्य विधि का उपयोग करना चाहिए। PHP मेल स्क्रिप्ट में सभी डेटा भेजने वाले एक फॉर्म पर विचार करें, जो तब एक ईमेल के रूप में भाग (ए से भाग) और दूसरे ईमेल के रूप में भाग (बी से हिस्सा) को प्रस्तुत करता है। या एक डेटाबेस में, या जो कुछ भी आप इस डेटा के साथ कर रहे हैं। घोंसले के शिकार रूपों किया जा सकता है, लेकिन यह जवाब नहीं है!

के संभावित डुप्लिकेट आप कर सकते हैं घोंसला HTML रूपों?

— उपयोगकर्ता

सवाल अच्छा है, लेकिन एक त्वरित Google खोज (दिए गए लिंक को भी क्लिक किए बिना) से पता चलता है कि प्रपत्रों के भीतर के फॉर्म वैध हैं या नहीं। i, व्यक्तिगत रूप से, @Andreas जवाब पसंद आया।

— जेरेट लॉयड

Answer 1

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 तत्व को नस्ट नहीं किया जा सकता है।"

ख । वर्कअराउंड

घोंसले के प्रपत्रों की आवश्यकता के बिना जावास्क्रिप्ट का उपयोग करके वर्कअराउंड हैं।

"नेस्टेड फॉर्म कैसे बनाएं।" (शीर्षक के बावजूद इस है नहीं फ़ॉर्म टैग नेस्ट, लेकिन एक जावास्क्रिप्ट वैकल्पिक हल)।

इस StackOverflow सवाल का जवाब

नोट: यद्यपि कोई W3C Validators को स्क्रिप्टिंग के माध्यम से DOM में हेरफेर करके पृष्ठ को पास करने के लिए ट्रिक कर सकता है, फिर भी यह कानूनी HTML नहीं है। इस तरह के दृष्टिकोणों का उपयोग करने में समस्या यह है कि अब आपके कोड का व्यवहार ब्राउज़र में गारंटी नहीं है। (चूंकि यह मानक नहीं है)

Comments

मेरी टिप्पणी को ऊपर देखें .... यह एक अद्भुत उत्तर है, महान काम है, लेकिन एक भयानक अभ्यास है। आप एक ही काम कम परेशानी के साथ कर सकते हैं एक PHP स्क्रिप्ट के लिए सभी डेटा जमा करने और वहाँ से अपने स्वयं के गंतव्यों को विभाजित करने और भेजने के लिए। हालाँकि, आपने उस प्रश्न का उत्तर दिया जो महान है, यह सिर्फ एक बुरा और व्यर्थ अभ्यास है क्योंकि आप इसे कम समय में सही तरीके से कर सकते हैं।

Answer 2

अगर किसी को यह पद मिलता है तो जेएस की आवश्यकता के बिना यह एक महान समाधान है। अपनी सर्वर भाषा में विभिन्न नाम विशेषताओं की जांच के साथ दो सबमिट बटन का उपयोग करें जो सबमिट बटन दबाया गया था क्योंकि उनमें से केवल एक ही सर्वर पर भेजा जाएगा।

<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!";
?>

Comments

यह समान नहीं है, इस मामले में आप एक ही पृष्ठ पर जाना चाहते हैं और विभिन्न क्रियाएं करते हैं, 2 रूपों के साथ आप विभिन्न पृष्ठों पर जा सकते हैं और / या प्रत्येक मामले में अलग-अलग जानकारी भेजी जाती है।

— लुइस टेललीज़

आप रैपर के रूप में एक php फाइल का उपयोग कर सकते हैं और यदि आप विभिन्न फाइलों में कोड चाहते हैं तो कोई भी फाइल शामिल कर सकते हैं। तो इसके बजाय (गूंज "संग्रहीत!";) आप लिख सकते हैं ("a.php" शामिल हैं;)

— एंड्रियास

मेरे रूप में मेरे पास कई डिलीट बटन हैं (कारण मैं नेस्टेड फॉर्म पर विचार करते हुए यहां आ रहा था) 1 प्रत्येक रिकॉर्ड के लिए और प्रत्येक पर एक सूची चेकबॉक्स एक थोक डिलीट करने के लिए। आपकी प्रतिक्रिया ने मुझे यह सोचकर अपनी योजना im पर पुनर्विचार करने के लिए प्रेरित किया है कि अब मुझे एक संख्यात्मक आईडी के साथ अलग-अलग डिलीट के लिए बटन और उस के रूप में बल्क डिलीट का नाम देना चाहिए। इल बनाओ php छँटाई करते हैं।

— क्रिस

@ और धन पर है। यह अलग-अलग समाधान है कि इनपुट फॉर्म की व्याख्या कैसे की जाती है। यदि आप Post / Redirect / Get का उपयोग करते हैं तो गंतव्य भी भिन्न हो सकते हैं। हालाँकि, यदि आपके पास सर्वर क्रियाओं में लचीलापन नहीं है, तो अपने कार्यों को एक सिंगल 'एओआरबी' समापन बिंदु पर संयोजित करें, तो मुझे लगता है कि आप एक हैक के साथ फंस गए हैं जो मुझे डर लगता है।

Answer 3

HTML 4.x और HTML5 नेस्टेड फ़ॉर्म को अस्वीकार कर देता है, लेकिन HTML5 "फ़ॉर्म" विशेषता ("फ़ॉर्म स्वामी") के साथ एक वर्कअराउंड की अनुमति देगा।

HTML के लिए 4.x आप कर सकते हैं:

1. अपने इनपुट को सेट करने और फ़ॉर्म जमा करने के लिए केवल छिपे हुए फ़ील्ड और जावास्क्रिप्ट के साथ एक अतिरिक्त फ़ॉर्म का उपयोग करें।
2. एक एकल इकाई की तरह दिखने के लिए कई HTML फॉर्म को लाइन करने के लिए CSS का उपयोग करें - लेकिन मुझे लगता है कि यह बहुत कठिन है।

Comments

यह सुनिश्चित नहीं था कि यह डाउन वोट क्यों दिया गया था। यहाँ फॉर्म मालिकों के W3C अनुभाग का लिंक: w3.org/TR/html5/…

— SooDesuNe

@SooDesuNe आपका लिंक पुराना है, यहाँ नया है w3.org/TR/html5/forms.html#form-owner

— chiliNUT

Answer 4

जैसा कि अन्य लोगों ने कहा है, यह मान्य HTML नहीं है।

ऐसा लगता है कि आपके ऐसा करने से रूपों को एक दूसरे के भीतर नेत्रहीन रूप से स्थित किया जा सकता है। यदि ऐसा है, तो बस दो अलग-अलग फ़ॉर्म करें और उन्हें स्थिति देने के लिए CSS का उपयोग करें।

Comments

यह वही है जो मैं सोच रहा था कि मुझे अपनी वेबसाइट की आवश्यकता होगी, लेकिन यह कैसे करना है, इसका एक उदाहरण पसंद आएगा।

— ब्रायन पीटरसन

Answer 5

नहीं, HTML विनिर्देश कहता है कि किसी भी FORMतत्व में दूसरा FORMतत्व नहीं होना चाहिए ।

Answer 6

W3 Validator में HTML कोड इनपुट करके आप बहुत ही आसानी से अपने प्रश्न का उत्तर दे सकते हैं । (इसमें एक टेक्स्ट इनपुट फ़ील्ड की सुविधा है, आपको अपना कोड सर्वर पर भी नहीं डालना होगा ...)

(और नहीं, यह मान्य नहीं होगा।)

Answer 7

बल्कि फार्म की कार्रवाई विशेषता के अंदर एक कस्टम जावास्क्रिप्ट-विधि का उपयोग करें!

जैसे

<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>

Answer 8

एक संभावना बाहरी रूप के अंदर एक iframe है। आइफ्रेम में आंतरिक रूप होता है। <base target="_parent" />मुख्य पृष्ठ के भाग के रूप में व्यवहार करने के लिए iframe के मुख्य टैग के अंदर टैग का उपयोग करना सुनिश्चित करें ।

Answer 9

नहीं, w3c देखें

Answer 10

नहीं, यह मान्य नहीं है। लेकिन "समाधान" फॉर्म के बाहर एक मोडल विंडो बना सकता है "ए" फॉर्म "बी" युक्त।

<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>

यह आसानी से किया जा सकता है अगर आप बूटस्ट्रैप या भौतिक सीएसएस का उपयोग कर रहे हैं। मैं iframe का उपयोग करने से बचने के लिए ऐसा कर रहा हूं।

Answer 11

नेस्टिंग फॉर्म टैग्स के लिए एक गैर-जावास्क्रिप्ट वर्कअराउंड:

क्योंकि आप के लिए अनुमति देते हैं

सभी फ़ील्ड "बी" के भीतर घटाते हैं।

"ए" जमा करते समय, निम्नलिखित काम करेगा, बिना फैंसी जावास्क्रिप्ट ट्रिक्स के नियमित वेब-फॉर्म का उपयोग करना:

चरण 1. प्रत्येक प्रपत्र को अपने वेब पेज पर रखें।

चरण 2. जहाँ भी आप इस उप-प्रपत्र को प्रदर्शित करना चाहते हैं, एक iframe डालें।

चरण 3. लाभ।

मैंने एक डेमो दिखाने के लिए एक कोड-खेल की वेबसाइट का उपयोग करने की कोशिश की, लेकिन उनमें से कई अपने स्वयं के डोमेन के भीतर, आइफ्रेम में अपनी वेबसाइटों को एम्बेड करने पर रोक लगाते हैं।

Answer 12

यदि आपको 1: M रिलेशनल डेटाबेस में डेटा सबमिट / कमिट करने के लिए आपके फॉर्म की आवश्यकता है, तो मैं टेबल A पर "इन्सर्ट" डीबी ट्रिगर बनाने की सलाह दूंगा जो टेबल बी के लिए आवश्यक डेटा सम्मिलित करेगा।

Answer 13

नहीं, यह मान्य नहीं है लेकिन आप अपने आंतरिक रूप की स्थिति को HTMLमदद CSSऔर jQueryउपयोग की मदद से ट्रिक कर सकते हैं । पहले अपने माता-पिता के रूप में कुछ कंटेनर डिव बनाएं और फिर पृष्ठ पर किसी अन्य स्थान पर अपने बच्चे (आंतरिक) फॉर्म के साथ 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> 

कंटेनर div के लिए अपेक्षाकृत "other_form" स्थिति का धन्यवाद।

<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>

पुनश्च: यह अच्छा दिखने के लिए आपको संख्याओं के साथ खेलना होगा।