HTML Forms – Solved Practice Questions

By /

Introduction

HTML forms are used to collect information from users. Forms can contain text boxes, email fields, passwords, radio buttons, checkboxes, dropdowns, and buttons. In this chapter, you will practice creating different types of HTML forms through simple solved questions.

Question 1

Problem Statement

Create a simple form that asks the user for their name.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Name Form</title>
</head>
<body>

    <h1>Enter Your Name</h1>

    <form>
        <label for="name">Name:</label>

        <input type="text" id="name" name="name">

        <button type="submit">Submit</button>
    </form>

</body>
</html>

Output

Enter Your Name

Name: [________________] [Submit]

Step-by-Step Explanation

  • <form> creates the form.
  • <label> provides a description for the input.
  • <input type="text"> creates a text field.
  • id="name" uniquely identifies the input.
  • name="name" gives the input a name for form submission.
  • <button type="submit"> creates the submit button.

Question 2

Problem Statement

Create a form that asks the user for their name and email address.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>

    <h1>Contact Form</h1>

    <form>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name">

        <br><br>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email">

        <br><br>

        <button type="submit">Send</button>

    </form>

</body>
</html>

Output

Contact Form

Name:  [________________]

Email: [________________]

[Send]

Step-by-Step Explanation

  • The first input collects the user’s name.
  • type="email" creates an email input field.
  • Each input has a matching <label>.
  • The submit button sends the form data.

Question 3

Problem Statement

Create a registration form that asks for a username and password.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Registration Form</title>
</head>
<body>

    <h1>Registration</h1>

    <form>

        <label for="username">Username:</label>
        <input type="text" id="username" name="username">

        <br><br>

        <label for="password">Password:</label>
        <input type="password" id="password" name="password">

        <br><br>

        <button type="submit">Register</button>

    </form>

</body>
</html>

Output

Registration

Username: [________________]

Password: [••••••••••••••••]

[Register]

Step-by-Step Explanation

  • type="text" creates the username field.
  • type="password" hides the characters entered by the user.
  • The form contains a registration button.
  • name attributes identify the submitted values.

Question 4

Problem Statement

Create a form that allows a user to select their gender using radio buttons.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Gender Form</title>
</head>
<body>

    <h1>Select Gender</h1>

    <form>

        <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>

        <input type="radio" id="other" name="gender" value="other">
        <label for="other">Other</label>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Select Gender

○ Male
○ Female
○ Other

[Submit]

Step-by-Step Explanation

  • type="radio" creates a radio button.
  • All options use the same name="gender".
  • Using the same name allows the user to select one option from the group.
  • value defines the value submitted for each option.

Question 5

Problem Statement

Create a form that allows a user to select their hobbies using checkboxes.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Hobbies Form</title>
</head>
<body>

    <h1>Select Your Hobbies</h1>

    <form>

        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">Reading</label>

        <br>

        <input type="checkbox" id="music" name="hobby" value="music">
        <label for="music">Music</label>

        <br>

        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">Sports</label>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Select Your Hobbies

☐ Reading
☐ Music
☐ Sports

[Submit]

Step-by-Step Explanation

  • type="checkbox" creates a checkbox.
  • Users can select multiple options.
  • Each checkbox has its own id and value.
  • The <label> makes each option easier to understand and select.

Question 6

Problem Statement

Create a form that allows the user to select a city from a dropdown list.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>City Selection</title>
</head>
<body>

    <h1>Select Your City</h1>

    <form>

        <label for="city">City:</label>

        <select id="city" name="city">
            <option value="">-- Select City --</option>
            <option value="delhi">Delhi</option>
            <option value="mumbai">Mumbai</option>
            <option value="jaipur">Jaipur</option>
            <option value="pune">Pune</option>
        </select>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Select Your City

City: [-- Select City -- ▼]

[Submit]

Step-by-Step Explanation

  • <select> creates a dropdown list.
  • <option> creates individual choices.
  • The first option provides a default instruction.
  • The user can select one city from the list.

Question 7

Problem Statement

Create a feedback form with a textarea where users can write their comments.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Feedback Form</title>
</head>
<body>

    <h1>Give Your Feedback</h1>

    <form>

        <label for="feedback">Your Feedback:</label>

        <br><br>

        <textarea
            id="feedback"
            name="feedback"
            rows="5"
            cols="40"
            placeholder="Write your feedback here...">
        </textarea>

        <br><br>

        <button type="submit">Submit Feedback</button>

    </form>

</body>
</html>

Output

Give Your Feedback

Your Feedback:

[                                    ]
[  Write your feedback here...       ]
[                                    ]
[                                    ]

[Submit Feedback]

Step-by-Step Explanation

  • <textarea> creates a multi-line text field.
  • rows controls the number of visible lines.
  • cols controls the approximate width.
  • placeholder displays a helpful hint inside the field.

Question 8

Problem Statement

