HTML Input Types – Solved Practice Questions

By /

Introduction

The <input> element is one of the most commonly used HTML form elements. Its type attribute determines what kind of information a user can enter or select. In this chapter, you will practice common HTML input types such as text, email, password, number, date, radio, checkbox, file, URL, and color.

Question 1

Problem Statement

Create a form that accepts a user’s name using a text input.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Text Input</title>
</head>
<body>

    <h1>Enter Your Name</h1>

    <form>

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

        <input
            type="text"
            id="name"
            name="name"
            placeholder="Enter your name">

        <br><br>

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

    </form>

</body>
</html>

Output

Enter Your Name

Name: [Enter your name________]

[Submit]

Step-by-Step Explanation

  • type="text" creates a single-line text field.
  • id identifies the input.
  • name identifies the value during form submission.
  • placeholder displays a helpful hint.

Question 2

Problem Statement

Create an input field for an email address.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Email Input</title>
</head>
<body>

    <h1>Email Address</h1>

    <form>

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

        <input
            type="email"
            id="email"
            name="email"
            placeholder="Enter your email"
            required>

        <br><br>

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

    </form>

</body>
</html>

Output

Email Address

Email: [Enter your email_____]

[Submit]

Step-by-Step Explanation

  • type="email" creates an email input.
  • Browsers can perform basic email-format validation.
  • required makes the field mandatory.
  • placeholder provides an example of what to enter.

Question 3

Problem Statement

Create a password input field.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Password Input</title>
</head>
<body>

    <h1>Login</h1>

    <form>

        <label for="password">Password:</label>

        <input
            type="password"
            id="password"
            name="password"
            placeholder="Enter password">

        <br><br>

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

    </form>

</body>
</html>

Output

Login

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

[Login]

Step-by-Step Explanation

  • type="password" creates a password field.
  • Characters entered by the user are visually hidden.
  • It is commonly used for login and registration forms.

Question 4

Problem Statement

Create a number input that allows the user to enter their age.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Number Input</title>
</head>
<body>

    <h1>Age Form</h1>

    <form>

        <label for="age">Age:</label>

        <input
            type="number"
            id="age"
            name="age"
            min="1"
            max="100">

        <br><br>

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

    </form>

</body>
</html>

Output

Age Form

Age: [ 18 ▲▼ ]

[Submit]

Step-by-Step Explanation

  • type="number" creates a numeric input.
  • min="1" sets the minimum allowed value.
  • max="100" sets the maximum allowed value.
  • Browsers may provide controls for increasing or decreasing the number.

Question 5

Problem Statement

Create a date input that allows the user to select their date of birth.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Date Input</title>
</head>
<body>

    <h1>Date of Birth</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

Date of Birth

Date of Birth: [📅 Select Date]

[Submit]

Step-by-Step Explanation

  • type="date" creates a date picker in supported browsers.
  • Users can select a date instead of typing it manually.
  • It is commonly used for birthdays, appointments, and booking forms.

Question 6

Problem Statement

Create a form that allows the user to select their gender using radio button input types.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Radio Input</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 three inputs use the same name="gender".
  • The same name groups the radio buttons together.
  • Normally, the user selects one option from the group.
  • value defines the value associated with each option.

Question 7

Problem Statement

Create a form that allows the user to select multiple hobbies using a checkbox input.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Input</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 more than one checkbox.
  • Each checkbox has its own value.
  • The name identifies the form data.

Concepts Used: type="checkbox", name, value

Question 8

Problem Statement

Create a form that allows the user to upload a file.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>File Input</title>
</head>
<body>

    <h1>Upload Your Resume</h1>

    <form>

        <label for="resume">Choose File:</label>

        <input
            type="file"
            id="resume"
            name="resume">

        <br><br>

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

    </form>

</body>
</html>

Output

Upload Your Resume

Choose File: [Choose File]

[Upload]

Step-by-Step Explanation

  • type="file" creates a file selection control.
  • The user can select a file from their device.
  • name="resume" identifies the uploaded field.
  • A real application needs appropriate server-side handling to process the uploaded file.

Question 9

Problem Statement

Create a form that accepts a website URL from the user.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>URL Input</title>
</head>
<body>

    <h1>Enter Your Website</h1>

    <form>

        <label for="website">Website:</label>

        <input
            type="url"
            id="website"
            name="website"
            placeholder="https://example.com">

        <br><br>

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

    </form>

</body>
</html>

Output

Enter Your Website

Website: [https://example.com____]

[Submit]

Step-by-Step Explanation

  • type="url" creates a URL input field.
  • It is designed for website addresses.
  • Browsers can provide basic validation for URL input.
  • The placeholder shows the expected format.

Question 10

Problem Statement

Create a form that allows the user to select a color.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Color Input</title>
</head>
<body>

    <h1>Select Your Favorite Color</h1>

    <form>

        <label for="color">Choose Color:</label>

        <input
            type="color"
            id="color"
            name="color"
            value="#0000ff">

        <br><br>

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

    </form>

</body>
</html>

Output

Select Your Favorite Color

Choose Color: [■]

[Submit]

Step-by-Step Explanation

  • type="color" creates a color picker.
  • The user can choose a color from the browser’s color selection interface.
  • value sets the initial color.
  • #0000ff represents blue.

Key Takeaways

  • The <input> element can create many different types of form controls.
  • type="text" is used for normal text.
  • type="email" is used for email addresses.
  • type="password" hides entered characters.
  • type="number" accepts numeric values.
  • type="date" provides a date picker.
  • type="radio" is used for single-choice selections.
  • type="checkbox" allows multiple selections.
  • type="file" allows users to choose files.
  • type="url" is designed for website addresses.
  • type="color" creates a color picker.

Frequently Asked Questions (FAQs)

1. What is the type attribute of an HTML input?

The type attribute tells the browser what kind of input control should be displayed.

2. What is the default input type?

If the type attribute is omitted, the default type is text.

3. Which input type is used for passwords?

Use:

<input type="password">

4. Which input type is used for email?

Use:

<input type="email">

5. What is the difference between radio and checkbox inputs?

Radio buttons are generally used for selecting one option from a group, while checkboxes allow multiple options to be selected.

6. Which input type is used for uploading files?

Use:

<input type="file">

7. Which input type is used for selecting a date?

Use:

<input type="date">

8. Can an input have a placeholder?

Yes. For example:

<input type="text" placeholder="Enter your name">

9. Can HTML input fields have default values?

Yes. Use the value attribute.

<input type="text" value="Rahul">

10. Are there other HTML input types?

Yes. HTML also provides types such as search, tel, time, month, week, datetime-local, range, and hidden.

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

Related Posts

Scroll to Top