HTML5 New Input Types in hindi
आज के इस HTML tutorial in hindi के post में HTML5 new input types के बारे में सीखेंगे |
New Input Types in HTML5 ( HTML5 New Input Types )
User का experiance बेहतर बनाने और form को ज्यादा interactive बनाने के लिए HTML5 में कई new input types को शामिल किया गया है जैसे की email , range , time , date , color आदि | हालांकि यदि कोई web browser इन्हे support नहीं करता है तो वह web browser उसे सामान्य text box की तरह display करेगा |
आज के इस लेख के जरिये निचे दिए गए HTML5 new input types के बारे में समझने की कोशश करेंगे |
| color | date | datetime-local |
| month | number | |
| range | search | tel |
| time | url | week |
date और time दर्शाने के लिए datetime input type था , लेकिन अब उसका उपयोग नहीं किया जाता है |
html form me color picker kaise lagaye
color input type user को color picker मे से color चुनने की अनुमति देता है , और इस color की value hexadecimal में होती है जैसे की #ff0000 . HTML web page में इस color picker का default value #000000 ( black ) होता है |
चलो इसे समझने के लिए निचे दिए गए example को try करते है |
<form>
<label for="setcolor">Select Color:</label>
<input type="color" value="#00ff00" id="setcolor">
</form>ऊपर दिए गए code को अपने text editor में paste करे और HTML format में file को save करे , और फिर output check करने के लिए उस HTML file को web browser में open करे |
html me date picker kaise lagaye
date input type user को drop-down calendar मे से date select करने की अनुमति देता है | इस की value day , month , और year है , लेकिन time शामिल नहीं है |
<form>
<label for="selectdate">Select Date:</label>
<input type="date" value="2015-09-05" id="selectdate">
</form>Output
html me time picker kaise lagaye
datetime-local user को locat date और time दोनों select करने की अनुमति देता है , जिसमें year, month, और day के साथ-साथ hours और minutes में समय भी शामिल है।
<form>
<label for="selectdatetime">Choose Date and Time:</label>
<input type="datetime-local" id="selectdatetime">
</form>Note :- input type="datetime-local" Firefox, Safari, and Internet Explorer browsers में support नहीं करता है |
HTML5 New Input Types in hindi video
Input Type Email in Hindi
input type email user को web page पर email address दर्ज करने की अनुमति देता है | यह text input type की तरह समान होता है , लेकिन इसमें web browser लिखी गयी email id को proper email id के pattern से सुनिश्चित करता है |
<form>
<label for="enteremail">Enter Email Address:</label>
<input type="email" id="enteremail">
</form>ऊपर दिए गए code कोड को HTML code editor में paste करे , और output के text box में @ या .com के बिना mail type कर के enter button दबाये | जैसे ही आप enter button press करोगे तो आपको एक wrong mail id का warning message दिखेगा |
Input Type Month in HTML
month input type user को drop-down calendar मे से month और year select करने की अनुमति देता है |
जिसमे value के रूप में YYYY-MM होती है , जहा YYYY का मतलब चार अंक का year है और MM का मतलब दो अंक का month number है |
चलो निचे दिए गए example को try करते है |
<form>
<label for="selectmonth">Select Month:</label>
<input type="month" id="selectmonth">
</form>Note :- month input type firefox , safari , और internet explorer में support नहीं करता है | हाल में यह Google Chrome , opera और microsoft edge में ही support करता है |
Input Type Number in HTML
number input type का उपयोग numerical value को enter करने के लिए किया जा सकता है | आप min और max attributes का उपयोग कर के minimum और maximum number set कर सकते है , या step attribute का उपयोग कर के number को skip भी करवा सकते हो |
इसे बहेतर समझने के लिए निचे दिए गए उदहारण को देखे |
<form>
<label for="enternumber">Enter a Number:</label>
<input type="number" min="1" max="10" step="0.5" id="enternumber">
</form>internet explorer input type number को support करता है लेकिन increment और decrement spin button प्रदान नहीं करता है |
Input Type Range in HTML
range input type का उपयोग निर्दिष्ट सीमा ( specified range ) के भीतर numeric value को enter करने के लिए किया जाता है | यह बिलकुल number input के समान ही काम करता है , लेकिन यह number enter करने के लिए simple control प्रदान करता है |
<form>
<label for="selectrange">Select a Range:</label>
<input type="range" min="1" max="10" step="0.5" id="selectrange">
</form>Input Type Search in HTML
search input type का उपयोग search input field बनाने के लिए किया जाता है |
search field आम तौर पर text field की तरह ही काम करता है , लेकिन जब search box में type करते है तो कुछ web browser जैसे की crome and safari में search box के right side में छोटा cross का चिन्ह display होता है | जिसकी help से search box में लिखे गए text को clear कर सकते है |
<form>
<label for="searchbox">Search Website:</label>
<input type="search" id="searchbox">
</form>Input Type Tel in HTML
tel input type का उपयोग telephone number दर्ज करने के लिए किया जाता है।
मूल रूप से web browser tel input validation को support नहीं करता है , लेकिन आप placeholder attribute के जरिये correct phone number format enter करने में user की help कर सकते है |
<form>
<label for="enterphonenumber">Telephone Number:</label>
<input type="tel" id="enterphonenumber" placeholder="12-3456-7890">
</form>Input Type Time in HTML
HTML document में time inpute type का उपयोग time ( hours and minutes ) enter करने के लिए किया जाता है |
Browser local system की time setting के आधार पर 12 या 24 hours के format का उपयोग कर सकता है |
<form>
<label for="selecttime">Select Time:</label>
<input type="time" id="selecttime">
</form>Note :- input type="time" internet explorer और safari web browser में support नहीं करता है |
Input Type URL in HTML
URL input type का उपयोग HTML document में URL या web address को enter करने के लिए किया जाता है |
<form>
<label for="enterurl">Enter Website URL:</label>
<input type="url" id="enterurl">
</form>यदि आपको URL के बारे मे अधिक जानकारी चाहिए तो आप URL kya hota hai और HTML url encoding kya hai का पोस्ट पढ़ सकते है |
Input Type Week in HTML
week input type user को drop-down calendar मे से week और year select करने की अनुमति देता है |
<form>
<label for="selectweek">Select Week:</label>
<input type="week" id="selectweek">
</form>यह भी पढ़े :-