List of HTML Form Input Types
इस लेख मे हम HTML Form के different input types के बारे मे detail मे जानेंगे।
यहा नीचे HTML Form के different input types की लिस्ट दी गई है।
- <input type = “button”>
- <input type = “checkbox”>
- <input type = “date”>
- <input type = “color”>
- <input type = “datetime-local”>
- <input type = “email”>
- <input type = “file”>
- <input type = “hidden”>
- <input type = “image”>
- <input type = “month”>
- <input type = “number”>
- <input type = “password”>
- <input type = “radio”>
- <input type = “range”>
- <input type = “reset”>
- <input type = “search”>
- <input type = “submit”>
- <input type = “text”>
- <input type = “time”>
- <input type = “tel”>
- <input type = “url”>
- <input type = “week”>
HTML Form Input Type Text
अगर आप users के पास single line input कराना चाहते है तो <input type = “text”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
यहा text field की default width 20 characters है।
HTML Form Input Type Password
अगर आप users के पास password input कराना चाहते है तो <input type = “password”> का इस्तेमाल होता है।
यहा password field मे character star(*) या black dot के रूप मे दिखाई देता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="username">Username:</label><br> <input type="text" id="username" name="username"><br> <label for="pwd">Password:</label><br> <input type="password" id="pwd" name="pwd"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
HTML Form Input Type Submit
अगर आप users के पास से form data को form-handler के पास submit कराना चाहते है तो <input type = “password”> का इस्तेमाल होता है।
यहा form-handler input data की processing के लिये एक server page होता है।
form-handler को <form> tag के साथ action attribute से define किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="virat"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="kohli"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
HTML Form Input Type Reset
यहा reset button form की all value को default value मे covert कर देता है। मतलब की सब value reset हो जाती है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname" value="virat"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname" value="kohli"><br><br> <input type="submit" value="Submit"> <input type="reset"> </form> </body> </html>
HTML Form Input Type Radio
अगर आपको एक से ज्यादा विकल्पो मे से users के पास से सिर्फ एक ही विकल्प को select करवाना है तो radio button का इस्तेमाल किया जाता है।
<input> tag के type attribute की value मे radio लिखकर Radio Buttons को define किया जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <h3>Radio Buttons</h3> <form> <input type="radio" id="male" name="gender" value="male"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender" value="female"> <label for="female">Female</label><br> <input type="radio" id="other" name="gender" value="other"> <label for="other">Other</label> </form> </body> </html>
HTML Form Input Type Checkbox
अगर आप users के पास एक से ज्यादा options को select करवाना चाहते है तो <input type = “cheakbox”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form>Choose Your Subjects:<br> <input type="checkbox" id="subject1" name="subject1" value="hindi"> <label for="subject1"> hindi</label><br> <input type="checkbox" id="subject2" name="subject2" value="English"> <label for="subject2"> English</label><br> <input type="checkbox" id="subject3" name="subject3" value="Maths"> <label for="subject3"> Maths</label><br> <input type="checkbox" id="subject4" name="subject4" value="Science"> <label for="subject4"> Science</label> </form> </body> </html>
HTML Form Input Type Button
<button> Element का इस्तेमाल button को create करने के लिये किया जाता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h3>button Element</h3>
<button type="button" onclick="alert('Hii How are you!')">Click Here!</button>
</body>
</html>Input Type Color
अगर आप input field मे color को select करना चाहते है तो <input type = “color”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="favcolor">Select your color:</label> <input type="color" id="favcolor" name="favcolor" value="#ff1200"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Date
अगर आप input field मे date को include कराना चाहते है तो <input type = “date”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Datetime-local
अगर आप input field मे date और Time को include कराना चाहते है तो <input type = “datetime-local”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="birthday">Birthday (date and time):</label> <input type="datetime-local" id="birthday" name="birthday"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Email
अगर आप input field मे E-mail को शामिल करना चाहते है तो <input type = “email”> का इस्तेमाल होता है।
<input type = “email”> की मदद से जब आप email submit करते हो तब वो automatically validate (depending on browser support) हो जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="email">Enter your email:</label> <input type="email" id="email" name="email"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type File
<input type = “file”> की मदद से आप file Upload box या Browse button create कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile"><br><br> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Month
अगर आप input field मे Month और Year को include कराना चाहते है तो <input type = “month”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="birthdaymonth">Birthday (month and year):</label> <input type="month" id="birthdaymonth" name="birthdaymonth"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Number
अगर आप input field मे number (Numeric value) को include कराना चाहते है तो <input type = “number”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="Number">Quantity (between 1 and 10):</label> <input type="number" id="Number" name="Number" min="1" max="10"> <input type="submit" value="Submit"> </form> </body> </html>
यह उदाहरण मे हमने 1 से 10 number को show कराया है।
Input Restrictions
| Attribute | Description |
| checked | जब page load होता है तब ये यह specify करता है की input field pre-selected है। |
| disabled | ये यह specify करता है की input field disable है। |
| max | Input field की maximum value को specify करता है। |
| maxlength | Input field मे maximum कितने character लिख सकते है यह specify करता है। |
| min | Input field की minimum value को specify करता है। |
| readonly | यह specify करता है की input field रीड1 only है मतलब की उसे change नहीं कर सकते। |
| required | ये यह specify करता है की input field को fill करना आवश्यक है। |
| size | Input field की Size को specify करता है। |
| value | Input field की Default Value को specify करता है। |
| step | Input field के लिये number intervals को specify करता है। |
Input Type Range
<input type = “range”> की मदद से आप range के हिसाब से number को set (Ex. Slider Control) कर सकते है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="vol">Volume (between 0 and 100):</label> <input type="range" id="vol" name="vol" min="0" max="100"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Search
अगर आपको search box बनाना है तो <input type = “search”> का इस्तेमाल कर सकते हो।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="gsearch">Search Here:</label> <input type="search" id="gsearch" name="gsearch"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Tel
अगर आप input field मे telephone number को शामिल करना चाहते है तो <input type = “tel”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<body>
<form action="get-data.php" target="_blank">
<label for="phone">Enter phone number:</label><br><br>
<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
<small>Format: 123-45-678</small><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Input Type Time
अगर आप input field मे Time को शामिल करना चाहते है तो <input type = “time”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="abc">Select a time:</label> <input type="time" id="abc" name="abc"> <input type="submit" value="Submit"> </form> </body> </html>
Input Type Url
अगर आप input field मे url को शामिल करना चाहते है तो <input type = “url”> का इस्तेमाल होता है।
<input type = “url”> की मदद से जब आप url submit करते हो तब वो automatically validate (depending on browser support) हो जाता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="homepage">Add your homepage:</label> <input type="url" id="homepage" name="homepage"> <input type="submit" value="Submit"> </form> </form> </body> </html>
Input Type Week
अगर आप input field मे Week और Year को include कराना चाहते है तो <input type = “week”> का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html> <html> <body> <form action="get-data.php" target="_blank"> <label for="week">Select a week:</label> <input type="week" id="week" name="week"> <input type="submit" value="Submit"> </form> </form> </body> </html>