Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design
Webdesign

CSS3 और HTML5 वेलिडेशन के साथ अपने फ़ॉर्म को अप टू डेट करें

by
Difficulty:BeginnerLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

आइए देखें कि एक कार्यात्मक फॉर्म कैसे बनाया जाए जो उपयोगकर्ता के डेटा, क्लाइंट-साइड को मान्य करता है। इसके साथ, हम कुछ CSS के साथ CSS3 का उपयोग करके इसे अपरिवर्तित करेंगे!

Step 1: Conceptualization Functionality

पहले हम अवधारणा चाहते हैं कि हमारा फ़ॉर्म कैसा दिख रहा है और यह कैसे काम करेगा। इस उदाहरण के लिए, एक सरल संपर्क फ़ॉर्म बनाते हैं जो उपयोगकर्ता से निम्न जानकारी मांगते हैं:

  • Name
  • Email
  • Website
  • Message

हम यह सुनिश्चित करना चाहते हैं कि उपयोगकर्ता जानकारी को सही ढंग से दर्ज कर रहा है। इसे पूरा करने के लिए, हम HTML5 की नई क्लाइंट-साइड सत्यापन तकनीकों का उपयोग करेंगे। जिन उपयोगकर्ताओं के पास HTML5 क्षमता नहीं हैं उनके बारे में क्या? आप सर्वर-साइड सत्यापन का उपयोग कर सकते हैं, लेकिन यह इस आलेख के दायरे से परे होगा।

Step 2: Conceptualization Form

आइए हम इस बारे में एक विचार प्राप्त करें कि हम अपने फार्म को किसी न किसी मॉकअप बनाकर देखना चाहते हैं।

जैसा कि आप देख सकते हैं, निम्न एलिमेंट्स हमारे रूप को बनाते हैं:

  • Form Title Required fields notification
  • Form labels
  • Form inputs Placeholder text
  • Form field hints
  • Submit Button

अब हमने निर्दिष्ट किया है कि कौन से एलिमेंट्स हमारे फ़ॉर्म को बनाते हैं, हम HTML मार्कअप बना सकते हैं।

Step 3: HTML स्टार्टर कोड

आइए हम बनाये गये अवधारणा से हमारे मूल HTML मार्कअप बनाते हैं।

इस बिंदु तक, हमारी HTML फाइल अभी भी ब्राउज़र में रिक्त दिखाई देगी। यह केवल एक HTML5 पृष्ठ के लिए स्टार्टर कोड है।

Step 4: HTML फॉर्म

आइए HTML फॉर्म बनाते हैं (हम अभी के लिए एक्शन मेथड को छोड़ देंगे, क्योंकि सर्वर-साइड वैल्यूएशन इस ट्यूटोरियल में शामिल नहीं होगा):

Step 5: HTML फ़ॉर्म एलिमेंट्स

हमारी फॉर्म की सामग्री को संगठित और संरचित रखने के लिए, हम एक सूची में अपने फार्म एलिमेंट्स (label, input, आदि) को व्रैप कर लेंगे। तो आइए फार्म हैडर और हमारी पहली इनपुट तत्व बनाकर शुरू करें:

फ़ॉर्म संकेत

जैसा कि हमारे नकली में देखा गया है, हम "email" और "website" फ़ील्ड के लिए प्रारूपण संकेतों वाले हैं। इसलिए हम अपने संकेतों को input क्षेत्रों के नीचे जोड़ देंगे जहां आवश्यक हो, और उन्हें एक क्लास दें ताकि हम बाद में उन्हें स्टाइल दें।

शेष Input एलिमेंट्स

चलो आगे बढ़ो और हमारे शेष फार्म एलिमेंट्स को बनाओ, प्रत्येक आइटम को एक सूची आइटम में व्रैप करके याद रखें।

Step 6: प्लेसहोल्डर एट्रिब्यूट को जोड़ना

पहला सुधार HTML5 में से एक वेब फॉर्म लाता है (जो आप पहले से ही परिचित हैं) प्लेसहोल्डर टेक्स्ट सेट करने की क्षमता है। प्लेसहोल्डर टेक्स्ट तब प्रदर्शित होता है जब इनपुट फ़ील्ड रिक्त या फोकस में नहीं होती है।

