एचटीएमएल 5 फॉर्म इनपुट प्रकार तिथि, रंग और रेंज में देखें

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

एक वेब फॉर्म इनपुट के साथ बनाया गया है, अतीत में, हमारे पास केवल इनपुट प्रकारों के लिए कुछ विकल्प हैं; जैसे कि टेक्स्ट, पारण शब्द, रेडियो, चेकबॉक्स तथा जमा करें. अब, HTML5 बहुत सुधार के साथ आता है और युक्ति में कई नए इनपुट प्रकारों का परिचय देता है.

तो, इस पोस्ट में हम नए दिलचस्प टुकड़ों में से कुछ में खुदाई करेंगे एचटीएमएल 5 फॉर्म हमें लगता है कि आपको उन पर प्रयास करना चाहिए; चलो उन्हें बाहर की जाँच करें.

खजूर बीनने वाला

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

डेट पिकर बनाने के लिए कई जावास्क्रिप्ट लाइब्रेरी हैं। अब, हम HTML5 इनपुट के साथ बहुत आसान तरीके से एक भी बना सकते हैं दिनांक, निम्नलिखित नुसार;

खजूर बीनने वाला HTML5 में मूल रूप से जावास्क्रिप्ट पुस्तकालयों ने कैसे किया है के समान काम करता है; जब हम क्षेत्र पर ध्यान केंद्रित करते हैं तो एक कैलेंडर बाहर निकल जाएगा, और फिर हम तारीख का चयन करने के लिए महीनों और वर्षों के माध्यम से नेविगेट कर सकते हैं.

हालाँकि, प्रत्येक ब्राउज़र जो वर्तमान में समर्थन करता है दिनांक इनपुट प्रकार अर्थात् क्रोम, ओपेरा, और सफारी इस इनपुट प्रकार को थोड़ा अलग ढंग से प्रदर्शित करते हैं जो संभावित रूप से उपयोगकर्ता अनुभव में असंगति के मुद्दे को जन्म देते हैं, और यहां यह है कि यह कैसा दिखता है;

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

कुछ नए भी हैं इनपुट करने के लिए प्रकार विशेष रूप से दिनांक या समय का चयन करें; महीना, सप्ताह, पहर, दिनांक समय तथा datetime-स्थानीय, जो हमें यकीन है कि कीवर्ड स्वयं यह बताने के लिए काफी अयोग्य है.

आप सभी को नीचे दिए गए लिंक से कार्रवाई में देख सकते हैं, लेकिन सुनिश्चित करें कि आप इसे ओपेरा 11 और इसके बाद के संस्करण में देखते हैं, चूंकि, लेखन के समय, यह एकमात्र ब्राउज़र है जो उन सभी इनपुट प्रकारों का समर्थन करता है.

• डेटपिकर डेमो

रंग चयनकर्ता

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

एक बार फिर, ब्राउज़र, इस मामले में क्रोम और ओपेरा, इस इनपुट प्रकार को थोड़ा अलग करते हैं;

ओपेरा सबसे पहले क्लिक पर मूल रंग विकल्प के साथ-साथ ड्रॉपडाउन में वर्तमान उठाया रंग का हेक्स प्रारूप प्रदर्शित करता है, जबकि क्रोम क्लिक किए जाने पर सीधे रंग पट्टी को एक नई विंडो में पॉप अप कर देगा।.

इसके अलावा, हम भी डिफ़ॉल्ट रंग के साथ सेट कर सकते हैं मूल्य विशेषता, निम्नानुसार;

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

रंग मान प्रदर्शित करें

फ़ोटोशॉप खोलने के बजाय सिर्फ कॉपी करने के लिए हेक्स रंग प्रारूप, आप वास्तव में काम करने के लिए इस इनपुट प्रकार पर एक सरल उपकरण बना सकते हैं, क्योंकि उत्पन्न रंग पहले से ही हेक्साडेसिमल में है यह वास्तव में आसान होगा;

सबसे पहले, हम आईडी जोड़ते हैं रंग चयनकर्ता इनपुट के लिए और हम एक खाली भी जोड़ते हैं div आईडी के साथ hexcolor मान को सम्‍मिलित करने के लिए इसके आगे.

