If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
Form में <input type=" "> बहुत ही important element है ,input type का use (date , time , text , numeric , radio , checkbox, url, email) data fill करने के लिए किया जाता है।
नीचे type attribute के लिए सभी values और उनके uses के बारे में बताया गया है।
| Attribute Value | Description |
|---|---|
| text | इसमें single line के लिए text input field बनाने के लिए किया जाता है। |
| password | यह input field को as a password field बनाने के लिए किया जाता है , जिसमे कुछ भी enter करने पर ****** दिखाई देता है। |
| submit | यह form submit करने के लिए button बनाने में काम करता है। |
| reset | यह form के सभी input fields को reset करने के लिए reset button define करता है। |
| radio | यह radio button define करता है जिसमे से कोई एक option select किया जाता है। |
| checkbox | यह checkbox define करता है जिसमे से हम multiple options choose कर सकते हैं। |
| file | यह file input define करता है , जिससे हम file को upload कर सके। |
| color | यह color input बनाने के काम आता है। |
| date | इसका use input date field define करने में होता है , जिससे हम date select कर सकते हैं।/td> |
| number | यह numeric field define करता है जिससे हम numbers ही enter कर सकते हैं। |
| url | यह url input define करता है जिसमे किसी भी website का url enter कर सकते हैं। |
इसमें single line के लिए text input field बनाने के लिए किया जाता है।मतलब जब हमें input में limited text जैसे name etc .. के लिए input बनाना हो तो वहां पर input type="text" ka use किया जाता है।
For Example-
<label>First Name</label> <input type="text" name="fname" placeholder="Enter First Name"> <label>Last Name</label> <input type="text" name="lname" placeholder="Enter Last Name">
Output :
email enter करने के लिए input type में email लिखना होता है।
Example -
<label>Your Email</label> <input type="email" name="email" placeholder="Enter Email">
Output :
यह input field को as a password field बनाने के लिए किया जाता है , जिसमे कुछ भी enter करने पर ****** दिखाई देता है।
Example -
<label>Password</label> <input type="password" name="password" placeholder="Enter Password">
Output :
यह radio button define करता है जिसमे से कोई एक option select किया जाता है। यह भी कई options में से कोई एक option select कराने का अच्छा तरीका है।
Example -
<label>Male</label> <input type="radio" name="gender" value="Male"> <label>Female</label> <input type="radio" name="gender" value="Female"> <label>Other</label> <input type="radio" name="gender" value="Other">
Output :
यहां पर ध्यान देने वाली बात ये है कि सभी inputs में value predefined होगी और input कके name same ही होने चाहिए , जैसे कि example में दिखाया गया है।
यह checkbox define करता है जिसमे से हम multiple options choose कर सकते हैं।
Example -
<label>Your Hobbies</label><br> <label>Swimming</label> <input type="checkbox" name="hobbies[]" value="Swimming"> <label>Cooking</label> <input type="checkbox" name="hobbies[]" value="Cooking"> <label>Eating</label> <input type="checkbox" name="hobbies[]" value="Eating"> <label>Music</label> <input type="checkbox" name="hobbies[]" value="Music"> <label>Movies</label> <input type="checkbox" name="hobbies[]" value="Movies">
Output :
Note - चूंकि checkbox का use multiple choices select करने के लिए किया जाता है , इसलिए इसका name as a array define करना होता है। जिससे server side पर हमें selected values का array मिलता है।
यह file input define करता है , जिससे हम file को upload कर सके।
Example -
<label>Upload Image</label> <input type="file" name="profile_image">
Output :
यह color input बनाने के काम आता है। select किये जाने वाले color की आपको hexadeciamal value मिलती है।
Example -
<label>Select Color</label> <input type="color" name="input_name">
Output :
यह numeric field define करता है जिससे हम numbers ही enter कर सकते हैं।
Example -
<label>Your Age</label> <input type="number" name="age" placeholder="Enter Your Age">
Output :
जब हमें date enter कराने के लिए input बनाना हो तो वहां पर input type = "date" use करते हैं।
Example -
<label>Your DOB</label> <input type="date" name="dob" placeholder="Choose Your DOB">
Output :
File : html_form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML FORM Example</title>
</head>
<body>
<form>
<label>First Name:</label>
<input type="text" name="fname" placeholder="Enter First Name"><br><br>
<label>Last Name:</label>
<input type="text" name="lname" placeholder="Enter Last Name"> <br><br>
<label>Your Email:</label>
<input type="email" name="email" placeholder="Enter Email"> <br><br>
<label>Password:</label>
<input type="password" name="password" placeholder="Enter Password"><br><br>
<label>Gender:</label><br>
<label>Male</label>
<input type="radio" name="gender" value="Male">
<label>Female</label>
<input type="radio" name="gender" value="Female">
<label>Other</label>
<input type="radio" name="gender" value="Other"> <br><br>
<label>Your Hobbies</label><br>
<label>Swimming</label>
<input type="checkbox" name="hobbies[]" value="Swimming">
<label>Cooking</label>
<input type="checkbox" name="hobbies[]" value="Cooking">
<label>Eating</label>
<input type="checkbox" name="hobbies[]" value="Eating">
<label>Music</label>
<input type="checkbox" name="hobbies[]" value="Music">
<label>Movies</label>
<input type="checkbox" name="hobbies[]" value="Movies"> <br><br>
<label>Upload Image</label>
<input type="file" name="profile_image"> <br><br>
<label>Your Age</label>
<input type="number" name="age" placeholder="Enter Your Age"><br><br>
<label>Your DOB</label>
<input type="date" name="dob" placeholder="Choose Your DOB"><br><br>
<p><input type="submit" name="submit" value="Submit"> <input type="reset" name="reset" value="Reset"> </p>
</form>
</body>
</html>