HTML input types
HTML <input> element बहुत ही खाश है क्योकि <input> element में type attribute की values अलग-अलग सेट करके form में user की सभी detail को collect करने में मदद करता है|
HTML input types जैसे की
<input type=”text”> Element
HTML <input type=”text”> input element form में user के लिए एक single-line text field create करता है| और इस input element में string, number,special-character ये सभी enter कर सकते है|
<form>
<label>Enter first-name</label>
<input type="text" name="first_name" value="devtest" id="fname">
</form>
output
<input type=”button”> Element
HTML <input type=”button”> element से एक सिंपल सा clickable button को create कर सकते है| इस button के click पर कई सारे custom function or click event को call करा जा सकता है| custom function event call करने के लिए “onclick” attribute का इस्तेमाल किया जाता है|
<form>
<input type="button" name="button" onclick="custom_function()" id="button" value="click here!">
</form>
output
<input type=”checkbox”> Element
HTML <input type=”checkbox”>element से form में checkboxes create कर सकते है और इसमें हम multiple checkbox को select बी कर सकते है|
<form>
<label>choose your technology</label>
<input type="checkbox" name="html" id="html"><label>HTML</label>
<input type="checkbox" name="javascript" id="javascript"><label>Javascript</label>
<input type="checkbox" name="jquery" id="jquery"><label>Jquery</label>
<input type="checkbox" name="php" id="php"><label>php</label>
</form>
output
<input type=”number”> Element
HTML <input type=”number”> element का इस्तेमाल सिर्फ user से numeric value को enter करवाने के लिए किया जाता है इस input element में numerical value के आलावा और दूसरी value enter नहीं कर सकते.
<form>
<label>Enter Numeric value only</label>
<input type="number" name="number" min="10" max="100" id="number">
</form>
output
<input type=”color”> Element
HTML <input type=”color”>element user को visual color picker का interface provide करता है जिससे की user color को, input field में hexadecimal के formate में enter कर सके|
<form>
<label>select color into color picker</label>
<input type="color" name="color" value="#eeaaee">
</form>
ouput
<input type=”date”> Element
HTML <input type=”date”> element user को text field में date enter करने के लिए input field create करता है और इस input field की value month, date, year के formate में input field में show होती है|
<form>
<label>select date</label>
<input type="date" name="date" value="09/30/2020" min="01/20/2020" max="05/30/2022">
</form>
output.
<input type=”datetime-local”> Element
HTML <input type=”datetime-local”>element user को input field में date के साथ time कोबी enter करने के लिए ये field को create करा जाती है इस input field से year,month and date और इसके साथ साथ time में hour and minute को input field में enter करा जा सकता है|
<label>select DateTime-local</label>
<input name="datetime" type="datetime-local" value="09/30/2020" />
output
<input type=”email”> Element
HTML <input type=”email”>element से user से HTML form में email address enter करवाने के लिए इस्तेमाल होता है|अगर ये email address input field में empty हो या properly में enter नहीं किया हो तो वह automatically validation कर लेता है| form submit होने से पहले ही|
<form>
<label>Enter email address</label>
<input id="email" name="email" type="email" placeholder="enter emailid" />
</form>
output
<input type=”file”> Element
HTML <input type=”email”>element file upload करने के लिए file-select field और “browse” button defines करता है| इसके इस्तेमाल से user अपने device (laptop , computer) storage से एक से ज्यादा file को choose कर सकता है और इस selected file को form submit के दौरान server में upload कर देता है|
<form>
<label>select images file</label>
<input name="file" type="file" id="file" accept="image/jpeg,image/png"/>
</form>
output
<input type=”hidden”> Element
HTML <input type=”hidden”>element पूरी तरह से form और page में invisible है इस लिए user इस field के data (values) को नहीं तो dekh सकता और नहीं तो modify कर सकता है| इस field ka इस्तेमाल developers ID या किसी secure information को किसी दूसरे webpage में send करने के लिए coding में इस्तेमाल करते है |
<form>
<label>form hidden input</label>
<input name="sel_pro_id" type="hidden" id="projectid" value="1">
</form>
<input type=”image”> Element
HTML <input type=”image”> element का इस्तेमाल graphical submit button create करने के लिए होता है|
<form>
<label>submit image</label>
<input name="image" type="image" id="image" alt="login button" src="../wp-content/uploads/2021/02/image-button.jpg" type="image" width="50px" >
</form>
output
<input type=”month”> Element
HTML <input type=”month”> element एक input field create करता है जिससे user आसानी से month and year इस input field में enter कर सके इस input field का value formate “YYYY-MM” जहा four-digit “YYYY” year बताता है और “MM” month name.
<form>
<label>select month-year</label>
<input name="month" type="month" id="month" value="2020/06">
</form>
output
<input type=”password”> Element
HTML <input type=”password”> element input field में user को securelly password enter करने में मदद करता है इस input field में enter की गई valus star (*) या dots (.) के formate में इस input field में show होती है|
<form>
<label>Enter password</label>
<input name="password" type="password" id="password">
</form>
output
<input type=”radio”> Element
HTML <input type=”radio”> element radio button create करता है और इस input field में user किसी एक ही radio button को choice कर सकता है|
<form>
<label>select gender</label>
<input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female
<input name="gender" type="radio" value="other">Other
</form>
output
<input type=”reset”> Element
HTML <input type=”reset”> element reset button create करता है और यह form की सभी default value को reset कर देता है|
<form>
<label>Reset button</label>
<input name="reset" type="reset" value="Reset button">
</form>
output
<input type=”range”> Element
HTML <input type=”range”> element number value enter करने के लिए एक range slider defines करता है 0 to 100 default range सेट करने पर user इस सेट range के बीच में से number value को select करके enter कर सकता है|
<form>
<label>select range</label>
<input name="range" type="range" min="0" max="100">
</form>
output
<input type=”search”> Element
HTML <input type=”search”> element search field defines करता है यह search field इस में enter string का result को search करता है|
<form>
<label>search field</label>
<input name="search" type="search" placeholder="search string"><input type="button" value="Search">
</form>
output
<input type=”tel”> Element
HTML <input type=”tel”>element एक input field create करता है जिससे की user अपना telephone number enter कर सके|
<form>
<label>Enter telephone</label>
<input name="tel" type="tel" id="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
output
<input type=”time”> Element
HTML <input type=”time”>element time input field create करता है जिससे की user आसानी से time select कर सकता है|
<form>
<label>time input field</label>
<input name="time" type="time" id="time">
</form>
output
<input type=”url”> Element
HTML <input type=”url”>input field का इस्तेमाल URL address को इस input field में रखने के लिए होता है|
<form>
<input type="url" name="url" id="url" value="homepage">
</form>
output
<input type=”week”> Element
HTML <input type=”url”>element input field में week and year defines करता है|
<form>
<input type="week" name="week" id="week">
</form>
output
<input type=”submit”> Element
<input type=”submit”> element submit button create करता है| यह submit button form data को form handler में submit करता है|
form-handler सामान्य तोर पर form input data को server के साथ processing करता है| और form के action attribute में यह form handler की URL specified होती है|
<form>
<label>Enter First Name</label>
<input type="text" name="fname">
<label>Enter Last Name</label>
<input type="text" name="lname">
<input type="submit" name="submit" value="submit">
</form>
output
