New input types in HTML5: email, url, date, range, color html in hindi
एचटीएमएल5 स्क्रिप्टिंग लैंग्वेज वेब पेज में फ़ॉर्म की यूटिलिटी और फॉर्म कण्ट्रोल वेलिडेशन को बेहतर करने और इन नए फॉर्म कण्ट्रोल को उपयोग कर एचटीएमएल5 वेब पेज फॉर्म को एडवांस्ड और फुल्ली ऑटोमेट किया जाता है, ये नए फॉर्म इनपुट कण्ट्रोल एचटीएमएल4 वर्जन की तुलना में एचटीएमएल5 वेब डेवलपर को बेसिक फॉर्म कण्ट्रोल में नए फॉर्म कण्ट्रोल पेश कर इन्हे अधिक बेहतर किया गया है।
So, let’s get to know the new form controls in HTML5 better.
HTML5 Email Input Data Type.
एचटीएमएल5 वेब पेज फॉर्म में ईमेल इनपुट डाटा टाइप का उपयोग यूजर से मौजूदा वेब पेज फॉर्म में ईमेल एड्रेस फील्ड को इनपुट कर ऐड या स्टोर किया जाता है। यहाँ यह ईमेल इनपुट डाटा टाइप यूजर एंटर ईमेल एड्रेस को वेरीफाई करता है, जहा यह इनपुट ईमेल एड्रेस सिंटेक्स और प्रॉपर वेलिडेशन चेक करता है।
HTML5 Email Input Data Type Attributes.
- Email validation attributes – यह ईमेल ऐट्रिब्यूट्स मौजूदा एचटीएमएल5 वेब पेज फॉर्म में फॉर्म में यूजर एंटर ईमेल एड्रेस सिंटेक्स और फॉर्मेट को चेक करता है, यदि यूजर एंटर फॉर्म ईमेल एड्रेस प्रॉपर सिंटेक्स में है, और एंटर ईमेल एक वैलिड ईमेल एड्रेस है, तो यह एंटर ईमेल एड्रेस को सिस्टम में स्टोर कर देता है।
- Email keyboard – ईमेल कीबोर्ड ऐट्रिब्यूट्स इंटरनेट यूजर को ऑनलाइन फॉर्म फील करते समय पोर्टेबल मोबाइल डिवाइस में ईमेल इनफार्मेशन को एंटर करने में एक डिजिटल कीबोर्ड डिस्प्ले करता है।
HTML5 Email Input Data Type Attributes example.
<label for=”youremail”> Your Email – </label>
<input type=”email” id=”email” name=”email” placeholder=”emailname@url.com” required>
HTML5 Email Input Data Attributes.
- Email Pattern Attributes – यहाँ आप मौजूदा फॉर्म में इनपुट ईमेल एड्रेस को कस्टम ईमेल एड्रेस फॉर्मेट में ऐड करने के लिए रेगुलर एक्सप्रेशन यूज़ कर सकते हैं।
Email validation example.
<input type=”email” id=”useremail” name=”useremail” pattern=”[a-z0-9. _%+-]+@[a-z0-9.-]+\.[a-z]{2,}$” required>
HTML5 url input type.
एचटीएमएल5 वेब पेज फॉर्म में यूआरएल इनपुट टाइप फॉर्म फील्ड का उपयोग इंटरनेट यूजर के लिए फॉर्म में यूआरएल वेबसाइट एड्रेस को एंटर कर चेक करता है, यह फ्रॉम में इनपुट यूआरएल इनपुट टाइप एड्रेस को फॉर्म यूजर को वेरीफाई करता है, की यूजर मैन्युअल एंटर ईमेल एड्रेस प्रॉपर सिंटेक्स में है, या नहीं और वैलिडेट है. या नहीं।
HTML5 url input type attributes.
- URL validation attributes – यह ऐट्रिब्यूट्स मौजूदा फॉर्म में एंटर यूजर यूआरएल डोमेन एड्रेस को वेलिडेट करता है कि, की फॉर्म यूजर एंटर मैन्युअल यूआरएल एड्रेस एक वैलिड और प्रॉपर वेबसाइट सिंटेक्स डोमेन एड्रेस है.
- URL keyboard attributes – यह पोर्टेबल सेलफोन डिवाइस में फॉर्म इंटरनेट यूजर को यूआरएल एड्रेस एंटर करने के लिए एक डिजिटल कीबोर्ड डिस्प्ले करता है.
Example of HTML5 url input type.
<label for=”website”>Url Domain -</label>
<input type=”url” id=”websitedomain” name=”websitedomain” placeholder=”https://urlname.com” required>
HTML5 date input type.
एचटीएमएल5 वेब पेज फॉर्म में डेट इनपुट टाइप फॉर्म इनपुट डेट सिलेक्शन का उपयोग मौजूदा फॉर्म में यूजर डेट्स सलेक्शन डायलॉग के लिए किया जाता है, यह फॉर्म में यूजर को डिफरेंट डेट मंथ ईयर सलेक्शन डायलॉग विंडो प्रदान करता है.
HTML5 date input type attributes.
- Date selector attributes – एचटीएमएल5 वेब पेज में फॉर्म में डेट एंटर को एंटर करने के लिए डेट सलेक्टर यूजर इंटरफ़ेस डायलॉग विंडो प्रोवाइड करता है।
- Date validation attributes – यह मौजूदा फॉर्म में एंटर फॉर्म डेट इनपुट फील्ड वैलिडिटी को वेरीफाई करता है, जहा यूजर द्वारा एंटर या सलेक्ट डेट प्रॉपर वैलिड और प्रॉपर सिंटेक्स आर्डर में है, या नहीं।
Example of HTML5 date input type.
<label for=”joindate”>joindate – </label>
<input type=”date” id=”joindate” name=”joindate” required>
Other date input attributes.
- Min and Max attributes – मौजूदा फॉर्म में एंटर डेट की मिनिमम और मैक्सिमम डेट रेंज को मैन्युअल रूप से सेट कर सकते है ।
- Date value attributes – एचटीएमएल5 वेब पेज फॉर्म में वेब डेवलपर एक डिफ़ॉल्ट डेट को फिक्स कर डिस्प्ले करता है।
Date input range Example.
<input type=”date” id=”start-date” name=”start-date” min=”2025-01-01″ max=”2026-12-31″>
HTML5 Range input type.
एचटीएमएल5 वेब पेज में रेंज इनपुट टाइप फॉर्म फील्ड का उपयोग फॉर्म यूजर को नंबर्स केटेगरी में न्यूमेरिक रेंज वैल्यू को सलेक्ट करने में किया जाता है। यह फॉर्म यूजर को एक वैल्यू रेंज स्लाइडर यूजर इंटरफ़ेस प्रोवाइड करता है।
HTML5 Range input type attributes.
- Range slider attributes – फॉर्म यूजर को रेंज में अवेलेबल वैल्यूज को सलेक्ट करने के लिए एक यूजर इंटरफेस के साथ स्लाइडर सलेक्शन फीचर्स प्रदान करता है।
- Range validation – यह फॉर्म यूजर एंटर फॉर्म रेंज वैल्यूज की लिमिटेशन को वैलिडेट करत है, जहा यह फॉर्म यूजर सलेक्ट वैल्यूज रेंज को इंडीकेट करता है।
HTML5 Range input type attributes.
<label for=”rangelimit”>Range Limit – </label>
<input type=”range” id=”Range Limit” name=”Range Limit” min=”0″ max=”100″ value=”50″ step=”1″>
HTML5 Range input attributes.
- min and max attributes – मौजूदा रेंज में मिनिमम और मैक्सिमम न्यूमेरिक रेंज लिमिट को सेट करे।
- step attributes – फॉर्म में मिनिमम और मैक्सिमम रेंज सलेक्शन के मध्य इंटरवल रेंज वैल्यू को डिफाइन करे।
- value attributes – फॉर्म में यूज़ न्यूमेरिक रेंज के लिए एक स्लाइडर के लिए इनिशियल वैल्यू को फिक्स करता है।
Example of an HTML5 form range.
<label for=”range”>Select rane values – </label>
<input type=”range” id=”range” name=”range” min=”0″ max=”100″ value=”70″ oninput=”document.getElementById(‘rangeValue’).textContent = this.value”>
<span id=”rangeValue”>70</span>
HTML5 color input type.
एचटीएमएल5 वेब पेज डिज़ाइन फॉर्म में कलर इनपुट फॉर्म फील्ड टाइप का उपयोग मौजूदा फॉर्म में कलर केटेगरी को सलेक्ट करने में किया जाता है. जहा फॉर्म कलर सलेक्शन डायलॉग फॉर्म यूजर को एक कलर डायलॉग कलर केटेगरी सलेक्शन में ग्राफिकल यूजर इंटरफ़ेस डायलॉग प्रोवाइड करता है.
HTML5 color input type attributes.
- Color picker attributes – फॉर्म यूजर के लिए ग्राफिकल यूजर इंटरफ़ेस डायलॉग में कलर सलेक्शन विंडो प्रोवाइड करता है.
- Validation attributes – फॉर्म में सेलेक्ट कलर टाइप वैल्यूज के लिए एक वैलिड कलर कोड वेलिडेशन सेट करता है.
- value attributes – मौजूदा फॉर्म में डिफ़ॉल्ट कलर सेट वैल्यू प्रीव्यू करता है.
Example of HTML5 color input type.
<label for=”desirecolor”>Desire color – </label>
<input type=”color” id=”desirecolor” name=”desirecolor” value=”#ff0011″>
Details about HTML5 form new input controls and attributes.
ऊपर आपने एचटीएमएल5 में मौजूदा नए फॉर्म कण्ट्रोल का उपयोग कर बेसिक एचटीएमएल फ्रॉम में नए आयाम और कण्ट्रोल को जोड़ा है.
- email input type – मौजूदा एचटीएमएल5 फॉर्म में यूजर एंटर ईमेल एड्रेस को वैलिडेट और फॉर्मेट करता है.
- url input type – मौजूदा एचटीएमएल5 फॉर्म में यूजर एंटर यूआरएल वेब एड्रेस को वैलिडेट और फॉर्मेट करता है.
- date input type – मौजूदा एचटीएमएल5 फॉर्म में यूजर सलेक्ट कैलेंडर विजेट के साथ यूजर डेट डायलॉग सलेक्शन विंडो प्रोवाइड करता है.
- range input type – मौजूदा एचटीएमएल5 फॉर्म में यूजर सेलेक्ट किसी रेंज के साथ न्यूमेरिक वैल्यूज सलेक्ट के लिए एक ग्राफिकल स्लाइड प्रोवाइड करता है.
- color input type – मौजूदा एचटीएमएल5 फॉर्म में यूजर कलर सलेक्शन के लिए एक ग्राफिकल डायलॉग और विंडो प्रोवाइड करता है.
