फिर भी एक अन्य divs टेबल्स बनाम मुद्दा: फॉर्म्स

Question

[मेटा-टिप्पणी:] मैं सवाल पेज ढूंढ रहे थे, "divs टेबल्स बनाम" की बहुत थक गया हो रही है "divs बनाम तालिकाओं का उपयोग करने के लिए जब" "divs टेबल्स की तुलना में बेहतर कर रहे हैं" "टेबल्स सीएसएस "और सभी प्रश्नों वही बात OMG लोगों पूछना, लेकिन मैं यह देखने के लिए सभी तरह से लोगों की विहित उदाहरण के अनुवाद से निपटने चाहते हैं" बनाम तुम क्यों छोड़ देना और तालिकाओं का उपयोग करना चाहिए ":

<table> 
    <tr> 
    <td> Name </td> 
    <td> <input> </td> 
    </tr> 
    <tr> 
    <td> Social Security Number </td> 
    <td> <input> </td> 
    </tr> 
</table> 

प्रश्न: उपरोक्त को लागू करने के लिए सबसे अच्छा (अर्थात्, आसानी से, मजबूती से, द्रव रूप से, पोर्टेबल) कैसे कार्यान्वित करें। शुरुआत करने वालों के लिए, मुझे लगता है कि एक निष्क्रिय कार्यान्वयन पहले कॉलम के लिए एक निश्चित कॉलम चौड़ाई का उपयोग करता है, लेकिन इसमें गतिशील रूप से जेनरेट की गई सामग्री के लिए iffy परिणाम हो सकते हैं। उत्तर में आपके दृष्टिकोण की ताकत/कमजोरियों सहित अच्छा होगा।

पीएस एक और मुझे आश्चर्य है कि बहुत कुछ है जो लंबवत केंद्रित है लेकिन इसके लिए हैक jakpsatweb.cz

संपादित करें: स्कूनलाइफ एक अच्छा उदाहरण लाता है कि मैंने सावधानी से समस्या क्यों नहीं सोचा। सारणी एक साथ कई कॉलम संरेखित कर सकते हैं। प्रश्न अभी भी खड़ा है (मैं संरेखण/लेआउट के लिए उपयोग की जाने वाली विभिन्न सीएसएस तकनीकों को देखना चाहता हूं) - हालांकि समाधान जो उसे संभाल सकते हैं? अधिक शामिल उदाहरण निश्चित रूप से पसंद किया जाता है।

Answer 1

क्या मैं आमतौर पर करते हैं:

<form> 
<label for="param_1">Param 1</label> 
<input id="param_1" name="param_1"><br /> 
<label for="param_2">Param 2</label> 
<input id="param_2" name="param_2"><br /> 
</form> 

और CSS में:

label,input { display: block; float: left; margin-bottom: 1ex; } 
input { width: 20em; } 
label { text-align: right; width: 15em; padding-right: 2em; } 
br { clear: left; } 

बेशक

, आप अपने वास्तविक आंकड़ों के अनुसार चौड़ाई परिभाषित करने के लिए :-)

होगा

• सबसे पहले, लेबल और इनपुट display: block दे इतना है कि यह एक आकार सौंपा जा सकता है और खड़े हो।
• वे दोनों float: left क्योंकि एक्सप्लोरर चीज़ें थोड़ी करता है अलग ढंग से
• स्वरूप लेबल अच्छी तरह से
• br यह है कि एक clear: left कहीं हैक तो मिलता है, और मुझे याद है कि लेबल पर डालने कुछ ब्राउज़र पर काम नहीं किया ।

इसके अलावा, br साथ आप एक अच्छे स्वरूपण भले ही ब्राउज़र सीएसएस का समर्थन नहीं करता :-)

Answer 2

मैं की तरह कुछ के बारे में सोच रहा था मिलती है:

<div style="text-align:right; float:left;"> 
    Name: <input /> <br /> 
    Social Security Number: <input /> <br /> 
</div> 

जो, अगर सही कॉलम निश्चित-लंबाई है, परिवर्तनीय पाठ की लंबाई के साथ ठीक संरेखित है, लेकिन मुझे आश्चर्य है कि इस विधि के नुकसान क्या हैं?

Answer 3

चाल तब होती है जब फ़ॉर्म आपके नमूने से अधिक जटिल हो जाता है, आपको पता चलता है कि तालिकाएं "लचीला ग्रिड" सक्षम करती हैं जो कोई अन्य तत्व नहीं करती है।

उदा क्या होगा यदि "इनपुट" टेक्स्ट बॉक्स से अधिक जटिल है? जैसे अपने स्वयं के लेबल के साथ प्रत्येक रेडियो बटन का एक समूह,:

Color: [____Red___][v] 
Hood: [*] 
Size: (_) Small 
     (_) Medium 
     (_) Large 
     (*) X-Large 

आप सभी की जरूरत सरल रूप हैं, तो सीएसएस महान है, लेकिन जैसे ही आप एक ग्रिड की जरूरत के रूप में, बातें दिलचस्प हो ...

यदि आप वास्तव में ऐसा करना चाहते हैं, तो मैं The Man In Blue's Solution देखेंगे, यह बहुत अच्छी तरह से काम करता है और बहुत साफ है।

Answer 4

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

Btw - कोई <br />

<form> 
<fieldset> 
    <legend>Personal Info</fieldset> 
    <div> 
    <label for="name">Name</label> 
    <input id="name" name="name" /> 
    </div> 
    <div> 
    <label for="ssn">Social Security Number</label> 
    <input id="ssn" name="ssn" /> 
    </div> 
</fieldset> 
</form> 

को आप overflow: hidden को <divs> स्पष्ट या सेट उन्हें सुनिश्चित करना है कि तैरता साफ़ हो जाते हैं कर सकते हैं। ऊपर एचटीएमएल से

विकल्प:

Name |==============| SSN |==============| 

Name |==============| 
SSN |==============| 

Name  |==============| 
SSN  |==============| 

    Name |==============| 
    SSN |==============| 

    Name: |==============| 
    SSN: |==============| 

Name: 
|==============| 
SSN: 
|==============| 

के ऊपर सीएसएस के कुछ ही लाइनों के साथ पूरा किया जा सकता

सभी।

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

Answer 5

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

<form action="www.example.com"> 
    <div class="table"> 
     <div class="tbody"> 
      <div class="tr"> 
      <div class="td"> <label for="name">Name</label> </div> 
      <div class="td"> <input id="name"> </div> 
      </div> 
      <div class="tr"> 
      <div class="td"> <label for="ssn">Social Security Number</label> </div> 
      <div class="td"> <input id="ssn"> </div> 
      </div> 
     </div> 
    </div> 
</form> 

साथ

<style type="text/css"> 
     div.table { display:table; border-spacing:2px; } 
     div.tbody { display:table-row-group; } 
     div.tr { display:table-row; } 
     div.td { display:table-cell; vertical-align: middle; padding:1px; } 
    </style> 

यह फ़ायरफ़ॉक्स, क्रोम, ओपेरा और सफारी के नवीनतम संस्करणों के साथ काम करता है। यह आईई 8 बीटा 2 (मानकों मोड) के साथ भी काम करता है। यह आईई 7 या उससे पहले के साथ काम नहीं करता है, लेकिन "प्रगतिशील वृद्धि" और वह सब कुछ।