एचटीएमएल - टेबल या प्रवाह में फॉर्म लेआउट के लिए सर्वश्रेष्ठ अभ्यास?

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

<table> 
    <tr> 
    <td>Name:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="NameError">*</td> 
    </tr> 
    <tr> 
    <td>Phone:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="PhoneError">*</td> 
    </tr> 
    <tr> 
    <td>Birthday:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="BirthdayError">*</td> 
    </tr> 
</table>

यह बहुत सीएसएस प्रतीत नहीं होता है, लेकिन मैं कैसे एक सीएसएस उन्मुख लेआउट का उपयोग करने के लिए इस काम सही बनाने के लिए यकीन नहीं है।

सर्वोत्तम अभ्यास माना जाएगा?

स्रोत

2011-08-02 Roger Davis

@WTP - कड़ाई से बोलते हुए,

एक परिभाषा सूची (वस्तुओं और उनकी परिभाषाओं की एक सूची) है, इसलिए विशेष रूप से उपयुक्त नहीं, आईएमओ - हालांकि, मैंने उन्हें इस तरह से उपयोग किया है। –

"बेस्ट प्रैक्टिस" का उपयोग करने के लिए एक टेबल का उपयोग करना होगा (represent data) और अपने इनपुट फॉर्म को स्टाइल करने के लिए div, span या अन्य तत्वों के संयोजन का उपयोग करें।

स्रोत

2011-08-02 16:48:02

क्या आप ऐसा करने का नमूना प्रदान कर सकते हैं? मैं इसके लिए टेबल का उपयोग करने से बचने की कोशिश कर रहा हूं, लेकिन यहां पर सभी स्मार्ट लोग एक कामकाजी समाधान के साथ आने में सक्षम नहीं हैं जो उचित रूप से मजबूत है। एक दूसरे डेटा बिंदु के रूप में, मैंने देखा कि सभी बड़ी वेब साइटें या तो तालिका या एक निश्चित चौड़ाई कॉलम का दृष्टिकोण लेती हैं, जिनमें से कोई भी आदर्श नहीं है। –

@Roger: यहां एक फॉर्म के लिए divs का उपयोग करने का एक अच्छा उदाहरण है: https://secure.blippy.com/signup –

@ ब्रैड क्रिस्टी: आपका उदाहरण निश्चित चौड़ाई कॉलम का उपयोग करता है। –

फ़ील्ड लेबल के लिए वास्तविक <label> तत्वों का उपयोग करें, जो उपयोगिता के लिए भी अच्छा है, और उन्हें सीएसएस का उपयोग करके उचित रूप से शैली बनाएं।

उदाहरण के लिए,

<label for="name">Name</label> <input type="text" name="name">

फिर अपने सीएसएस में, आप के साथ, उदाहरण के लिए, display:blockLABEL तत्वों और अपनी इच्छा की चौड़ाई, और उचित clear मूल्यों शैली सकता है।

tickbox/रेडियो आदानों के लिए, इनपुट ही <label> तत्व के अंदर होना चाहिए - इसका मतलब है कि लेबल ही है कि इनपुट चयन करने के लिए, उदाहरण के लिए क्लिक करने योग्य होना चाहिए:

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

स्रोत

2011-08-02 16:48:27

क्या आप थोड़ा और विशिष्ट हो सकते हैं? मैं लेबल पर स्पष्ट चौड़ाई निर्धारित नहीं करना चाहता हूं, मैं चाहता हूं कि नियंत्रणों को जितनी अधिक जगह लेनी पड़े, और उसके बाद लेबल शेष स्थान ले लें, जितना वे उपरोक्त टेबल लेआउट में करेंगे । उदाहरण के लिए: http://jsfiddle.net/roger_davis/7h3bC/ नरक की तरह दिखता है। –

बेस्ट प्रैक्टिस = कभी नहीं लेआउट के लिए टेबल का उपयोग करें।

आप हमारे 960 ग्रिड सिस्टम को ब्लूप्रिंट जैसे सीएसएस ढांचे का प्रयास कर सकते हैं।

स्रोत

2011-08-02 16:49:50 Cygnusx1

... जब तक आप टैब्यूलर डेटा प्रदर्शित नहीं कर रहे हैं, इस स्थिति में यह एक संरचना विकल्प के रूप में

का उपयोग करने के लिए हमेशा उपयुक्त है। यद्यपि आपको लेआउट हैकिंग के लिए

टैग का उपयोग करने से बचना चाहिए, लेकिन HTML टैग्स का उपयोग करने के तरीके में कुछ भी गलत नहीं है।

में टैब्यूलर डेटा प्रस्तुत करना संरचना और शैली को अलग करने का उल्लंघन नहीं करता है; आप उपभोक्ता को बता रहे हैं, "यह संरचित टैब्यूलर डेटा है!" –

हां। मैं सहमत हूँ। यही कारण है कि मैंने लेआउट के लिए कहा--) सामान्य लेआउट की अवधि में। – Cygnusx1

हम एक ही पृष्ठ पर हैं - मैं बस आपके उत्तर का विस्तार कर रहा था, इससे असहमत नहीं था। –

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

आपके उदाहरण में, मुझे यकीन नहीं है कि आप सीएसएस पर किसी तालिका का उपयोग करने से क्या हासिल करते हैं।

