एचटीएमएल 5 फॉर्मेट्स के साथ एचटीएमएल 5 ट्यूटोरियल लॉगिन पेज

HTML5 कई सुविधाएँ और सुधार लाता है वेब प्रपत्र, नई विशेषताएँ और इनपुट प्रकार हैं जो पेश किए गए थे मुख्य रूप से वेब डेवलपर्स के जीवन को आसान बनाने और वेब उपयोगकर्ताओं को बेहतर अनुभव प्रदान करने के लिए.

इसलिए, इस पोस्ट में हम उपयोग करके एक लॉगिन पेज बनाने जा रहे हैं HTML5 प्रपत्र यह देखने के लिए कि नई जोड़ी गई सुविधाएँ कैसे काम करती हैं.

• डेमो
• स्रोत डाउनलोड करें

HTML5 इनपुट

आइए निम्नलिखित मार्कअप पर एक नज़र डालें.

 
 
 
 
ईमेल 
 
पारण शब्द 
 
 
 
 
 
 

यदि आप पहले HTML रूपों के साथ काम कर रहे हैं, तो यह परिचित लगेगा। लेकिन, आप वहां मतभेद भी देखेंगे। इनपुट्स हैं प्लेसहोल्डर तथा अपेक्षित विशेषताएँ, जो HTML5 में नई विशेषताएँ हैं.

प्लेसहोल्डर

प्लेसहोल्डर विशेषता हमें इनपुट में प्रारंभिक पाठ देने की अनुमति देती है जो एक में होने पर गायब हो जाएगी फोकस राज्य या इसमें भरा जा रहा है। पहले, हम इसे जावास्क्रिप्ट के साथ करते थे, लेकिन अब इस नई विशेषता के साथ यह बहुत आसान हो गया है.

आवश्यक गुण

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

CSS3 में नया चयनकर्ता भी पेश किया गया है, : आवश्यक के साथ खेतों को लक्षित करने के लिए अपेक्षित विशेषता। यहाँ एक उदाहरण है;

 इनपुट: आवश्यक बॉर्डर: 1px ठोस लाल;  

ईमेल इनपुट प्रकार

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

ईमेल इनपुट प्रकारों का उपयोग करना मोबाइल उपयोगकर्ताओं के लिए बेहतर अनुभव भी दे सकता है, जैसे कि iPhone और Android उपयोगकर्ता, जहां यह दिखाएगा ईमेल-अनुकूलित ऑन-स्क्रीन कीबोर्ड एक समर्पित के साथ “@” बटन ईमेल पते को तेजी से टाइप करने में मदद करने के लिए.

डाउनसाइड्स

एचटीएमएल 5 में पेश किए गए नए फॉर्म फीचर्स शक्तिशाली और लागू करने में आसान हैं, लेकिन कुछ क्षेत्रों में अभी भी उनकी कमी है। उदाहरण के लिए;

प्लेसहोल्डर गुण, केवल आधुनिक ब्राउज़रों में समर्थित है - फ़ायरफ़ॉक्स 3.7+, सफारी 4+, क्रोम 4+ और ओपेरा 11+. तो, क्या आपको इसे असमर्थित ब्राउज़रों में काम करने की आवश्यकता है, तो आप इस पॉलीफ़िल का उपयोग मॉडर्निज़र के साथ मिलकर कर सकते हैं.

यही बात साथ चलती है अपेक्षित गुण. त्रुटि सूचना वैयक्तिकृत नहीं हो सकती, त्रुटि बनी रहेगी “कृपया इस क्षेत्र को भरें” बजाय “कृपया अपना पहला नाम भरें”, यह विशेषता समर्थन भी नवीनतम ब्राउज़रों तक सीमित है.

इसलिए, आवश्यक क्षेत्र को सत्यापित करने के लिए जावास्क्रिप्ट का उपयोग करना (अब तक) एक बेहतर विकल्प है.

 function validateForm () var x = document.forms ["login"] ["उपयोगकर्ता नाम"]। मान; if (x == null || x == "") चेतावनी ("कृपया उपयोगकर्ता नाम भरें"); विवरण झूठा है;  

