HTML5 Forms allow users to enter, submit, and send information to a website. Forms are one of the most important features of web development because they make websites interactive. HTML5 Forms practice questions with solutions help to understand the concepts.
Almost every website uses forms, such as:
- Login Pages
- Registration Forms
- Contact Forms
- Feedback Forms
- Job Application Forms
- Search Boxes
- Online Surveys
- Payment Forms
HTML5 introduced many new input types that improve user experience and data validation.
Why Learn HTML Forms?
HTML forms help you:
- Collect user information.
- Build login and signup pages.
- Create contact forms.
- Accept feedback from visitors.
- Build online applications.
- Improve user interaction.
Basic Syntax
<form>
<label>Name</label>
<input type="text">
</form>
Common Form Elements
| Tag | Purpose |
|---|---|
<form> | Creates a form |
<input> | Accepts user input |
<label> | Labels form fields |
<textarea> | Multi-line input |
<select> | Dropdown list |
<option> | Dropdown item |
<button> | Creates a button |
1. Create a Simple HTML Form
Problem Statement
Create a simple form that asks the user to enter their name.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Simple Form</title>
</head>
<body>
<h1>User Form</h1>
<form>
<label>Name:</label>
<input type="text">
</form>
</body>
</html>
Expected Output
User Form
Name: [____________]
Explanation
The <form> element creates a form.
The <input type="text"> field allows users to enter a single line of text.
Concepts Covered
<form>- Text Input
- User Input
2. Create a Login Form
Problem Statement
Create a login form containing:
- Username
- Password
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
</head>
<body>
<h1>Login</h1>
<form>
<label>Username</label>
<input type="text">
<br><br>
<label>Password</label>
<input type="password">
</form>
</body>
</html>
Expected Output
Login
Username
[____________]
Password
[************]
Explanation
type="password" hides the typed characters for security.
Concepts Covered
- Password Field
- Login Form
- Secure Input
3. Create a Registration Form
Problem Statement
Create a registration form containing:
- Full Name
- Mobile Number
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form>
<label>Full Name</label>
<input type="text">
<br><br>
<label>Email</label>
<input type="email">
<br><br>
<label>Mobile Number</label>
<input type="tel">
</form>
</body>
</html>
Expected Output
Registration Form
Full Name
[____________]
Email
[____________]
Mobile Number
[____________]
Explanation
HTML5 provides different input types for different kinds of data.
Here:
text→ Nameemail→ Email addresstel→ Phone number
These input types improve user experience, especially on mobile devices.
Concepts Covered
- Email Input
- Telephone Input
- Registration Form
4. Create a Number Input Field
Problem Statement
Create a form that allows users to enter their age using a number input field.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Number Input</title>
</head>
<body>
<h1>Age Form</h1>
<form>
<label>Age:</label>
<input type="number">
</form>
</body>
</html>
Expected Output
Age Form
Age:
[____]
The field accepts only numeric values.
Explanation
The type="number" input restricts the user to entering numbers.
It is commonly used for:
- Age
- Quantity
- Marks
- Prices
- Experience
Concepts Covered
- Number Input
- HTML5 Forms
- Numeric Validation
5. Create a Password Confirmation Form
Problem Statement
Create a form containing:
- Password
- Confirm Password
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Password Confirmation</title>
</head>
<body>
<h1>Create Account</h1>
<form>
<label>Password</label>
<input type="password">
<br><br>
<label>Confirm Password</label>
<input type="password">
</form>
</body>
</html>
Expected Output
Create Account
Password
[********]
Confirm Password
[********]
Explanation
Many registration forms require users to enter their password twice to reduce typing errors.
HTML only creates the fields. Password matching is usually handled using JavaScript or server-side validation.
Concepts Covered
- Password Fields
- Registration Forms
- User Authentication
6. Use the placeholder Attribute
Problem Statement
Create a text field that displays a hint inside the input box.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Placeholder Example</title>
</head>
<body>
<form>
<label>Name</label>
<input
type="text"
placeholder="Enter your full name">
</form>
</body>
</html>
Expected Output
Name
[Enter your full name]
The placeholder disappears when the user starts typing.
Explanation
The placeholder attribute provides a short hint describing the expected input.
It improves user experience by showing example text inside the input field.
Concepts Covered
- Placeholder
- User Guidance
- HTML5 Forms
7. Use the required Attribute
Problem Statement
Create a form where the email field must be filled before submission.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Required Field</title>
</head>
<body>
<form>
<label>Email</label>
<input
type="email"
required>
</form>
</body>
</html>
Expected Output
Email
[____________]
If the user submits the form without entering an email, the browser displays a validation message.
Explanation
The required attribute prevents form submission until the field is completed.
It is one of HTML5’s built-in validation features.
Concepts Covered
- Required Fields
- HTML5 Validation
- Form Validation
8. Build a Complete Login Form with Submit Button
Problem Statement
Create a login form containing:
- Username
- Password
- Login Button
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Complete Login Form</title>
</head>
<body>
<h1>User Login</h1>
<form>
<label>Username</label>
<input
type="text"
placeholder="Enter username"
required>
<br><br>
<label>Password</label>
<input
type="password"
placeholder="Enter password"
required>
<br><br>
<input
type="submit"
value="Login">
</form>
</body>
</html>
Expected Output
User Login
Username
[Enter username]
Password
[********]
[ Login ]
Explanation
This example combines several HTML5 form features:
- Text input
- Password input
- Placeholder
- Required validation
- Submit button
It represents a basic login form used on many websites.
Concepts Covered
- Login Form
- Submit Button
- Required Validation
- Placeholder
Mini Practice Challenge
Create a registration form that contains:
- Full Name
- Mobile Number
- Age
- Password
- Confirm Password
- All fields required
- Submit button
Try building it yourself before checking the solutions.
9. Create Radio Buttons
Problem Statement
Create a form that allows users to select their gender using radio buttons.
Options:
- Male
- Female
- Other
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Radio Buttons</title>
</head>
<body>
<h1>Gender Selection</h1>
<form>
<label>
<input type="radio" name="gender">
Male
</label>
<br>
<label>
<input type="radio" name="gender">
Female
</label>
<br>
<label>
<input type="radio" name="gender">
Other
</label>
</form>
</body>
</html>
Expected Output
Gender Selection
( ) Male
( ) Female
( ) Other
Only one option can be selected at a time.
Explanation
Radio buttons are used when users must choose only one option from multiple choices.
All radio buttons must share the same name attribute so that only one can be selected.
Concepts Covered
- Radio Buttons
- Single Selection
- HTML Forms
10. Create Checkboxes
Problem Statement
Create a form allowing users to select multiple programming languages.
Options:
- HTML
- CSS
- JavaScript
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<h1>Select Skills</h1>
<form>
<label>
<input type="checkbox">
HTML
</label>
<br>
<label>
<input type="checkbox">
CSS
</label>
<br>
<label>
<input type="checkbox">
JavaScript
</label>
</form>
</body>
</html>
Expected Output
Select Skills
☐ HTML
☐ CSS
☐ JavaScript
Users can select one, two, or all options.
Explanation
Checkboxes are used when multiple selections are allowed.
Common examples include:
- Skills
- Interests
- Hobbies
- Course Selection
Concepts Covered
- Checkboxes
- Multiple Selection
- HTML Forms
11. Create a Dropdown List
Problem Statement
Create a dropdown list for selecting a country.
Countries:
- India
- USA
- Canada
- Australia
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Dropdown List</title>
</head>
<body>
<h1>Select Country</h1>
<form>
<label>Country</label>
<select>
<option>India</option>
<option>USA</option>
<option>Canada</option>
<option>Australia</option>
</select>
</form>
</body>
</html>
Expected Output
Country
[ India ▼ ]
Clicking the dropdown displays all available countries.
Explanation
The <select> element creates a dropdown list.
Each <option> represents one selectable item.
Concepts Covered
<select><option>- Dropdown Lists
12. Create a Feedback Form Using <textarea>
Problem Statement
Create a feedback form where users can enter multiple lines of text.
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h1>Feedback</h1>
<form>
<label>Your Feedback</label>
<br>
<textarea rows="5" cols="40"></textarea>
</form>
</body>
</html>
Expected Output
Your Feedback
----------------------------------
| |
| |
| |
| |
----------------------------------
Explanation
The <textarea> element allows users to enter multiple lines of text.
It is commonly used for:
- Feedback
- Comments
- Suggestions
- Reviews
- Messages
Concepts Covered
<textarea>- Multi-line Input
- HTML Forms
13. Create Submit and Reset Buttons
Problem Statement
Create a form containing:
- Name field
- Submit button
- Reset button
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Submit and Reset</title>
</head>
<body>
<h1>Registration</h1>
<form>
<label>Name</label>
<input type="text">
<br><br>
<input
type="submit"
value="Submit">
<input
type="reset"
value="Reset">
</form>
</body>
</html>
Expected Output
Registration
Name
[____________]
[ Submit ] [ Reset ]
Explanation
- Submit Button sends the form data.
- Reset Button clears all entered values and restores the form to its initial state.
Concepts Covered
- Submit Button
- Reset Button
- HTML Form Controls
Mini Practice Challenge
Create a registration form containing:
- Full Name
- Gender (Radio Buttons)
- Skills (Checkboxes)
- Country (Dropdown)
- Feedback (Textarea)
- Submit Button
- Reset Button
Try completing the form yourself before viewing the solution.
14. Build a Complete Student Registration Form
Problem Statement
Create a student registration form that collects the following details:
- Full Name
- Email Address
- Mobile Number
- Gender
- Course
- Address
- Submit Button
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration</h1>
<form>
<label>Full Name</label>
<input
type="text"
placeholder="Enter your name"
required>
<br><br>
<label>Email</label>
<input
type="email"
placeholder="Enter your email"
required>
<br><br>
<label>Mobile Number</label>
<input
type="tel"
placeholder="Enter mobile number"
required>
<br><br>
<label>Gender</label>
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
<input type="radio" name="gender"> Other
<br><br>
<label>Course</label>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Python</option>
</select>
<br><br>
<label>Address</label>
<br>
<textarea rows="4" cols="40"></textarea>
<br><br>
<input
type="submit"
value="Register">
</form>
</body>
</html>
Expected Output
Student Registration
Full Name
[________________]
Email
[________________]
Mobile Number
[________________]
Gender
( ) Male
( ) Female
( ) Other
Course
[ HTML ▼ ]
Address
------------------------
| |
| |
------------------------
[ Register ]
Explanation
This example combines multiple HTML5 form controls into one complete registration form.
It includes:
- Text input
- Email input
- Telephone input
- Radio buttons
- Dropdown list
- Textarea
- Submit button
This type of form is commonly used on educational websites and online learning platforms.
Concepts Covered
- Student Registration Form
- HTML Form Elements
- Form Validation
- User Input
15. Create a Professional Contact Us Form
Problem Statement
Create a contact form that collects:
- Name
- Subject
- Message
- Submit Button
- Reset Button
HTML Solution
<!DOCTYPE html>
<html>
<head>
<title>Contact Us Form</title>
</head>
<body>
<h1>Contact Us</h1>
<form>
<label>Name</label>
<input
type="text"
placeholder="Enter your name"
required>
<br><br>
<label>Email</label>
<input
type="email"
placeholder="Enter your email"
required>
<br><br>
<label>Subject</label>
<input
type="text"
placeholder="Enter subject">
<br><br>
<label>Message</label>
<br>
<textarea
rows="6"
cols="45"
placeholder="Write your message"></textarea>
<br><br>
<input
type="submit"
value="Send Message">
<input
type="reset"
value="Clear Form">
</form>
</body>
</html>
Expected Output
Contact Us
Name
[________________]
Email
[________________]
Subject
[________________]
Message
----------------------------------
| |
| |
| |
----------------------------------
[ Send Message ] [ Clear Form ]
Explanation
A contact form is one of the most common forms used on websites.
Typical uses include:
- Customer support
- Business inquiries
- Feedback
- General communication
The form combines:
- Text fields
- Email field
- Textarea
- Submit button
- Reset button
Concepts Covered
- Contact Form
- Textarea
- Submit Button
- Reset Button
- HTML Forms
Coding Challenge
Create a complete College Admission Form containing:
- Full Name
- Father’s Name
- Mother’s Name
- Date of Birth
- Gender
- Mobile Number
- Address
- Course Selection
- Hobbies (Checkboxes)
- Submit Button
- Reset Button
Try building the entire form without referring to the solutions.
Chapter Summary
In this chapter, you learned how to create interactive HTML5 forms that allow users to enter and submit information. Forms are one of the most important components of web development because they enable communication between users and websites.
You practiced creating:
- Simple forms
- Login forms
- Registration forms
- Number input fields
- Password fields
- Email fields
- Telephone input fields
- Radio buttons
- Checkboxes
- Dropdown lists
- Textareas
- Submit buttons
- Reset buttons
- Student registration forms
- Contact Us forms
HTML5 also provides built-in validation features such as required, email, and number input types, reducing the need for extra JavaScript in basic forms.
Key Takeaways
<form>creates a form.<input>accepts user input.type="text"creates a text field.type="password"hides typed characters.type="email"validates email addresses.type="number"accepts only numeric values.type="tel"is used for phone numbers.- Radio buttons allow only one selection.
- Checkboxes allow multiple selections.
<select>creates dropdown lists.<textarea>creates a multi-line text field.placeholderdisplays helpful hints.requiredprevents empty submissions.- Submit and Reset buttons control form actions.
Frequently Asked Questions (FAQs)
1. What is the purpose of the <form> tag?
The <form> tag creates a form that collects user information.
Example:
<form>
<input type="text">
</form>
2. What is the difference between text and password input?
| Text | Password |
|---|---|
| Displays typed text | Hides typed text |
| Used for names | Used for passwords |
Example:
<input type="text">
<input type="password">
3. Why do we use the required attribute?
The required attribute prevents users from submitting a form until the field is filled.
Example:
<input
type="email"
required>
4. What is the purpose of the placeholder attribute?
placeholder displays temporary instructional text inside an input field.
Example:
<input
type="text"
placeholder="Enter your name">
The text disappears when the user starts typing.
5. When should radio buttons be used?
Radio buttons are used when users must choose only one option.
Example:
<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
6. When should checkboxes be used?
Checkboxes are used when users can select multiple options.
Example:
<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript
7. What is the purpose of the <textarea> element?
<textarea> allows users to enter multiple lines of text.
Example:
<textarea
rows="5"
cols="40">
</textarea>
It is commonly used for:
- Feedback
- Comments
- Reviews
- Messages
8. What is the difference between Submit and Reset buttons?
| Submit | Reset |
|---|---|
| Sends form data | Clears the form |
| Used to submit information | Restores default values |
Example:
<input
type="submit"
value="Submit">
<input
type="reset"
value="Reset">
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
