जटिल फॉर्म तालिका बनाम div

Question

मैंने डीआईवी का उपयोग करके फॉर्म के कार्यान्वयन के उदाहरणों के लिए ऑनलाइन देखा और जो कुछ भी मैं देखता हूं वह एक साधारण कॉलम रूप है। मैं कुछ बहुत जटिल रूप हो, यहाँ एक की एक तस्वीर है:

http://img835.imageshack.us/img835/8292/formn.jpg

यह तालिका के साथ काम (जो मैं करता हूँ) बनाने के लिए आसान है, समस्या सिर्फ मेरे पास है कि कभी कभी मैं करने की जरूरत है अंतराल से बचने के लिए कुछ विकल्पों को प्रदर्शित न करें और मानों को एक पंक्ति तक ले जाएं।

मैंने divs का उपयोग करके कुछ रूप बनाना शुरू कर दिया, लेकिन जब मैं ब्राउज़र विंडो आकार बदलता हूं तो वे अलग हो जाते हैं और चीजों को संरेखित करना आसान नहीं होता है।

यह विषय सहायक है: Is it bad design to use table tags when displaying forms in html? लेकिन यह मेरे कुछ चिंताओं को संबोधित नहीं करता है।

आप समाधान के रूप में क्या प्रस्तावित करेंगे? मैं तालिका में मूल्यों को गतिशील रूप से हटा/डालने या डीआईवी करने की कोशिश कर सकता हूं।

Answer 1

मैं div मार्ग पर जाऊंगा। जब तक आप फ्लोट्स लागू करते हैं, तब तक आप अपनी चौड़ाई से सावधान रहें, जब तक कि विभिन्न स्क्रीन संकल्पों में लेआउट को ठीक से काम करने के लिए यह वास्तव में बहुत सरल है।

1. आपके प्रपत्र या अपने प्रपत्र के आवरण तत्व पर एक अधिकतम चौड़ाई सेट करें:

   यहां कुछ नियम हैं। यदि आप एक पंक्ति पर तत्वों को फ़्लोट करना चाहते हैं तो सुनिश्चित करें कि उनकी चौड़ाई एक साथ जोड़ा गया है, इस चौड़ाई से अधिक नहीं है।

2. यदि आप अपने फ़्लोट किए गए तत्वों को क्षैतिज पैडिंग/मार्जिन जोड़ रहे हैं तो याद रखें कि ये तत्व की कुल चौड़ाई में जोड़ते हैं।
3. पिक्सेल पैडिंग और मार्जिन के साथ प्रतिशत चौड़ाई मिश्रण से बचें। प्रतिशत तत्व चौड़ाई को मूल तत्व और पिक्सेल पैडिंग/मार्जिन को किसी बच्चे तत्व में लागू करें।
4. सब कुछ लाइन में रखने के लिए तत्वों की अपनी पंक्तियों के बीच समाशोधन तत्वों का उपयोग करें।

मार्कअप के रूप में, आप एक अर्थ संरचना बनाने के लिए सीएसएस के साथ प्रपत्र तत्वों का उपयोग कर सकते हैं:

<fieldset> 
    <legend>Fieldset Title</legend> 

    <label for="input1">Input 1:</label> 
    <span><input type="text" id="input1" name="input1"/></span> 
    <label for="input2">Input 2:</label> 
    <span><input type="text" id="input2" name="input2"/></span> 

    <br/> 

    <label for="input3">Input 3:</label> 
    <span><input type="text" id="input3" name="input3"/></span> 
    <label for="input4">Input 4:</label> 
    <span><input type="text" id="input4" name="input4"/></span> 
</fieldset> 

और सीएसएस:

fieldset { 
    padding: 20px 0; 
    width: 600px; 
    margin: 0; 
    border: 0; 
} 

legend { 
    display: block; 
    width: 100%; 
    background: black; 
    color: white; 
} 

label, span{ 
    float: left; 
    width: 150px; 
} 

input { 
    width: 120px; 
} 

br { 
    clear: both; 
} 

आप see the result here कर सकते हैं।

Answer 2

यदि यह एक निश्चित चौड़ाई वाली तालिका है, तो divs और floats के साथ बाहर रखना मुश्किल है। बस अपनी चौड़ाई को वही सेट करें जो आप चाहते हैं।

के लिए एक तरल लेआउट तालिका-और तरल लेआउट, बहुत ही वांछनीय-यह बहुत कठिन है तालिका शैली-प्रदर्शन के बिना एक फार्म की व्यवस्था करने के सामान्य रूप में है, क्योंकि float और position आसानी से की तरह की गणना के लिए अनुमति नहीं देते "इस सेल है निश्चित चौड़ाई वाले लेबल आवंटित किए जाने के बाद माता-पिता की आधा शेष चौड़ाई "।

तो इस तरह के मामलों में, जिसमें आपके द्वारा पोस्ट किए गए दो कॉलम फॉर्म में निश्चित रूप से शामिल है, table-* सीएसएस display मान आपकी एकमात्र संभावना है। यदि आप केवल आईई 8 और अन्य आधुनिक ब्राउज़रों पर लक्षित हैं, तो आप divs का उपयोग कर सकते हैं और स्टाइलशीट में display: table-row et al सेट कर सकते हैं।हालांकि आईई 6-7 और अन्य पुराने/मोबाइल/आला ब्राउज़रों के साथ संगतता के लिए, आपको वास्तविक <table>/<tr>/<td> तत्वों का उपयोग करना होगा, क्योंकि केवल आधुनिक ब्राउज़र तालिका-तत्वों से स्वतंत्र रूप से टेबल-सीएसएस का समर्थन करते हैं।

इसमें कोई शर्म नहीं है। एक फॉर्म वैसे-अर्द्ध-टैब्यूलर है और वैसे भी कोई व्यावहारिक पहुंच क्षमता नहीं है क्योंकि पेज सामग्री उचित रूप से आदेश दिया जाता है।

नोट: तरल-लेआउट रूपों के लिए आपके पास मूल तत्व से मेल खाने के लिए इनपुट फ़ील्ड का आकार भी है। input { width: 100%; } लगभग यह करता है, लेकिन काफी नहीं, क्योंकि width में सीमा या पैडिंग शामिल नहीं है जो डिफ़ॉल्ट रूप से इनपुट प्राप्त करता है। आप CSS3 box-sizing और इसके ब्राउज़र ब्राउज़र-विशिष्ट संस्करणों का उपयोग आधुनिक ब्राउज़र के लिए प्राप्त करने के लिए कर सकते हैं, लेकिन यदि आप इसे आईई 6-7 पर पिक्सेल तक बिल्कुल लाइन करना चाहते हैं तो भी आपको मूल तत्वों के बराबर पैडिंग का उपयोग करना होगा बाल इनपुट क्षेत्र पर सीमा/पैडिंग।

Answer 3

• General information सूची के कुछ प्रकार है, कुंजी> मूल्य सूची सटीक होना करने के लिए - <dl /> शायद सबसे अच्छा संरचना के लिए यह
• Issues values एक टेबल है,
• Ratings एक टेबल है हो सकता है,
• दोनों अव्यवस्थित सूचियों <ul />