चलो हमारे input एलिमेंट्स में प्लेसहोल्डर विशेषता जोड़ते हैं। इससे उपयोगकर्ता को यह समझने में सहायता मिलेगी कि उन्हें प्रत्येक फ़ील्ड में क्या प्रवेश करना चाहिए।

क्विक सुझाव: अपने placeholder टेक्स्ट को स्टाइल करें

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

प्लेसहोल्डर एट्रिब्यूट के लिए समर्थन आधुनिक ब्राउज़र (IE9 को छोड़कर, खेद है) में अच्छी तरह से स्थापित है। यदि आपको वास्तव में सभी ब्राउज़रों में इसका समर्थन करने की ज़रूरत है, तो कुछ javascript समाधान हैं जो आप देख सकते हैं।

Step 7: बेसिक CSS

चलिए कुछ बुनियादी CSS को अपने फॉर्म को कुछ संरचना देने के लिए जोड़ते हैं। मैं नियमों के माध्यम से चलूंगा:

रिमूव :focus स्टाइल

वेबकिट स्वचालित रूप से इनपुट एलिमेंट्स में कुछ स्टाइल जोड़ता है जब वे फ़ोकस में होते हैं। चूंकि हम अपनी स्टाइल जोड़ देंगे, हम इन चूकों को ओवरराइड करना चाहते हैं:

टाइपोग्राफिक स्टाइल्स

चलिए अपने फॉर्म एलिमेंट्स में कुछ टाइपोग्राफिक स्टाइल्स को जोड़ते हैं:

सूची स्टाइल्स

चलो हमारे सूची एलिमेंट्स को हमारे फार्म कुछ संरचना देने के लिए स्टाइल:

इसके अलावा, चलो फार्म के ऊपर और नीचे अनुभागों में थोड़ी सी सीमा जोड़ते हैं। हम इस का उपयोग करके इसे पूरा कर सकते हैं :first-child और :last-child चयनकर्ता। ये चयन, नामों के रूप में, <ul> सूची में पहला और अंतिम एलिमेंट्स।

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

फॉर्म हैडर

आइए हमारे फॉर्म के हेडर सेक्शन को स्टाइल करें। इसमें शीर्षक टैग और अधिसूचना शामिल है जो उपयोगकर्ताओं को बताती है कि तारांकन (*) आवश्यक फ़ील्ड इंगित करता है।

फॉर्म इनपुट एलिमेंट्स

आइये, हमारे सभी मुख्य फॉर्म तत्वों को स्टाइल करते हैं, वे उपयोगकर्ता जानकारी इकट्ठा करते थे।

अब, कुछ अतिरिक्त दृश्य CSS स्टाइल्स को जोड़ते हैं। इनमें से कुछ CSS3 स्टाइल हैं जो आधुनिक ब्राउज़र का उपयोग करने वाले उपयोगकर्ताओं को इनाम देते हैं।

Step 8: CSS3 के साथ कुछ अन्तरक्रियाशीलता जोड़ें

चलिए थोड़ी सी अन्तरक्रियाशीलता जोड़ते हैं। हम उस फ़ील्ड को बनायेंगे जो वर्तमान में कुछ पेडिंग जोड़कर विस्तृत किया गया है।

अब ब्राउज़रों के लिए जो इसका समर्थन करते हैं, चलिए क्षेत्र के विस्तार को CSS3 का उपयोग करके एक चिकनी संक्रमण बनाते हैं।

Step 9: HTML5 में required Attribute

अब हम सभी के लिए इंतजार कर रहे हैं: HTML5 के फार्म हैंडलिंग टूल्स।

किसी भी इनपुट/टेक्सटेरिया एलिमेंट्स में required विशेषता जोड़ना ब्राउज़र को बताएगा कि फ़ॉर्म सबमिट किए जाने से पहले वैल्यू की आवश्यकता है। इस प्रकार, एक फॉर्म जमा नहीं किया जा सकता है यदि एक required फ़ील्ड भरी नहीं गई है।

तो, आगे बढ़ो और अपने सभी फॉर्म एलिमेंट्स में required विशेषता जोड़ते हैं (क्योंकि हम उन्हें सब भरना चाहते हैं)।

Step 10: स्टाइलिंग required फ़ील्ड

