एक टेबल के अंदर फॉर्म

Question

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

जैसे, प्रपत्र सबमिट करना फ़ील्ड को शामिल करने में विफल रहता है।

तालिका पंक्ति और इनपुट निम्नानुसार हैं:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

कोई मदद महान होगा, धन्यवाद।

Comments

<form>अंदर नहीं डाला जा सकता <tr>।

— डेरेक 會 會 k

और आप बंद करना भूल गए <tr>।

— डेरेक 會 會

प्रदर्शन का उपयोग करें: अपने फॉर्म के लिए टेबल-पंक्ति और टेबल टैग को पूरी तरह से खोदें। मेरा जवाब यहां देखें: stackoverflow.com/a/15600151/1038812

— मैथ्यू

यह नहीं हो सकता है, लेकिन यह काम करता है ...

— Sandburg

Answer 1

एक फॉर्म को बच्चे के तत्व होने की अनुमति नहीं है table, tbodyया tr। एक को रखने का प्रयास करने से ब्राउज़र को तालिका के बाद प्रकट होने वाले फ़ॉर्म को स्थानांतरित करने का कारण होगा (अपनी सामग्री - तालिका पंक्तियों, तालिका कोशिकाओं, इनपुटों आदि को पीछे छोड़ते हुए)।

आपके पास एक फ़ॉर्म के अंदर एक पूरी तालिका हो सकती है। आपके पास टेबल सेल के अंदर एक फॉर्म हो सकता है। आपके पास प्रपत्र के अंदर तालिका का भाग नहीं हो सकता है।

संपूर्ण तालिका के चारों ओर एक फ़ॉर्म का उपयोग करें। फिर या तो क्लिक करें सबमिट बटन का उपयोग करके यह निर्धारित करें कि कौन सी पंक्ति को प्रोसेस करना है (जल्दी होना) या हर पंक्ति को संसाधित करना (बल्क अपडेट की अनुमति देना)।

HTML 5 form विशेषता का परिचय देता है । यह आपको तालिका के बाहर प्रति पंक्ति एक प्रपत्र प्रदान करने की अनुमति देता है और फिर किसी दिए गए पंक्ति में सभी प्रपत्र नियंत्रण को इसके उपयोग वाले उन रूपों में से एक के साथ जोड़ देता है id।

Comments

पूरी तालिका के लिए एक फ़ॉर्म का उपयोग करके ध्यान रखें, सभी फ़ील्ड सर्वर को भेजे जाएंगे, भले ही वे खाली हों। यह डेटा की एक बड़ी राशि हो सकती है !!! बड़े पैमाने पर / सार्वजनिक उपयोग के लिए, उस पंक्ति में एक बटन से खोले गए एक संवाद (तालिका में नहीं) का उपयोग करना पसंद करें।

— लोएनिक्स

@ फोनिक्स: यह बहुत संभावना नहीं है कि आप लोगों की बैंडविड्थ पर एक महत्वपूर्ण बोझ होने के लिए (कम से कम जब एक विशिष्ट वेबपेज के आकार की तुलना में) तालिका में पर्याप्त डेटा डाल देंगे। उपयोगकर्ताओं को एक पंक्ति संपादित करने और अपने परिवर्तनों को बनाने में सक्षम होने के बीच एक और पृष्ठ लोड करने की आवश्यकता है, OTOH, एक कष्टप्रद अतिरिक्त इंटरैक्शन होगा जो उन्हें प्रदर्शन करना होगा।

— क्वेंटिन

मूल प्रश्न में प्रस्तावित समाधान के लिए आपको संपादन बटन की आवश्यकता नहीं है।

— क्वेंटिन

मानकों में <form>अंदर की मनाही क्यों <table>?

— 1234 ईआर

@ क्वेंटिन मेला काफी। अफ़सोस की बात है कि यह दो दशकों के बाद भी कोई स्पष्ट कारण नहीं है।

— 1234ru

Answer 2

यदि आप अपना मार्कअप सहेजना चाहते हैं, तो "फ़ॉर्म" विशेषता का उपयोग करें :

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(* <Form> टैग के बाहर के फॉर्म फ़ील्ड)