स्टाइलिंग फॉर्म्स

ठीक है, अब हम CSS के साथ अपने लॉगिन फॉर्म को सजाते हैं। पहले हम बैकग्राउंड को एक लकड़ी का पैटर्न देंगे एचटीएमएल टैग.

 html पृष्ठभूमि: url ('wood_pattern.png'); फ़ॉन्ट-आकार: 10pt;  

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

 .लॉगिनफॉर्म उल पैडिंग: 0; मार्जिन: 0;  .loginform li प्रदर्शन: इनलाइन; बाईंओर तैरना;  

चूंकि हम तैरते हैं ली, माता-पिता ढह जाएंगे, इसलिए हमें माता-पिता के आस-पास की चीजों को क्लीयरफिक्स हैक के साथ साफ करना होगा.

 लेबल प्रदर्शन: ब्लॉक; रंग: # 999;  .cf: इससे पहले, .cf: सामग्री: "" के बाद; प्रदर्शन: टेबल;  .सीएफ: के बाद स्पष्ट: दोनों;  .cf * ज़ूम: 1; : ध्यान रूपरेखा: 0;  

CSS3 में हमारे पास नकारा चयनकर्ता है। इसलिए, हम इसे लक्षित करने के लिए उपयोग करेंगे आदानों के अलावा अन्य जमा करें प्रकार, जो इस मामले में ईमेल और पासवर्ड इनपुट को लक्षित करेगा;

 .लॉगिन इनपुट: नहीं ([प्रकार = सबमिट करें)) पैडिंग: 5 पीएक्स; मार्जिन-राइट: 10px; सीमा: 1px ठोस आरजीबीए (0, 0, 0, 0.3); सीमा-त्रिज्या: 3 पीएक्स; बॉक्स-छाया: इनसेट 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px 0px rgba (250, 250, 250, 0.5);  

अंत में, हम थोड़ा स्टाइल सजावट देंगे जमा करें बटन, इस प्रकार है.

 .लॉगिन इनपुट [टाइप करें = सबमिट करें] बॉर्डर: 1 पीएक्स सॉलिड आरजीबीए (0, 0, 0, 0.3); पृष्ठभूमि: # 64c8ef; / * पुराने ब्राउज़र * / पृष्ठभूमि: -Moz-linear-gradient (शीर्ष, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (0%, # 64c8ef), रंग-रोक (100%, # 00a2e2); / * क्रोम, सफारी 4 + * / पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / पृष्ठभूमि: -o-linear-gradient (शीर्ष, # 64c8ef 0%, # 00a2e2 100%); / * ओपेरा 11.10+ * / पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / पृष्ठभूमि: रैखिक-ढाल (नीचे से, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", Gradientemype = 0); / * IE6-9 * / रंग: # एफएफ; गद्दी: 5px 15px; मार्जिन-सही: 0; मार्जिन-टॉप: 15 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; पाठ-छाया: 1px 1px 0px rgba (0, 0, 0, 0.3);  

यह बात है, अब आप निम्न लिंक से लॉगिन फ़ॉर्म आज़मा सकते हैं.

• डेमो
• स्रोत डाउनलोड करें

अंतिम शब्द

इस ट्यूटोरियल में हमने HTML5 रूपों में कुछ नई विशेषताओं को देखा:प्लेसहोल्डर, अपेक्षित तथा ईमेल इनपुट प्रकार एक साधारण लॉगिन पेज बनाने के लिए। हम विशेषताओं के डाउनसाइड के माध्यम से भी आए हैं, इसलिए हम लागू होने के लिए एक बेहतर दृष्टिकोण तय कर सकते हैं.

अगली पोस्ट में हम एक और नए HTML5 फॉर्म फीचर्स पर ध्यान देंगे, ताकि बने रहें.