आप शायद यह ध्यान देंगे कि, नेत्रहीन बोलने, required attribute जोड़कर कुछ भी नहीं हुआ। हम CSS के उपयोग से आवश्यक फ़ील्ड स्टाइल में जा रहे हैं। इस उदाहरण के लिए, हम प्रत्येक आवश्यक क्षेत्र में बैकग्राउंड इमेज के रूप में एक लाल तारांकन जोड़ना चाहते हैं। इसे पूरा करने के लिए, हम पहले हमारे इनपुट के दाईं ओर कुछ पैडिंग जोड़ना चाहते हैं जहां बैकग्राउंड की इमेज होगी (यदि फ़ील्ड एंट्री लंबी स्ट्रिंग है तो यह टेक्स्ट ओवरलैप को रोक देगा):

अब हम CSS छद्म चयनकर्ता का उपयोग करेंगे एक :required विशेषता के साथ सभी फार्म एलिमेंट्स को लक्षित करने के लिए आवश्यक है। मैंने Photoshop में एक साधारण 16x16 पिक्सेल लाल तारांकन चिह्न बनाया है जो एक आवश्यक फ़ील्ड के दृश्य सूचक के रूप में काम करेगा।

जमा करने पर क्या होता है?

अभी, विभिन्न ब्राउज़र अलग-अलग चीज़ें करेंगे, जब HTML5 एलिमेंट्स का उपयोग करते हुए फ़ॉर्म सबमिट किया जाएगा। जब फ़ॉर्म सबमिट किया जाता है, तो अधिकांश ब्राउज़रों फॉर्म को प्रस्तुत किए जाने से रोकेंगे और उपयोगकर्ता को "hint" दिखाएंगे, पहले फ़ील्ड को चिह्नित करना चाहिए जो कि आवश्यक है और उसका कोई वैल्यू नहीं है। इन 'bubble fields' के लिए विज़ुअल स्टाइलिंग और समर्थन काफी व्यापक है। उम्मीद है कि इन व्यवहारों को भविष्य में मानकीकृत किया जाएगा।

आप quirksmode पर required विशेषता के लिए वर्तमान ब्राउज़र समर्थन देख सकते हैं।

जल्द सलाह:

आप वास्तव में निम्न का उपयोग कर वेबकिट में कुछ bubble मैसेज स्टाइल कर सकते हैं:

Step 11: नई HTML5 type एट्रिब्यूट्स और क्लाइंट साइड वैलिडेशन को समझना

HTML5 सत्यापन फॉर्म फ़ील्ड के भीतर सेट की गई type विशेषता के अनुसार कार्य करता है। वर्षों से HTML ने केवल एक प्रकार की विशेषताओं का समर्थन किया, जैसे कि type ="text" लेकिन HTML5 के साथ इसमें एक दर्जन से अधिक नए इनपुट प्रकार होते हैं जिनमें email और url शामिल हैं, जो हम अपने फॉर्म में उपयोग करने जा रहे हैं।

नए required विशेषता के साथ हमारे इनपुट type attributes को जोड़कर, ब्राउज़र अब फ़ॉर्म के डेटा ग्राहक-पक्ष को मान्य कर सकता है। यदि उपयोगकर्ता का ब्राउज़र नए type के विशेषताओं जैसे कि type="email" का समर्थन नहीं करता है, तो यह केवल text="text" के लिए डिफ़ॉल्ट होगा। यह वास्तव में बहुत आश्चर्यजनक है। मूल रूप से आपके पास पृथ्वी, हुर्रे के सभी ब्राउज़रों में पीछे की संगतता है!

तो क्या होगा यदि ब्राउज़र वास्तव में नए type के विशेषताओं का समर्थन करता है? डेस्कटॉप ब्राउज़र के लिए कोई दृश्य अंतर नहीं है (जब तक कि कस्टम CSS नियमों द्वारा निर्दिष्ट नहीं किया गया हो)। एक type="text" फ़ील्ड एक type="email" फ़ील्ड के समान दिखती है। हालांकि, मोबाइल ब्राउज़रों के लिए, जब उपयोगकर्ता इंटरफ़ेस की बात आती है तो एक अंतर होता है।

एक उदाहरण: आईफोन

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

Step 12: type Attribute को बदलना