पहली 2 टिप्पणियाँ भी देखें

Comments

ध्यान दें, यह समाधान केवल HTML5 के साथ मान्य है।

— थ्रीप्लसोनोन

इसके अलावा, यह यहाँ

— Souhaieb Besbes

प्रपत्र विशेषता की स्थिति है जिसका मतलब है कि आप बहुत रोगी होना जरूरी 'विचाराधीन' developer.microsoft.com/en-us/microsoft-edge/platform/status/... इस बीच आप इस polyfill की कोशिश करें और देखें कि वह आपके लिए काम कर सकते हैं stackoverflow.com/a/26696165/648484

— सोहाएब बेसबस

अब "विकास में" लगता है, और उपयोग करने के लिए ठीक है

— user1156544

@ user1156544 यह एज में अब समर्थित है, लेकिन IE नहीं। यदि आपको IE का समर्थन करने की आवश्यकता है, तो आप इस समाधान के साथ भाग्य से बाहर हैं। मेरी योजना दो फार्म तत्वों के लिए दो तालिकाओं का उपयोग करना है (मुझे विश्वास नहीं हो सकता है कि मुझे ऐसा करना होगा)। धन्यवाद Microsoft!

— प्लूटो

Answer 3

: यदि आप एक "संपादन योग्य ग्रिड" यानी संरचना की तरह एक मेज आप पंक्तियों में से किसी एक रूप करने की अनुमति देता है कि, उपयोग सीएसएस कि नकल टेबल टैग के लेआउट चाहते हैं display:table, display:table-rowऔर display:table-cell।

अपनी पूरी तालिका को एक रूप में लपेटने की आवश्यकता नहीं है और अपनी तालिका की प्रत्येक स्पष्ट पंक्ति के लिए एक अलग रूप और तालिका बनाने की आवश्यकता नहीं है।

इसके बजाय यह प्रयास करें:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

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

एक TR टैग (या TR एक FORM के आसपास) के लिए FORM टैग लपेटने में समस्या यह है कि यह अमान्य HTML है। FORM अभी भी हमेशा की तरह जमा करने की अनुमति देगा लेकिन इस बिंदु पर DOM टूट गया है। नोट: अपने FORM या TR के बच्चे तत्वों को जावास्क्रिप्ट के साथ प्राप्त करने का प्रयास करें, यह अप्रत्याशित परिणाम ला सकता है।

ध्यान दें कि IE7 इन सीएसएस तालिका शैलियों का समर्थन नहीं करता है और IE8 को "मानक" मोड में लाने के लिए सिद्धांत की घोषणा की आवश्यकता होगी: (यह एक या कुछ समतुल्य का प्रयास करें)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

कोई भी अन्य ब्राउज़र जो डिस्प्ले का समर्थन करता है: टेबल, डिस्प्ले: टेबल-पंक्ति और डिस्प्ले: टेबल-सेल को आपकी सीएसएस डेटा तालिका को उसी तरह प्रदर्शित करना चाहिए, जैसे कि आप टेबल, टीआर और टीडी टैग का उपयोग कर रहे थे। उनमें से ज्यादातर करते हैं।

ध्यान दें कि आप भी नकल ठेड, tbody, के साथ एक और DIV में अपनी पंक्ति समूहों लपेटकर द्वारा tfoot कर सकते हैं display: table-header-group, table-row-groupऔर table-footer-groupक्रमशः।

नोट: केवल एक चीज जो आप इस विधि से नहीं कर सकते हैं वह है कोलस्पैन।

इस चित्र को देखें: http://jsfiddle.net/ZRQPP/

Comments

यह उल्लेख करने के लिए +1 कोल्पसन सक्षम नहीं करता है ... जो मैंने इसे पढ़ने के बाद याद किया होगा;;

— जोहान्स रूडोल्फ

यह हरे रंग की जाँच का उत्तर होना चाहिए (भले ही वास्तव में टेबल टैग का उपयोग न करें)

— एलेसियो