HTML Forms का उपयोग website पर users से information collect करने के लिए किया जाता है। जब आप किसी website पर login, registration, contact form, search box, feedback form, admission form या online application form देखते हैं, तो उसके structure में HTML form elements का महत्वपूर्ण role होता है।
इस part में हम HTML के important Forms & Input-related Tags को step by step समझेंगे।
हर tag के साथ simple example दिया गया है ताकि beginners आसानी से इसे समझ और practice कर सकें।
1. <form> Tag
<form> HTML form का main container है।
Form के अंदर input fields, labels, buttons, checkboxes, radio buttons और दूसरे form controls रखे जाते हैं।
Example
<form> <label>Name:</label> <input type="text"> <button type="submit">Submit</button></form>
यह एक basic form है जिसमें name input और submit button है।
Important <form> Attributes
action
action बताता है कि form submit होने के बाद data कहाँ भेजा जाना है।
<form action="/submit-form">
method
method बताता है कि form data किस HTTP method से submit होगा।
Common methods:
<form method="get">
या
<form method="post">
2. <label> Tag
<label> किसी form control के लिए descriptive text provide करता है।
Example
<label for="name">Full Name:</label><input type="text" id="name">
यहाँ for="name" और id="name" एक-दूसरे से associated हैं।
Label पर click करने पर संबंधित input field focus हो सकती है।
3. <input> Tag
<input> HTML forms का सबसे commonly used element है।
यह अलग-अलग type values के आधार पर कई प्रकार के controls बना सकता है।
Basic Text Input
<input type="text">
अब अलग-अलग input types देखते हैं।
4. <input type="text">
Normal single-line text input बनाने के लिए इस्तेमाल होता है।
Example
<label for="name">Name:</label><input type="text" id="name" name="name">
यह name, city, username आदि जैसी information के लिए useful है।
5. <input type="password">
Password input field बनाने के लिए इस्तेमाल होता है।
Example
<label for="password">Password:</label><input type="password" id="password" name="password">
Browser password characters को generally hidden form में display करता है।
6. <input type="email">
Email address collect करने के लिए उपयोग किया जाता है।
Example
<label for="email">Email:</label><input type="email" id="email" name="email">
Browser और form validation mechanisms email-like input को validate करने में मदद कर सकते हैं।
7. <input type="number">
Numbers enter करने के लिए इस्तेमाल होता है।
Example
<label for="age">Age:</label><input type="number" id="age" name="age" min="1" max="100">
min और max allowed range specify कर सकते हैं।
8. <input type="tel">
Telephone number input के लिए उपयोग किया जाता है।
Example
<label for="phone">Phone:</label><input type="tel" id="phone" name="phone">
Mobile devices पर browser इस input के लिए suitable keyboard दिखा सकता है।
9. <input type="url">
Website URL enter करने के लिए इस्तेमाल होता है।
Example
<label for="website">Website:</label><input type="url" id="website" name="website">
10. <input type="search">
Search field बनाने के लिए इस्तेमाल होता है।
Example
<label for="search">Search:</label><input type="search" id="search" name="search">
यह search-related input के लिए semantic choice है।
11. <input type="date">
Date select करने के लिए उपयोग किया जाता है।
Example
<label for="dob">Date of Birth:</label><input type="date" id="dob" name="dob">
Browser supported होने पर date picker provide कर सकता है।
12. <input type="datetime-local">
Local date और time दोनों select करने के लिए इस्तेमाल किया जाता है।
Example
<label for="meeting"> Meeting Date and Time:</label><input type="datetime-local" id="meeting" name="meeting">
13. <input type="month">
Month और year select करने के लिए उपयोग होता है।
Example
<label for="month">Select Month:</label><input type="month" id="month" name="month">
14. <input type="week">
एक specific week और year select करने के लिए उपयोग किया जाता है।
Example
<label for="week">Select Week:</label><input type="week" id="week" name="week">
15. <input type="time">
Time select करने के लिए इस्तेमाल होता है।
Example
<label for="time">Select Time:</label><input type="time" id="time" name="time">
16. <input type="checkbox">
Checkbox user को multiple options में से zero, one या multiple choices select करने देता है।
Example
<p>Select your subjects:</p><label> <input type="checkbox" name="subject" value="html"> HTML</label><label> <input type="checkbox" name="subject" value="css"> CSS</label><label> <input type="checkbox" name="subject" value="javascript"> JavaScript</label>
यहाँ user एक से अधिक options select कर सकता है।
17. <input type="radio">
Radio buttons में एक group से सामान्यतः एक option select करने के लिए उपयोग किया जाता है।
Example
<p>Select your gender:</p><label> <input type="radio" name="gender" value="male"> Male</label><label> <input type="radio" name="gender" value="female"> Female</label><label> <input type="radio" name="gender" value="other"> Other</label>
यहाँ सभी radio buttons का name same है, इसलिए वे एक group के रूप में काम करते हैं।
18. <input type="file">
User को अपने device से file select करने की सुविधा देता है।
Example
<label for="photo">Upload Photo:</label><input type="file" id="photo" name="photo">
Multiple files select करने के लिए:
<input type="file" name="files" multiple>
19. <input type="hidden">
Hidden input user interface में दिखाई नहीं देता, लेकिन form submission के समय value भेजने के लिए उपयोग किया जा सकता है।
Example
<input type="hidden" name="user_id" value="12345">
Hidden input में sensitive information store करना security mechanism नहीं है क्योंकि client-side HTML को user देख और modify कर सकता है।
20. <input type="range">
Range input एक slider provide करता है।
Example
<label for="volume">Volume:</label><input type="range" id="volume" name="volume" min="0" max="100" value="50">
User slider को move करके value select कर सकता है।
21. <input type="color">
Color select करने के लिए color picker provide करता है।
Example
<label for="color">Choose Color:</label><input type="color" id="color" name="color">
22. <input type="button">
Generic button बनाता है। इसका कोई default form submission behavior नहीं होता।
Example
<input type="button" value="Click Me">
JavaScript के साथ इसका उपयोग अधिक useful होता है।
23. <input type="submit">
Form submit करने के लिए button बनाता है।
Example
<input type="submit" value="Submit Form">
24. <input type="reset">
Form controls को उनके initial values पर reset करने के लिए इस्तेमाल होता है।
Example
<input type="reset" value="Reset Form">
25. <input type="image">
Image को submit button की तरह इस्तेमाल करने के लिए <input type="image"> का उपयोग किया जा सकता है।
Example
<input type="image" src="submit.png" alt="Submit">
यह form submission trigger कर सकता है।
26. <button> Tag
<button> clickable button बनाने के लिए इस्तेमाल होता है।
Example
<button type="submit"> Submit</button>
Button के common types हैं:
submitresetbutton
Normal Button
<button type="button"> Click Me</button>
Reset Button
<button type="reset"> Reset</button>
27. <textarea> Tag
<textarea> multiple lines का text enter करने के लिए उपयोग किया जाता है।
यह comments, messages, descriptions और feedback के लिए useful है।
Example
<label for="message">Message:</label><textarea id="message" name="message" rows="5" cols="40"></textarea>
rows और cols initial dimensions define कर सकते हैं।
28. <select> Tag
<select> dropdown list बनाने के लिए उपयोग किया जाता है।
Example
<label for="city">Choose City:</label><select id="city" name="city"> <option value="bilaspur"> Bilaspur </option> <option value="raipur"> Raipur </option> <option value="indore"> Indore </option></select>
29. <option> Tag
<option> <select> dropdown के individual options को represent करता है।
Example
<select> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option></select>
30. <optgroup> Tag
<optgroup> dropdown options को logical groups में organize करता है।
Example
<select name="course"> <optgroup label="Frontend"> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JavaScript</option> </optgroup> <optgroup label="Backend"> <option value="python">Python</option> <option value="php">PHP</option> </optgroup></select>
इससे बड़े dropdown को categories में organize किया जा सकता है।
31. <datalist> Tag
<datalist> input field के लिए predefined suggestions provide करता है।
Example
<label for="browser">Choose Browser:</label><input list="browsers" id="browser" name="browser"><datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Edge"> <option value="Safari"></datalist>
User input type कर सकता है और browser available suggestions show कर सकता है।
32. <fieldset> Tag
<fieldset> related form controls को एक group में organize करने के लिए उपयोग होता है।
Example
<fieldset> <legend>Personal Information</legend> <label for="name">Name:</label> <input type="text" id="name"> <br><br> <label for="email">Email:</label> <input type="email" id="email"></fieldset>
यह form को visually और semantically organized बनाता है।
33. <legend> Tag
<legend> <fieldset> के लिए caption या title provide करता है।
Example
<fieldset> <legend>Contact Information</legend> <label for="phone">Phone:</label> <input type="tel" id="phone"></fieldset>
<legend> को <fieldset> के अंदर पहला child रखना सामान्य और recommended pattern है।
34. <output> Tag
<output> element किसी calculation या user action के result को represent करने के लिए उपयोग किया जाता है।
Example
<form oninput="result.value = Number(a.value) + Number(b.value)"> <input type="number" id="a" value="10"> + <input type="number" id="b" value="20"> = <output name="result">30</output></form>
यहाँ दो numbers का result <output> में दिखाया जाता है।
35. <progress> Tag
<progress> किसी task की progress को represent करता है।
Example
<label for="download">Download Progress:</label><progress id="download" value="70" max="100"> 70%</progress>
यहाँ progress 70% represent की गई है।
अगर progress की maximum value known नहीं है, तो value को omit करके indeterminate progress represent की जा सकती है:
<progress></progress>
36. <meter> Tag
<meter> किसी known range के अंदर एक scalar measurement या value को represent करता है।
उदाहरण के लिए:
- Battery level
- Score
- Disk usage
- Rating
- Measurement
Example
<label for="score">Score:</label><meter id="score" min="0" max="100" value="80"> 80 out of 100</meter>
<meter> और <progress> का purpose अलग है।
Progress किसी task के completion को represent करता है।
Meter किसी known range में measurement को represent करता है।
37. <select> में multiple
<select> में multiple attribute लगाने से user एक से अधिक options select कर सकता है।
Example
<label for="skills">Select Skills:</label><select id="skills" name="skills" multiple> <option value="html">HTML</option> <option value="css">CSS</option> <option value="javascript">JavaScript</option></select>
38. required Attribute
required किसी form control को required बनाता है।
Example
<label for="email">Email:</label><input type="email" id="email" name="email" required>
User required field को खाली छोड़कर form submit करने पर browser validation कर सकता है।
39. placeholder Attribute
placeholder input field में temporary hint दिखाता है।
Example
<input type="text" placeholder="Enter your name">
Placeholder actual value नहीं होता।
40. value Attribute
value input का value define कर सकता है।
Example
<input type="text" value="Rahul">
Submit होने वाले form controls के लिए name attribute भी generally important होता है।
41. name Attribute
name form data में field की पहचान करने के लिए महत्वपूर्ण होता है।
Example
<input type="text" name="username">
Form submit होने पर server-side processing के लिए field का name उपयोगी होता है।
42. disabled Attribute
disabled form control को disable कर देता है।
Example
<input type="text" value="Not Available" disabled>
Disabled form controls सामान्य form submission में successful controls के रूप में submit नहीं होते।
43. readonly Attribute
readonly input को user द्वारा edit करने से रोकता है, लेकिन उसका value सामान्यतः form submission का हिस्सा हो सकता है।
Example
<input type="text" value="User ID: 1001" readonly>
readonly और disabled एक जैसे नहीं हैं।
44. min और max Attributes
इनका उपयोग numeric/date/time जैसे supported inputs के allowed range को define करने के लिए किया जा सकता है।
Example
<input type="number" min="1" max="10">
User से 1 से 10 के बीच value लेने के लिए यह useful है।
45. step Attribute
step numeric और कुछ date/time-related inputs में allowed increments define करता है।
Example
<input type="number" min="0" max="100" step="5">
इसमें values 5 के increments में represent की जा सकती हैं।
46. accept Attribute
accept file input के लिए allowed file types के बारे में browser को hint देता है।
Example
<input type="file" accept="image/*">
यह image files के selection के लिए suitable hint देता है।
Specific image types:
<input type="file" accept=".jpg,.jpeg,.png">
ध्यान रखें कि accept server-side security validation का replacement नहीं है।
47. autocomplete Attribute
autocomplete browser को form information automatically fill करने के बारे में hint देता है।
Example
<input type="email" name="email" autocomplete="email">
Name के लिए:
<input type="text" name="name" autocomplete="name">
48. autofocus Attribute
autofocus page load होने पर किसी suitable form control को automatically focus करने के लिए उपयोग किया जा सकता है।
Example
<input type="text" name="name" autofocus>
एक page पर autofocus का use carefully करना चाहिए, क्योंकि यह keyboard focus को automatically move करता है।
49. multiple Attribute
multiple कई values/files select करने की अनुमति देता है जहाँ supported हो।
File Example
<input type="file" multiple>
Email Example
<input type="email" multiple>
Email input में comma-separated multiple email addresses enter किए जा सकते हैं।
50. pattern Attribute
pattern text-like input के value के लिए validation pattern provide करता है।
Example
<label for="code">Student Code:</label><input type="text" id="code" name="code" pattern="[A-Z]{2}[0-9]{4}" required>
यह example दो capital letters के बाद चार digits वाले pattern को require करता है।
Complete HTML Form Example
अब हमने forms से जुड़े important HTML elements और attributes देख लिए हैं। नीचे एक complete Student Registration Form दिया गया है जिसमें कई elements को एक साथ use किया गया है।
इस code को आप directly copy करके form.html नाम की file में save कर सकते हैं।
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Student Registration Form</title></head><body> <h1>Student Registration Form</h1> <form action="/submit" method="post"> <fieldset> <legend>Personal Information</legend> <p> <label for="name"> Full Name: </label> <input type="text" id="name" name="name" placeholder="Enter your full name" autocomplete="name" required> </p> <p> <label for="email"> Email: </label> <input type="email" id="email" name="email" placeholder="Enter your email" autocomplete="email" required> </p> <p> <label for="phone"> Phone: </label> <input type="tel" id="phone" name="phone" autocomplete="tel"> </p> <p> <label for="dob"> Date of Birth: </label> <input type="date" id="dob" name="dob"> </p> </fieldset> <fieldset> <legend>Course Information</legend> <p> <label for="course"> Select Course: </label> <select id="course" name="course" required> <option value=""> Select a course </option> <option value="html"> HTML </option> <option value="css"> CSS </option> <option value="javascript"> JavaScript </option> </select> </p> <p> <strong>Learning Mode:</strong> </p> <label> <input type="radio" name="mode" value="online" required> Online </label> <label> <input type="radio" name="mode" value="offline"> Offline </label> </fieldset> <fieldset> <legend>Skills</legend> <p>Select your skills:</p> <label> <input type="checkbox" name="skills" value="html"> HTML </label> <label> <input type="checkbox" name="skills" value="css"> CSS </label> <label> <input type="checkbox" name="skills" value="javascript"> JavaScript </label> </fieldset> <fieldset> <legend>Additional Information</legend> <p> <label for="city"> City: </label> <input list="cities" id="city" name="city"> <datalist id="cities"> <option value="Bilaspur"> <option value="Raipur"> <option value="Indore"> <option value="Delhi"> <option value="Mumbai"> </datalist> </p> <p> <label for="message"> About Yourself: </label> </p> <textarea id="message" name="message" rows="5" cols="40" placeholder="Write something about yourself"> </textarea> <p> <label for="photo"> Upload Photo: </label> <input type="file" id="photo" name="photo" accept="image/*"> </p> </fieldset> <p> <button type="submit"> Submit Registration </button> <button type="reset"> Reset Form </button> </p> </form></body></html>
Forms & Input Tags – Quick Revision
| Element / Attribute | Main Purpose |
|---|---|
<form> | Creates a form |
<label> | Labels a form control |
<input> | Creates various input controls |
type="text" | Text input |
type="password" | Password input |
type="email" | Email input |
type="number" | Number input |
type="tel" | Telephone input |
type="url" | URL input |
type="search" | Search input |
type="date" | Date input |
type="datetime-local" | Local date and time |
type="month" | Month and year |
type="week" | Week and year |
type="time" | Time input |
type="checkbox" | Checkbox |
type="radio" | Radio button |
type="file" | File selection |
type="hidden" | Hidden form value |
type="range" | Slider |
type="color" | Color picker |
type="button" | Generic button |
type="submit" | Submit control |
type="reset" | Reset control |
type="image" | Image submit control |
<button> | Button |
<textarea> | Multi-line text |
<select> | Dropdown |
<option> | Dropdown option |
<optgroup> | Groups dropdown options |
<datalist> | Input suggestions |
<fieldset> | Groups related controls |
<legend> | Fieldset caption |
<output> | Displays calculation/result |
<progress> | Task progress |
<meter> | Measurement within a known range |
Important Form Attributes
actionmethodnamevalueplaceholderrequireddisabledreadonlyminmaxstepacceptautocompleteautofocusmultiplepattern
Conclusion
HTML Forms किसी भी interactive website का important हिस्सा हैं। <form> पूरा form structure बनाता है, जबकि <input>, <textarea>, <select>, <option>, <button> और दूसरे elements users से अलग-अलग प्रकार की information collect करने में मदद करते हैं।
Form बनाते समय <label> का सही उपयोग, meaningful name attributes और appropriate input types रखना important है। इससे form usability और accessibility बेहतर होती है।
यह भी याद रखें कि HTML की built-in validation useful है, लेकिन real-world applications में server-side validation और security checks भी जरूरी होते हैं।
अब तक की series में हमने HTML structure, text elements, links, images, multimedia, lists, tables और forms cover कर लिए हैं।
Part 5 में हम Semantic HTML, Interactive और Modern HTML Elements सीखेंगे, जिसमें <details>, <summary>, <dialog>, <search> और दूसरे important modern elements शामिल होंगे।