फॉर्म स्टाइलिंग सर्वोत्तम प्रथाओं

Question

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

<div class = "textarea-top"> 
    <div class = "textarea-bottom"> 
    <textarea></textarea> 
    </div> 
</div> 

या द्वारा:

आम तौर पर, शैली की इस तरह बाहर का निर्माण करने, मैं फॉर्म फील्ड divs में लपेट चाहते हैं, इस तरह के रूप

<div class = "textarea"> 
    <textarea></textarea> 
</div> 

क्या इससे संपर्क करने का कोई बेहतर तरीका है? पुन: स्थापित करने के लिए, फ़ील्ड शैलियों उन्नत छवियां हैं जिन्हें दोहराया जा सकता है (क्षेत्र के शरीर के लिए), और ऊपर और नीचे के लिए स्टाइल है। सवाल यह है कि, इन उन्नत रूप स्टाइल से निपटने में सबसे अच्छा अभ्यास क्या है?

Answer 1

मुझे पूरी तरह से यकीन नहीं है कि "सर्वोत्तम अभ्यास" से आपका क्या मतलब है, लेकिन एक चीज जो मैं सुधारता हूं वह अर्थशास्त्र है। आप (12?) का उपयोग कर सकते हैं, बल्कि अर्थहीन, <div>।

और आप एक ही <div> पर textarea, या यहां तक ​​कि कई पृष्ठभूमि छवियों के चारों ओर दो <div> के उपयोग करने के लिए (जो एक CSS3 संपत्ति है, और नहीं व्यापक रूप से समर्थित) की जरूरत नहीं है।

बजाय, आप एक <label> तत्व में <textarea>, और घोंसला अपने पृष्ठभूमि छवियों लपेट चाहिए के रूप में मैं नीचे वर्णित है:

<fieldset class="expandableInput"> 
    <label> 
    Semantic text: 
    <textarea></textarea> 
    </label> 
</fieldset> 

बोनस:: में रैपिंग प्रपत्र तत्वों

इस प्रयास करें <label> इस तरह है, उपयोगकर्ता के लिए फॉर्म तत्व पर ध्यान केंद्रित करने के लिए, एक बड़ा क्लिक क्षेत्र प्रदान करता है। बस कुछ जैसा होगा <select> की है, जो अच्छा नहीं चलता है (भले ही यह मान्य HTML है)

सीएसएस से सावधान रहना:

.expandableInput {background: url(/path/to/first/img);} 
    .expandableInput label {display: block; background: url(/path/to/second/img);} 
    .expandableInput textarea {display: block; margin-top: 3px; background: url(/path/to/third/img);} 

इसके अलावा, प्रत्येक तत्व & प्लेटफ़ॉर्म में फॉर्म तत्वों पर लगातार दिखने के लिए, मैं अत्यधिक नाथन स्मिथ के Formalize CSS (पुराने ब्राउज़र में HTML5 समर्थन के लिए जेएस की आवश्यकता है) की अत्यधिक अनुशंसा कर सकता हूं।