Lesson 10: HTML Forms
What are HTML Forms?
HTML forms are used to collect user input. Forms can contain different types of input elements like text fields, checkboxes, radio buttons, submit buttons, and more.
Key Points:
Forms are created with the <form> tag
Forms contain input elements for user data
Data can be sent to a server for processing
Forms are essential for user interaction on websites
Basic Form Structure
<form action ="/submit" method ="post" > Form elements go here... </form>
Form Attributes:
action - Where to send the form datamethod - How to send the data (GET or POST)
Text Input Fields
HTML Code:
<form> <label for ="name" > Name: </label> <input type ="text" id ="name" name ="name" > </form>
Input Types
1. Text Input
<input type ="text" name ="username" placeholder ="Enter your name" >
2. Password Input
<input type ="password" name ="password" placeholder ="Enter password" >
3. Email Input
<input type ="email" name ="email" placeholder ="your@email.com" >
4. Number Input
<input type ="number" name ="age" min ="1" max ="100" >
5. Date Input
<input type ="date" name ="birthday" >
Radio Buttons
Radio buttons let users select ONE option from a group:
HTML Code:
<form> <p> Gender: </p> <input type ="radio" id ="male" name ="gender" value ="male" > <label for ="male" > Male </label> <input type ="radio" id ="female" name ="gender" value ="female" > <label for ="female" > Female </label> </form>
Checkboxes
Checkboxes let users select MULTIPLE options:
HTML Code:
<form> <p> Hobbies: </p> <input type ="checkbox" id ="reading" name ="hobby" value ="reading" > <label for ="reading" > Reading </label> <input type ="checkbox" id ="sports" name ="hobby" value ="sports" > <label for ="sports" > Sports </label> </form>
Dropdown List (Select)
HTML Code:
<label for ="country" > Country: </label> <select id ="country" name ="country" > <option value ="usa" > USA </option> <option value ="uk" > UK </option> <option value ="india" > India </option> </select>
Output:
Country:
USA
UK
India
Textarea
For multi-line text input:
HTML Code:
<label for ="message" > Message: </label> <textarea id ="message" name ="message" rows ="4" cols ="30" > </textarea>
Submit Button
<button type ="submit" > Submit </button> Or: <input type ="submit" value ="Submit" >
Complete Form Example
HTML Code:
<form action ="/submit" method ="post" > <label for ="name" > Name: </label> <input type ="text" id ="name" name ="name" required > <label for ="email" > Email: </label> <input type ="email" id ="email" name ="email" required > <label for ="age" > Age: </label> <input type ="number" id ="age" name ="age" > <button type ="submit" > Submit </button> </form>
Common Input Attributes
Attribute
Description
Example
required
Field must be filled out
<input type="text" required>
placeholder
Hint text in the field
<input placeholder="Enter name">
value
Default value
<input value="John">
readonly
Cannot be modified
<input readonly>
disabled
Field is disabled
<input disabled>
maxlength
Maximum character length
<input maxlength="10">
min / max
Minimum/maximum value
<input type="number" min="1" max="100">
Form Validation Attributes
<input type ="text" name ="username" required minlength ="3" maxlength ="20" > <input type ="email" name ="email" required > <input type ="number" name ="age" min ="1" max ="120" >
💡 Best Practices:
Always use <label> tags for accessibility
Use the for attribute to associate labels with inputs
Use appropriate input types (email, number, date, etc.)
Add required attribute for mandatory fields
Use placeholder to give users hints
Group related fields using <fieldset> and <legend>
Provide clear error messages for validation
Fieldset and Legend
Group related form elements together:
<fieldset> <legend> Personal Information </legend> <label for ="fname" > First name: </label> <input type ="text" id ="fname" name ="fname" > </fieldset>
Practice Exercise
Try This:
Create a student registration form with:
Text fields for first name, last name, and student ID
Email field for email address
Number field for age
Date field for date of birth
Radio buttons for gender
Checkboxes for course selection (at least 3 courses)
Dropdown list for grade level
Textarea for comments or special requests
Submit button
Use proper labels and make name and email required
🎉 Congratulations!
You've completed all 10 HTML lessons! You now have a solid foundation in HTML and can create well-structured web pages. Keep practicing and building projects to reinforce what you've learned!