हमारे पास पहले से ही हमारे फ़ॉर्म फ़ील्ड डिफ़ॉल्ट type="text" पर सेट हैं। लेकिन अब हम अपने ईमेल और वेबसाइट फ़ील्ड्स पर टाइप एट्रिब्यूट को उनके संबंधित HTML5 प्रकार में बदलना चाहते हैं।

चरण 13: HTML5 Validation

जैसा कि पहले उल्लेख किया गया है, HTML5 सत्यापन आपके type विशेषताओं पर आधारित है और यह डिफ़ॉल्ट रूप से चालू है। फॉर्म सत्यापन को सक्रिय करने के लिए आवश्यक कोई विशिष्ट मार्कअप नहीं है। यदि आप इसे बंद करना चाहते हैं, तो आप इस तरह से novalidate attribute का उपयोग कर सकते हैं:

Name Field

आइए हमारे पहले फ़ील्ड पर गौर करें जो उपयोगकर्ता के लिए उसका नाम पूछता है। जैसा की पहले बताया है, हमने type="text" विशेषता और required attribute जोड़ दी है। यह वेब ब्राउज़र को सूचित करता है कि यह क्षेत्र अनिवार्य है और इसे फ़ील्ड को टेक्स्ट के रूप में मान्य करना चाहिए। तो जब तक उपयोगकर्ता उस क्षेत्र में कम से कम एक अक्षर में प्रवेश करता है, तो यह मान्य होगा।

अब हम अपने स्वयं के CSS को स्टाइल के क्षेत्र इनपुट के लिए तैयार करेंगे जो ब्राउज़र द्वारा मान्य और अमान्य माना जाता है। यदि आपको याद है, तो हमने इसका इस्तेमाल किया: हमारे CSS में एक :required विशेषता के साथ सभी इनपुट एलिमेंट्स को स्टाइल करने के लिए आवश्यक है। अब, हम अपने आवश्यक फ़ील्ड स्टाइल कर सकते हैं जो या तो मान्य या अमान्य हैं :valid या :invalid हमारे CSS नियमों के लिए।

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

अब, नियम बनाओ जो इंगित करते हैं कि फ़ील्ड मान्य है। हम एक हरे रंग की सीमा, हरी छाया और photoshop में किए गए लालच चेकमार्क आइकन जोड़ देंगे। यह सभी मान्य क्षेत्रों पर लागू किया जाएगा चाहे वे फ़ोकस में हैं या नहीं।

अब जब आप किसी प्रपत्र फ़ील्ड पर ध्यान केंद्रित करते हैं, तो लाल अमान्य स्टाइल दिखाया जाता है। जैसे ही एक अक्षर फ़ील्ड में दर्ज किया गया है, यह मान्य है और ग्रीन CSS स्टाइल्स को इस तथ्य को इंगित करने के लिए दिखाया गया है।

Email और URL फ़ील्ड

हमारी CSS स्टाइल्स और सत्यापन नियम पहले से ही ईमेल क्षेत्र पर लागू होते हैं क्योंकि हम पहले type और required attributes को सेट करते हैं।

चरण 14: HTML5 pattern Attribute का परिचय

एक उदाहरण के रूप में type="email" विशेषता का प्रयोग करना, ऐसा प्रतीत होता है कि अधिकांश ब्राउज़रों उस क्षेत्र को *@* (किसी भी चरित्र + "@" प्रतीक + किसी भी चरित्र) के रूप में मान्य करते हैं। यह स्पष्ट रूप से बहुत सीमित नहीं है लेकिन यह उपयोगकर्ताओं को रिक्त स्थान या मूल्यों को दर्ज करने से रोकता है जो पूरी तरह से गलत हैं।

type="url" attribute के उदाहरण में, ऐसा प्रतीत होता है कि अधिकांश ब्राउज़रों के लिए न्यूनतम आवश्यकता किसी बृहदान्त्र के बाद के किसी भी वर्ण का है। इसलिए, यदि आपने "h:" दर्ज किया है तो क्षेत्र मान्य होगा। यह अत्यंत सहायक नहीं है लेकिन यह उपयोगकर्ताओं को अपने ईमेल या घर का पता जैसी अप्रासंगिक जानकारी दर्ज करने से रोकता है। अब, आप अपने सर्वर-साइड सत्यापन में अपने इनपुट मानों के साथ अधिक विशिष्ट रूप से संभाल सकते हैं; हालांकि, हम इस बारे में बात करने जा रहे हैं कि HTML5 में कैसे करें।