हमें इसमें जुड़ा हुआ jQuery चाहिए सिर हमारे दस्तावेज़ के। फिर हम रंग मूल्य और नए जोड़े को संग्रहीत करते हैं div एक चर में, जैसे;

 var रंग = $ ('# colorpicker')। val (); hexcolor = $ ('# hexcolor'); 

से प्रारंभिक मूल्य प्राप्त करें #रंग चयनकर्ता;

 hexcolor.html (रंग); 

… और अंतिम रूप से मूल्य तब बदल जाता है जब चुना रंग भी बदल जाता है;

 $ ('# colorpicker')। ('चेंज'), फंक्शन () hexcolor.html (यह ());); 

बस; अब इसे कार्रवाई में देखते हैं.

• Colorpicker डेमो

रेंज

रेंज इनपुट प्रकार हमें एक सीमा में नंबर का चयन करने के लिए ब्राउज़र में स्लाइडर जोड़ने की अनुमति देता है जिसे हम jQuery UI में भी पा सकते हैं.

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

 इनपुट [प्रकार = श्रेणी] चौड़ाई: 20 पीएक्स; ऊंचाई: 200 पीएक्स; -webkit- उपस्थिति: स्लाइडर-ऊर्ध्वाधर;  

इसके अतिरिक्त, हम सेट कर सकते हैं मिनट तथा अधिकतम उदाहरण के लिए, संख्या की सीमा;

नीचे दिए गए स्निपेट में हमने सेट किया मिनट शून्य करने के लिए और 225 अधिकतम के लिए। जब वे स्पष्ट रूप से निर्दिष्ट नहीं होते हैं, तो डिफ़ॉल्ट रूप से ब्राउज़र ले जाएगा 0 के लिए न्यूनतम करने के लिए 100 अधिकतम के लिए.

संख्या प्रदर्शित करें

एक बाधा है, हालांकि, संख्या अदृश्य है, हम ब्राउज़र में स्लाइडर से उत्पन्न संख्या / मूल्य नहीं देख सकते हैं। संख्या को प्रदर्शित करने के लिए हमें थोड़ा सा जावास्क्रिप्ट या jQuery जोड़ने की जरूरत है, और यहां बताया गया है कि हम यह कैसे करते हैं;

पहले हम एक खाली जोड़ते हैं div इनपुट के बगल में, शैली div पर्याप्त रूप से यह एक बॉक्स जैसा दिखता है.

फिर निम्न कोड डालें जो कि स्ट्रांगकोर पिकर में उपरोक्त कोड के समान ही होगा, सिवाय अब हम स्लाइडर से मूल्य प्राप्त करते हैं.

 $ (फ़ंक्शन () var val = $ ('# स्लाइडर')। val (); आउटपुट = $ ('# आउटपुट'); output.html (val); $ ('# स्लाइडर')। Change (फ़ंक्शन) ) output.html (this.value););); 

अब, आप डेमो देख सकते हैं। बस एक अनुस्मारक, इन ब्राउज़रों में डेमो देखें - क्रोम, ओपेरा और सफारी, क्योंकि फ़ायरफ़ॉक्स और IE समर्थन नहीं करते हैं रेंज इनपुट प्रकार.

• रेंज डेमो

अंतिम शब्द

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

लेकिन अंततः हम आशा करते हैं कि अब आपके पास अधिक जानकारी होगी एचटीएमएल 5 फॉर्म. इस पोस्ट को पढ़ने के लिए धन्यवाद, और हम आशा करते हैं कि आपको यह पसंद आया होगा.

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

आगे की पढाई

नीचे HTML फॉर्म में आगे खुदाई करने के लिए कुछ उपयोगी लिंक दिए गए हैं.

• एचटीएमएल 5 में नया रूप - ओपेरा देव.
• HTML5 प्रपत्रों की वर्तमान स्थिति - Wufoo
• HTML5 फॉर्म विशेषताएँ - w3school.org
• मैं HTML5 रूपों का उपयोग कब कर सकता हूं? - CanIUse.com