What are Forms?
Forms let users send information to you — like login, signup, search, or contact forms.
1.<form> tag
<form action="/submit" method="POST" autocomplete="on">
Meaning:
action="/submit"→ form ka data kis URL par send hogamethod="POST"→ data securely server par bhejnaautocomplete="on"→ browser purana data suggest karega
2.<fieldset> + <legend>
<fieldset><legend>Registration Form</legend>
Meaning:
fieldset= form ko box me group karta hailegend= form ka title show karta hai
3. Name Input
<input type="text" id="name" name="name" placeholder="Enter your name" required>
Meaning:
type="text"→ normal text inputplaceholder→ hint text show karta hairequired→ field fill karna zaroori hai
4. Email Input
<input type="email" id="email" name="email" required>
Meaning:
Email format check karega (like @, .com)
Invalid email accept nahi karega
5. Password Input
<input type="password" id="password" name="password" minlength="8">
Meaning:
Text hide ho jata hai (••••)
minlength="8"→ minimum 8 characters required
6. Age Input
<input type="number" id="age" name="age" min="18" max="100" value="18">
Meaning:
Sirf numbers accept karega
Minimum 18, maximum 100
Default value = 18
7. Country Dropdown
<select id="country" name="country">
Meaning:
User ek option select karega
India, USA, UK list me hai
8. Gender Radio Buttons
<input type="radio" name="gender" value="male"><input type="radio" name="gender" value="female">
Meaning:
Sirf ONE option select ho sakta hai
Male ya Female
9. Checkbox (Terms)
<input type="checkbox" id="agree" required>
Meaning:
User agree karega terms & conditions
Required hai (tick karna zaroori)
10. File Upload
<input type="file" accept="image/*">
Meaning:
User image upload karega
Sirf images allow (
image/*)
11. Range Slider
<input type="range" min="1" max="10" value="5">
Meaning:
Slider se value select hoti hai
1 se 10 ke beech rating
12. Textarea
<textarea rows="4" cols="40"></textarea>
Meaning:
Multi-line message likhne ke liye
Bigger text box
13. Buttons
Submit Button:
<button type="submit">Submit Form</button>
The form submits the data to the server.
Reset Button:
<button type="reset">Clear Form</button>It clears the form data.
Complete form with all input types:
1<form action="/submit" method="POST" autocomplete="on">
2 <fieldset>
3 <legend>Registration Form</legend>
4
5 <!-- Text input - for names, addresses, etc. -->
6 <label for="name">Full Name:</label>
7 <input type="text" id="name" name="name" placeholder="Enter your name" required>
8
9 <!-- Email input - automatically checks for @ and .com -->
10 <label for="email">Email Address:</label>
11 <input type="email" id="email" name="email" required>
12
13 <!-- Password input - hides characters with dots -->
14 <label for="password">Password:</label>
15 <input type="password" id="password" name="password" minlength="8">
16
17 <!-- Number input - only numbers, with min/max -->
18 <label for="age">Age:</label>
19 <input type="number" id="age" name="age" min="18" max="100" value="18">
20
21 <!-- Dropdown - select one option from list -->
22 <label for="country">Country:</label>
23 <select id="country" name="country">
24 <option value="india">India</option>
25 <option value="usa">USA</option>
26 <option value="uk">UK</option>
27 </select>
28
29 <!-- Radio buttons - choose ONLY ONE -->
30 <p>Gender:</p>
31 <input type="radio" id="male" name="gender" value="male">
32 <label for="male">Male</label>
33 <input type="radio" id="female" name="gender" value="female">
34 <label for="female">Female</label>
35
36 <!-- Checkbox - can choose multiple or agree to terms -->
37 <input type="checkbox" id="agree" name="agree" required>
38 <label for="agree">I agree to terms and conditions</label>
39
40 <!-- File upload - lets user upload files -->
41 <label for="photo">Profile Photo:</label>
42 <input type="file" id="photo" name="photo" accept="image/*">
43
44 <!-- Range slider - sliding bar for values -->
45 <label for="rating">Rating (1-10):</label>
46 <input type="range" id="rating" name="rating" min="1" max="10" value="5">
47
48 <!-- Textarea - multi-line text box -->
49 <label for="message">Message:</label>
50 <textarea id="message" name="message" rows="4" cols="40" placeholder="Your message here..."></textarea>
51
52 <!-- Buttons -->
53 <button type="submit">Submit Form</button>
54 <button type="reset">Clear Form</button>
55 </fieldset>
56</form>Important form attributes explained:
Attribute | What it does | Example |
|---|---|---|
| Where to send the data (URL) |
|
| How to send (GET or POST) |
|
| User must fill this field |
|
| Hint text inside the box |
|
| Minimum characters allowed |
|
| Maximum characters allowed |
|
| Minimum number allowed |
|
| Maximum number allowed |
|
| Allowed file types |
|