The pattern Attribute

पैटर्न विशेषता एक javascript नियमित अभिव्यक्ति को स्वीकार करता है। फ़ील्ड के मान को मान्य करने के लिए इस अभिव्यक्ति का उपयोग ब्राउज़र डिफ़ॉल्ट के बजाय किया जाता है। तो हमारे HTML अब इस तरह दिखता है:

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

Step 15: फॉर्म फ़ील्ड संकेत (CSS)

अब आइए हम अपने फॉर्म का संकेत देते हैं जो बताते हैं कि यूजर को अपनी जानकारी दर्ज करते समय प्रारूप का इस्तेमाल करना चाहिए।

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

::before Selector का प्रयोग करना

अब हम अपने संकेत बॉक्सों के लिए थोड़ा त्रिकोण जोड़ना चाहते हैं जो आंखों को प्रत्यक्ष और मार्गदर्शन में मदद करते हैं। यह इमेजेज का उपयोग करके किया जा सकता है, लेकिन हमारे मामले में हम इसे शुद्ध CSS का उपयोग करने जा रहे हैं।

क्योंकि यह विशुद्ध रूप से एक तात्कालिक एलिमेंट्स है जो पृष्ठ की कार्यक्षमता के लिए महत्वपूर्ण नहीं है, हम एक छोटा त्रिकोण जोड़ना चाहते हैं जो pseudo चयनकर्ता से ::before का उपयोग करते हुए अंक छोड़ते हैं। हम इसे यूनिकोड ज्यामितीय आकृतियों में से एक का उपयोग करके कर सकते हैं।

आम तौर पर हम HTML यूनिकोड प्रारूप का उपयोग हमारे HTML में प्रदर्शित करने के लिए करेंगे (जैसा कि ऊपर की इमेज में दिखाया गया है)। हालांकि, चूंकि हम CSS चयनकर्ता से ::before का प्रयोग करेंगे, हमें content:" " का उपयोग करते समय त्रिभुज की इसी एस्केप यूनिकोड के नियम का उपयोग करना होगा। फिर हम इसे पाने के लिए स्थिति का उपयोग करते हैं, जहां हमें यह चाहिए।

+ Adjacent Selector का उपयोग करना

अंत में, हम CSS सटे चयनकर्ता का उपयोग करने के लिए हमारे फॉर्म फ़ील्ड संकेतों को दिखाने और छिपाने जा रहे हैं। Adjacent selector (x + y) एलिमेंट्स का चयन करता है जो तत्काल पूर्व एलिमेंट्स से पहले होता है। चूंकि हमारे क्षेत्र संकेत हमारे HTML में हमारे इनपुट फ़ील्ड के ठीक बाद आते हैं, इसलिए हम टूलटिप्स दिखाने / छिपाने के लिए इस चयनकर्ता का उपयोग कर सकते हैं।

जैसा कि आप CSS से देख सकते हैं, हम भी फ़ील्ड मान्य या अमान्य जब इनपुट की सीमा के साथ रंग बदलने के लिए फार्म का संकेत सेट करते हैं।

Step 16: वापस बैठो और आपकी सुंदर HTML5 फॉर्म की प्रशंसा करें

आगे बढ़ो और अपने अंतिम उत्पाद पर एक नज़र डालें!

निष्कर्ष

जैसा कि आप देख सकते हैं, नई HTML5 फॉर्म फीचर बहुत साफ हैं! सब कुछ पीछे की तरफ से संगत है इसलिए इन नई सुविधाओं को अपनी वेबसाइट में शामिल करना कुछ भी नहीं तोड़ देगा।

HTML5 वैधता उपयोगकर्ताओं को अपने ऑनलाइन फॉर्म को ठीक से भरने में मदद करने के लिए क्लाइंट साइड वैल्यूशन को बदलने के करीब आ रही है। हालांकि, HTML5 सत्यापन अभी भी सर्वर साइड सत्यापन को प्रतिस्थापित नहीं करता है। समय के लिए, उपयोगकर्ता द्वारा सबमिट की जाने वाली जानकारी को संभालने के दौरान दोनों तरीकों का इस्तेमाल करना सबसे अच्छा है। पढ़ने के लिए धन्यवाद!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.