form CSS | HTML फॉर्म को CSS के द्वारा डिज़ाइन करना | CSS in Hindi

HTML Form कोई CSS के द्वारा design करने के लिए इसके CSS के attributes का उपयोग किया जाता हैं। HTML Form को डिज़ाइन करने के लिए आपको फॉर्म के भी कुछ एलिमेंट्स को समझना पड़ता हैं तभी आसानी से हटम्ल फॉर्म को CSS के द्वारा डिज़ाइन किया जा सकता हैं ।
HTML form को डिज़ाइन करने से पहले आपको हटम्ल फॉर्म के सभी एलिमेंट्स के बारे में पता होना चाइये।

चलिए सीखते हैं की CSS के द्वारा HTML form को कैसे design करते हैं ।

How to design HTML form using CSS | CSS के द्वारा हटम्ल फॉर्म को कैसे डिज़ाइन करते हैं ।

HTML form CSS for input type text

1. इनपुट टाइप टेक्स्ट (Input type text) - HTML Form में सबसे ज्यादा उपयोग किये जाना वाला एलिमेंट इनपुट टाइप टेक्स्ट होता हैं जिसमे एक साधारण बॉक्स में टेक्स्ट को लिखा जाता हैं । CSS में इस इनपुट टाइप टेक्स्ट के लिए CSS बनाने के लिए हम सिर्फ टाइप टेक्स्ट(type="text") को डिफाइन करना पड़ता हैं । चलिए सिंटेक्स से समझते हैं ।


input[type=text] {
 CSS attributes and properties
}

ऊपर दिए गए इनपुट में टाइप टेक्स्ट को डिफाइन किया गया हैं और CSS ब्लॉक { } के अंदर attributes को डिफाइन करना पड़ता हैं जैसे height, width , color , background-color, padding आदि । इस तरह से HTML फॉर्म में जितने भी टाइप टेक्स्ट( type=text) होंगे आसानी CSS का इफ़ेक्ट उनपर देखने को मिलता हैं ।

HTML form CSS for input type number

2. इनपुट टाइप नंबर( Input type number) - यदि नंबर के लिए कोई इनपुट बॉक्स बनाते हैं तो उसमे टाइप नंबर को डिफाइन करना पड़ता हैं जिसमे केवल डिजिट (digit) ही लिखी जा सकती हैं ।
डिजिट का मतलब 1,2,3,4,5,6,7,8,9,0 ।

इस इनपुट बॉक्स को डिज़ाइन करने के लिए टाइप नंबर को डिफाइन करना पड़ता हैं । चलिए एक्साम्प्ल से समझते हैं की हटम्ल फॉर्म के इनपुट टाइप नंबर को कैसे design करे ।


input[type=number] {
 CSS attributes and properties
}

यहाँ पर आप देख सकते हैं पहले टाइप टेक्स्ट(type=text) था अब टाइप नंबर(type=number) लिया हैं ताकि नंबर वाले इनपुट बॉक्स पर CSS का इफ़ेक्ट पड़े ।

HTML form CSS for input type email

3. इनपुट टाइप ईमेल (Input type email) - ईमेल इनपुट बॉक्स ईमेल के लिए उपयोग किया जाता हैं । इनपुट टाइप ईमेल का उपयोग करे से ईमेल के लिए validation की जरूरत नहीं पड़ती हैं । CSS के द्वारा HTML form के इनपुट टाइप ईमेल को डिज़ाइन करने के लिए टाइप ईमेल(type=email) दिया जाता हैं जो की आप निचे दिए गए सिंटेक्स से समझ सकते हैं ।


input[type=email] {
 CSS attributes and properties
}

HTML form CSS for input type date

4. इनपुट टाइप डेट (Input type date) - डेट इनपुट के लिए हम इनपुट टाइप डेट का उपयोग करते हैं । फॉर्म के डेट बॉक्स को CSS के द्वारा डिज़ाइन करने के लिए भी कुछ इसी तरह से टाइप को डिफाइन करना पड़ता हैं ।


input[type=date] {
 CSS attributes and properties
}

HTML form CSS for input type submit

5. सबमिट बटन (Submit button) - इंपुटी टाइप सबमिट का उपयोग करके फॉर्म के बटन को डिज़ाइन किया जा सकता हैं ।


input[type=submit] {
 CSS attributes and properties
}

HTML form CSS for combobox

6. सेलेक्ट ऑप्शन- (Select option) (combo box) - सेलेक्ट ऑप्शन या कॉम्बोबॉक्स को CSS के द्वारा डिज़ाइन करने के लिए थोडा अलग तरह से डिफाइन करना पड़ता हैं । इसमें कोई भी इनपुट टाइप नहीं आता हैं ।
इसमें केवल सेलेक्ट (select) का उपयोग करके HTML फॉर्म combo box को डिज़ाइन किया जा सकता हैं ।


select {
 CSS attributes and properties
}

HTML form CSS for input type password

7. इनपुट टाइप पासवर्ड (Input type password) - इनपुट टाइप पासवर्ड केवल पसवर्ड को start (*) में दिखाने के लिए उपयोग किया जाता हैं । जब भी कोई यूजर इनपुट टाइप पासवर्ड (inpyt type="password" ) में कुछ लिखता हैं तो वह ******** कुछ इस तरह से कन्वर्ट हो जाता हैं जिस से पासवर्ड सुरक्षित रहता हैं । form के पासवर्ड बॉक्स को डिज़ाइन करने के लिए इनपुट टाइप पासवर्ड का उपयोग किया जाता हैं ।


input[type=password] {
 CSS attributes and properties
}

इस तरिके से हटम्ल फॉर्म को CSS से design करने के लिए कोई भी CSS की क्लास नहीं बनानी पड़ती हैं ।

चलिए एक एक्साम्प्ल से समझते हैं -

HTML फॉर्म को CSS के द्वारा design करना

Form CSSL

<!DOCTYPE html>
<html>
<head>
<title>HTML form CSS   </title>

</head>



  Name
  
   Number
  
   Email 
  
  
   Date 
  
   
  
   Password 
  
  
  
  
  


</body>
</html>

जब यह कोड रन होता हैं तो इस तरह से फॉर्म का डिज़ाइन दीखता हैं जिसे निचे दिए फॉर्म से समझ सकते हैं । HTML form CSS

ऊपर दिए गए कोड को execute करने पर CSS का इफ़ेक्ट हटम्ल फॉर्म पर दिख जाता हैं ।
इस तरह से HTML forms को डिज़ाइन किया जा सकता हैं यदि आपको CSS के सभी ऐट्रिब्यूट्स के बारे में पता हैं तो आप इस से भी अच्छे से हटम्ल फॉर्म डिज़ाइन कर सकते हैं ।

Please Share