1
📝 HTML Forms: Full Notes
✅ 1. What is a Form?
A form is used to collect input from users (like text, email, password) and send it
to a server.
<form action="[Link]" method="post">
<!-- Form fields go here -->
</form>
Attribute Use
action Where to send the form data
method How to send data (get or post)
✅ 2. Basic Form Tags
Tag Use
<form> Starts the form
<input> Single-line input field
<label> Label for input
<textarea> Multi-line text input
<select> Dropdown
<option> Option inside <select>
<button> Clickable button
<fieldset> Group form elements
<legend> Title for fieldset
✅ 3. Input Types
<input type="text"> - Single-line text
<input type="password"> - Hidden characters
2
<input type="email"> - Email format
<input type="number"> - Numbers only
<input type="radio"> - Choose one
<input type="checkbox"> - Multiple selection
<input type="submit"> - Submit form
<input type="reset"> - Reset form
<input type="button"> - Normal button
<input type="date"> - Date picker
<input type="file"> - File upload
<input type="hidden"> - Hidden field
<input type="tel"> - Telephone number
<input type="url"> - URL format
<input type="range"> - Slider
<input type="color"> - Color picker
✅ 4. Example: Simple Form
<form action="/[Link]" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="username"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="pass">Password:</label>
<input type="password" id="pass" name="password"><br><br>
<input type="submit" value="Register">
</form>
✅ 5. Radio Buttons and Checkboxes
<p>Select Gender:</p>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<p>Select Skills:</p>
<input type="checkbox" name="skill" value="HTML"> HTML
<input type="checkbox" name="skill" value="CSS"> CSS
✅ 6. Dropdown Menu
<label for="city">Choose City:</label>
3
<select id="city" name="city">
<option value="karachi">Karachi</option>
<option value="lahore">Lahore</option>
<option value="islamabad">Islamabad</option>
</select>
✅ 7. Textarea
<label for="msg">Message:</label><br>
<textarea id="msg" name="message" rows="4" cols="40"></textarea>
✅ 8. File Upload + Date + Color
<input type="file" name="resume"><br>
<input type="date" name="dob"><br>
<input type="color" name="favcolor"><br>
✅ 9. Fieldset and Legend
<fieldset>
<legend>Login Details</legend>
<input type="text" name="username">
<input type="password" name="password">
</fieldset>
✅ 10. Form Attributes Summary
Attribute Use
action URL to send form data
method get (URL) or post (secure)
name Name of input for backend
id Unique ID for JS or label
value Default input value
required Makes field mandatory
placeholder Shows hint text
disabled Cannot be edited
4
Attribute Use
readonly Can’t change value
✅ 11. Input Validation Example
<input type="email" required placeholder="Enter your email">
<input type="number" min="1" max="100">
🧠 Summary Table
Tag Use
<form> Starts the form
<input> Various input fields
<label> Label for inputs
<textarea> Multi-line input
<select> Dropdown list
<option> Items inside dropdown
<button> Submit, Reset, Custom Button