Create a form that asks the user for their date of birth.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Date of Birth Form</title>
</head>
<body>

    <h1>Personal Information</h1>

    <form>

        <label for="dob">Date of Birth:</label>

        <input
            type="date"
            id="dob"
            name="dob">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Personal Information

Date of Birth: [📅  Select Date]

[Submit]

Step-by-Step Explanation

  • type="date" creates a date input.
  • The browser provides a date picker in supported browsers.
  • id identifies the input.
  • name identifies the submitted form value.

Question 9

Problem Statement

Create a registration form that requires the user to enter their name and email before submitting.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Required Form Fields</title>
</head>
<body>

    <h1>Registration Form</h1>

    <form>

        <label for="name">Name:</label>

        <input
            type="text"
            id="name"
            name="name"
            required>

        <br><br>

        <label for="email">Email:</label>

        <input
            type="email"
            id="email"
            name="email"
            required>

        <br><br>

        <button type="submit">Register</button>

    </form>

</body>
</html>

Output

Registration Form

Name:  [________________]

Email: [________________]

[Register]

Step-by-Step Explanation

  • required makes an input mandatory.
  • The form cannot be submitted normally if a required field is empty.
  • type="email" also provides basic browser validation for email input.
  • This is useful when certain information must be provided.

Question 10

Problem Statement

Create a complete student registration form containing name, email, password, gender, course, hobbies, date of birth, and a message.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Student Registration</title>
</head>
<body>

    <h1>Student Registration Form</h1>

    <form>

        <label for="name">Full Name:</label>
        <input
            type="text"
            id="name"
            name="name"
            required>

        <br><br>

        <label for="email">Email:</label>
        <input
            type="email"
            id="email"
            name="email"
            required>

        <br><br>

        <label for="password">Password:</label>
        <input
            type="password"
            id="password"
            name="password"
            required>

        <br><br>

        <label for="dob">Date of Birth:</label>
        <input
            type="date"
            id="dob"
            name="dob">

        <br><br>

        <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>

        <br><br>

        <label for="course">Select Course:</label>

        <select id="course" name="course">

            <option value="">-- Select Course --</option>
            <option value="html">HTML</option>
            <option value="css">CSS</option>
            <option value="javascript">JavaScript</option>
            <option value="python">Python</option>

        </select>

        <br><br>

        <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>

        <input
            type="checkbox"
            id="music"
            name="hobby"
            value="music">

        <label for="music">Music</label>

        <br><br>

        <label for="message">About Yourself:</label>

        <br><br>

        <textarea
            id="message"
            name="message"
            rows="5"
            cols="40"
            placeholder="Write something about yourself...">
        </textarea>

        <br><br>

        <button type="submit">Register</button>

        <button type="reset">Reset</button>

    </form>

</body>
</html>

Output

Student Registration Form

Full Name:      [________________]

Email:          [________________]

Password:       [••••••••••••••••]

Date of Birth:  [📅 Select Date]

Gender:
○ Male
○ Female

Select Course:  [-- Select Course -- ▼]

Hobbies:
☐ Reading
☐ Sports
☐ Music

About Yourself:

[                                    ]
[                                    ]
[                                    ]
[                                    ]

[Register] [Reset]

Step-by-Step Explanation

  • <form> contains all registration fields.
  • text collects the student’s name.
  • email collects an email address.
  • password creates a password field.
  • date collects the date of birth.
  • Radio buttons allow one gender option to be selected.
  • <select> creates the course dropdown.
  • Checkboxes allow multiple hobbies.
  • <textarea> collects longer information.
  • submit sends the form.
  • reset clears the entered values.

Key Takeaways

  • <form> is used to collect user information.
  • <input> creates different types of form fields.
  • <label> describes form controls.
  • Radio buttons are useful when the user must select one option.
  • Checkboxes allow multiple selections.
  • <select> creates dropdown menus.
  • <textarea> is used for longer text.
  • required makes a field mandatory.
  • submit sends the form.
  • reset clears the form fields.

Frequently Asked Questions (FAQs)

1. What is an HTML form?

An HTML form is used to collect information from users through different input controls.

2. Which tag creates a form?

The <form> tag creates an HTML form.

3. What is the difference between radio buttons and checkboxes?

Radio buttons are generally used when the user should choose one option from a group. Checkboxes allow multiple options to be selected.

4. What does required do?

The required attribute makes a form field mandatory before normal form submission.

5. What is the purpose of the <label> tag?

<label> provides a description for a form control and improves usability and accessibility.

6. What is the difference between <input> and <textarea>?

<input> is generally used for short, single-line values, while <textarea> is designed for multi-line text.

7. What is the purpose of the name attribute?

The name attribute identifies a form control when its value is submitted with the form.

8. What does type="submit" do?

It creates a button that submits the form.

9. What does type="reset" do?

It creates a button that resets form controls to their initial values.

10. Can HTML forms validate user input?

Yes. HTML provides built-in validation features such as required, type="email", min, max, pattern, and others.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top