स्रोत

2011-08-02 16:50:27

शैतान के वकील का कहना है कि सीएसएस के बजाय एक टेबल का उपयोग करके, उन्हें एक ही मार्कअप को कई वेबसाइटों पर तैनात करने के मामले में "मजबूत" लेआउट मिलता है, जिनमें प्रत्येक के पास "कॉलम" के लिए अपनी अलग-अलग पसंदीदा चौड़ाई हो सकती है। Divs और floats का उपयोग करने की आवश्यकता होती है कि आप निर्दिष्ट चौड़ाई दें यदि आप एक ही तरह के मजबूत गैर-टेबल लेआउट चाहते हैं .... मैं हमेशा प्रत्येक विशेष साइट से मेल खाने के लिए स्वयं को ट्विकिंग सीएसएस ढूंढता हूं, कभी भी एक सामान्य "एक आकार सभी फिट बैठता है" समाधान दुख से ... – Funka

हेक्टेयर ... ओह। मेरा कहना था कि "टेबल पर सीएसएस का उपयोग करने से आपको क्या फायदा होता है"। कम से कम उदाहरण के साथ, मैं कहूंगा कि एक टेबल सबसे अधिक समझ में आता है। –

यहां आपके अनुवर्ती प्रश्न का उत्तर पोस्ट करना क्योंकि यह डुप्लिकेट के रूप में बंद होने की संभावना है।

मुझे यकीन है कि कितना अच्छा इस पर ब्राउज़र समर्थन, FF4 में परीक्षण किया जाता है नहीं कर रहा हूँ: http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm"> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mycheckbox"> Tick me if you dare</label> 
     </div> 
     <div class="tableCell"> 
      <input type="checkbox" name="mycheckbox" id="mycheckbox"> 
     </div> 
    </div> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mytext"> Give me some text test test</label> 
     </div> 
     <div class="tableCell"> 
      <input type="text" name="mytext" id="mytext"> 
     </div> 
    </div> 
</div> 


div#tableForm { 
display:table; 
} 
div.tableRow { 
    display:table-row; 
} 
div.tableCell { 
    display:table-cell; 
    width:inherit; 
}

हाँ, मुझे पता है, मैं सिर्फ divs का उपयोग कर एक टेबल बना लिया है। मुद्दा हालांकि यह है कि यह अच्छी तरह से सुलभ और अर्थात् उचित है।

संपादित करें: आईई 7 में बुरी तरह विफल रहता है जहां निश्चित चौड़ाई एकमात्र तरीका होगा, लेकिन 8 और 9 ठीक लगते हैं।

संपादित 2: लेबल/फ़ील्ड को चारों ओर स्विच और सही संरेखण सेट करें: http://jsfiddle.net/shanethehat/7h3bC/12/। इस बिंदु पर मार्कअप को थोड़ा वर्ग भारी हो रहा है। :first-childleft कक्षा का उपयोग करने का विकल्प होगा, लेकिन IE8 के खर्च पर।

स्रोत

2011-08-03 00:03:23 shanethehat

मुझे आपके बारे में पता नहीं है, लेकिन मैं फॉर्म लेआउट के लिए अधिक मार्कअप का उपयोग नहीं करता हूं।

यहाँ (कोई लेआउट मार्कअप यानी divs, टेबल, आदि) के रूप में एक सरल लॉग के लिए मार्कअप

<form method="post"> 
    <label>Username</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <input type="submit" name="Log In" /> 
</form>

यहाँ प्रपत्र

label,input{float:left} 
label,input[type="submit"]{clear:left}

यहाँ के लिए सीएसएस है परिणाम

है

The rendered result of the above HTML and CSS

इस बारे में अद्भुत बात है:

मार्कअप का अभाव
सीएसएस का अभाव
लचीलापन

आप सीएसएस को देखें, तो label तत्व जा रहा छोड़ दिया साफ़ हो जाता है (और बाईं जारी)। इसका मतलब है कि लेबल अपने साथी input एस के साथ तैर जाएगा हालांकि प्रत्येक label एक नई लाइन होगी।

यह अतिरिक्त इनपुट जोड़ने के लिए बहुत आसान बनाता है। आदानों के बाद भी सत्यापन संदेश

इस सीएसएस

label,input{float:left} 
label,input[type="submit"]{clear:left} 
input[name^="dob_"]{width:44px;margin:2px} 
label{width:70px}

हम

The rendered result of the above HTML and CSS

पाने के साथ उदाहरण

<form method="post"> 
    <label>Name</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <label><abbr title="Date of Birth">D.O.B.</abbr></label> 
    <input type="text" name="dob_day" /> 
    <input type="text" name="dob_month" /> 
    <input type="text" name="dob_year" /> 

    <input type="submit" name="Log In" /> 
</form>

के लिए इस फार्म ले लो यह वास्तव में है कि सरल :)

इस अवधारणा का उपयोग करके, आप बड़ी संख्या में संभावनाएं बनाते हैं, और आपको फिर से लेआउट के लिए टेबल का उपयोग नहीं करना पड़ेगा!

स्रोत

2013-11-26 15:36:36

एचटीएमएल - टेबल या प्रवाह में फॉर्म लेआउट के लिए सर्वश्रेष्ठ अभ्यास?

उत्तर

संबंधित मुद्दे