HTML5 Input Types Practice Questions with Solutions

HTML5 introduced several new input types that make forms smarter, easier to use, and more user-friendly. Instead of using only a simple text box for every type of information, HTML5 provides specialized input types for email addresses, phone numbers, dates, URLs, passwords, search boxes, file uploads, colors, and more. HTML5 Input Types practice questions with solutions help to understand the concepts.

Using the correct input type helps browsers:

Validate user input automatically.
Display appropriate keyboards on mobile devices.
Reduce user input errors.
Improve accessibility.
Create professional-looking forms.

For example:

An email field checks for a valid email format.
A date field displays a calendar picker.
A color field opens a color selection dialog.
A range field creates a slider.

Learning these input types is essential because they are widely used in registration forms, login pages, contact forms, e-commerce websites, job portals, and web applications.

Why Learn HTML5 Input Types?

HTML5 input types help you:

Build modern forms.
Improve user experience.
Reduce validation errors.
Save development time.
Improve mobile compatibility.
Create professional websites.

Common HTML5 Input Types

Input Type	Purpose
text	General text input
password	Hidden password input
email	Email address
number	Numeric values
tel	Phone number
url	Website URL
search	Search box
date	Calendar picker
time	Time picker
month	Month selector
week	Week selector
color	Color picker
range	Slider
file	Upload files
hidden	Hidden form value

1. Create a Text Input Field

Problem Statement

Create a form that allows users to enter their full name.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Text Input Example</title>

</head>

<body>

    <h1>Student Form</h1>

    <form>

        <label>Full Name</label>

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

    </form>

</body>

</html>

Expected Output

Student Form

Full Name

[ Enter your full name ]

Explanation

The type="text" input creates a standard single-line text field.

It is commonly used for:

Name
City
Country
Occupation
Username

Concepts Covered

type="text"
Text Input
HTML5 Forms

2. Create a Password Input Field

Problem Statement

Create a login form containing a password input field.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Password Input</title>

</head>

<body>

    <h1>User Login</h1>

    <form>

        <label>Password</label>

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

    </form>

</body>

</html>

Expected Output

User Login

Password

[ ******** ]

Characters entered into the field are hidden for security.

Explanation

The type="password" input masks the typed characters, protecting sensitive information from being visible on the screen.

It is widely used for:

Login forms
Registration forms
Security PINs
Account verification

Concepts Covered

type="password"
Secure Input
HTML5 Forms

3. Create an Email Input Field

Problem Statement

Create a form that accepts a valid email address.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Email Input</title>

</head>

<body>

    <h1>Email Registration</h1>

    <form>

        <label>Email Address</label>

        <input
            type="email"
            placeholder="example@gmail.com"
            required>

    </form>

</body>

</html>

Expected Output

Email Registration

Email Address

[ example@gmail.com ]

If the user enters an invalid email address, the browser displays a validation message when the form is submitted.

Explanation

The type="email" input validates the email format automatically.

Examples of valid email addresses:

student@gmail.com
info@example.com
support@company.org

Concepts Covered

type="email"
Email Validation
HTML5 Input Types

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 Example</title>

</head>

<body>

    <h1>Age Form</h1>

    <form>

        <label>Age</label>

        <input
            type="number"
            min="1"
            max="100"
            placeholder="Enter your age"
            required>

    </form>

</body>

</html>

Expected Output

Age Form

Age

[ Enter your age ]

On most mobile devices, a numeric keyboard appears automatically.

Explanation

The type="number" input only accepts numeric values.

The attributes:

min specifies the minimum allowed value.
max specifies the maximum allowed value.

Common uses include:

Age
Quantity
Salary
Marks
Price

Concepts Covered

type="number"
Numeric Input
min
max

5. Create a Telephone Input Field

Problem Statement

Create a form that allows users to enter their mobile number.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Telephone Input</title>

</head>

<body>

    <h1>Contact Details</h1>

    <form>

        <label>Mobile Number</label>

        <input
            type="tel"
            placeholder="9876543210"
            required>

    </form>

</body>

</html>

Expected Output

Contact Details

Mobile Number

[ 9876543210 ]

Explanation

The type="tel" input is used for telephone numbers.

Unlike type="number", it does not automatically validate phone numbers because formats vary between countries.

On smartphones, it displays a numeric keypad, making it easier for users to enter phone numbers.

Concepts Covered

type="tel"
Phone Number Input
Mobile-Friendly Forms

6. Create a URL Input Field

Problem Statement

Create a form that accepts a website address.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>URL Input</title>

</head>

<body>

    <h1>Website Details</h1>

    <form>

        <label>Website URL</label>

        <input
            type="url"
            placeholder="https://example.com"
            required>

    </form>

</body>

</html>

Expected Output

Website Details

Website URL

[ https://example.com ]

Explanation

The type="url" input checks whether the entered value follows a valid URL format.

Common uses include:

Company websites
Portfolio links
Social media profiles
Personal blogs

Concepts Covered

type="url"
URL Validation
HTML5 Forms

7. Create a Search Input Field

Problem Statement

Create a search box for searching courses on a website.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Search Input</title>

</head>

<body>

    <h1>Search Courses</h1>

    <form>

        <label>Search</label>

        <input
            type="search"
            placeholder="Search courses...">

    </form>

</body>

</html>

Expected Output

Search Courses

Search

[ Search courses... ]

Explanation

The type="search" input is designed specifically for search boxes.

Some browsers display a clear (✖) button inside the field after the user starts typing.

It is commonly used for:

Product search
Blog search
Course search
Website search

Concepts Covered

type="search"
Search Input
HTML5 Forms

8. Create a Hidden Input Field

Problem Statement

Create a form that stores a hidden user ID without displaying it to the user.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Hidden Input</title>

</head>

<body>

    <h1>User Information</h1>

    <form>

        <input
            type="hidden"
            name="user_id"
            value="1001">

        <label>Name</label>

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

    </form>

</body>

</html>

Expected Output

User Information

Name

[ Enter your name ]

The hidden field is not visible but is submitted with the form.

Explanation

The type="hidden" input stores information that users cannot see or modify.

It is commonly used for:

User IDs
Product IDs
Order IDs
Session Tokens
Tracking Information

Concepts Covered

type="hidden"
Hidden Form Data
HTML5 Input Types

Mini Practice Challenge

Create a registration form containing:

Full Name (text)
Email (email)
Mobile Number (tel)
Age (number)
Portfolio Website (url)
Search Box (search)
Hidden Student ID (hidden)

Try building the form on your own before checking the next solutions.

9. Create a Date Input Field

Problem Statement

Create a form that allows users to select their Date of Birth using a calendar picker.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Date Input Example</title>

</head>

<body>

    <h1>Student Registration</h1>

    <form>

        <label>Date of Birth</label>

        <input
            type="date"
            required>

    </form>

</body>

</html>

Expected Output

Student Registration

Date of Birth

[ 📅 ]

Clicking the field opens the browser’s built-in calendar.

Explanation

The type="date" input displays a calendar picker, allowing users to choose a valid date without typing it manually.

Common uses include:

Date of Birth
Appointment Date
Booking Date
Event Registration
Leave Application

Concepts Covered

type="date"
Calendar Picker
HTML5 Forms

10. Create a Time Input Field

Problem Statement

Create a form that allows users to choose a meeting time.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Time Input Example</title>

</head>

<body>

    <h1>Meeting Schedule</h1>

    <form>

        <label>Select Time</label>

        <input
            type="time"
            required>

    </form>

</body>

</html>

Expected Output

Meeting Schedule

Select Time

[ ⏰ ]

Explanation

The type="time" input provides a built-in time selector.

It is commonly used for:

Appointment booking
Office meetings
Online classes
Event scheduling

Concepts Covered

type="time"
Time Picker
HTML5 Input Types

11. Create a Month Input Field

Problem Statement

Create a form that allows users to select their joining month.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Month Input Example</title>

</head>

<body>

    <h1>Employee Details</h1>

    <form>

        <label>Joining Month</label>

        <input
            type="month">

    </form>

</body>

</html>

Expected Output

Employee Details

Joining Month

[ Month / Year ]

Explanation

The type="month" input allows users to select only the month and year.

It is commonly used for:

Joining Month
Subscription Plans
Billing Cycle
Financial Reports

Concepts Covered

type="month"
Month Picker
HTML5 Forms

12. Create a Week Input Field

Problem Statement

Create a form that allows users to select a particular week of the year.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Week Input Example</title>

</head>

<body>

    <h1>Select Week</h1>

    <form>

        <label>Choose Week</label>

        <input
            type="week">

    </form>

</body>

</html>

Expected Output

Select Week

Choose Week

[ Week / Year ]

Explanation

The type="week" input allows users to choose a specific week of a year.

It is useful for:

Weekly Reports
Attendance Systems
Weekly Planning
Project Scheduling

Concepts Covered

type="week"
Week Picker
HTML5 Forms

13. Create a Color Picker

Problem Statement

Create a form that allows users to choose their favorite color.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Color Picker Example</title>

</head>

<body>

    <h1>Favorite Color</h1>

    <form>

        <label>Select Color</label>

        <input
            type="color">

    </form>

</body>

</html>

Expected Output

Favorite Color

Select Color

[ 🎨 ]

Clicking the color box opens the browser’s color picker.

Explanation

The type="color" input allows users to choose colors from a built-in color selection dialog.

It is commonly used in:

Website theme customization
Graphic design applications
Branding tools
User profile customization

Concepts Covered

type="color"
Color Picker
HTML5 Input Types

Mini Practice Challenge

Create a scheduling form that contains:

Date Picker
Time Picker
Month Picker
Week Picker
Favorite Color Picker

Try creating the complete form using only HTML5 input types before looking at the next solutions.

14. Create a Range Slider

Problem Statement

Create a form that allows users to adjust the website volume using a slider ranging from 0 to 100.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>Range Slider Example</title>

</head>

<body>

    <h1>Volume Control</h1>

    <form>

        <label>Volume</label>

        <input
            type="range"
            min="0"
            max="100"
            value="50">

    </form>

</body>

</html>

Expected Output

Volume Control

Volume

0 ------------------●------------------100

The slider starts at 50 by default.

Explanation

The type="range" input creates a slider that allows users to choose a value within a predefined range.

The attributes used are:

min → Minimum value
max → Maximum value
value → Default slider position

It is commonly used for:

Volume control
Brightness adjustment
Product price filters
Ratings
Progress settings

Concepts Covered

type="range"
Slider Input
HTML5 Input Types

15. Create a File Upload Field

Problem Statement

Create a form that allows users to upload their resume.

HTML Solution

<!DOCTYPE html>
<html>

<head>

    <title>File Upload Example</title>

</head>

<body>

    <h1>Upload Resume</h1>

    <form>

        <label>Select Resume</label>

        <input
            type="file"
            accept=".pdf,.doc,.docx">

    </form>

</body>

</html>

Expected Output

Upload Resume

Select Resume

[ Choose File ]

Explanation

The type="file" input allows users to upload files from their local device.

The accept attribute limits the types of files that can be selected.

In this example:

.pdf
.doc
.docx

Only Microsoft Word and PDF files can be uploaded.

Common uses include:

Resume Upload
Profile Picture
Assignment Submission
Identity Proof
Project Files

Concepts Covered

type="file"
File Upload
accept Attribute
HTML5 Input Types

Coding Challenge

Create a Professional Employee Registration Form using all major HTML5 input types.

The form should include:

Full Name (text)
Password (password)
Email (email)
Mobile Number (tel)
Age (number)
Website (url)
Search Skill (search)
Date of Birth (date)
Meeting Time (time)
Joining Month (month)
Training Week (week)
Favorite Color (color)
Experience Level (range)
Resume Upload (file)
Hidden Employee ID (hidden)
Submit Button

Try creating the form without referring to the solutions.

Chapter Summary

In this chapter, you learned the most commonly used HTML5 input types that help create professional, user-friendly, and responsive web forms.

Unlike older HTML versions that relied mainly on type="text", HTML5 provides specialized input types for different kinds of data. These input types improve user experience by offering built-in validation, mobile-friendly keyboards, and browser-supported controls.

Throughout this chapter, you practiced creating forms using:

Text input
Password input
Email input
Number input
Telephone input
URL input
Search input
Date picker
Time picker
Month picker
Week picker
Color picker
Range slider
File upload
Hidden input

These input types are widely used in:

Registration forms
Login pages
Contact forms
Job portals
College admission forms
Banking applications
E-commerce websites
CRM systems
HR management software

Mastering HTML5 input types is an essential step toward becoming a professional frontend web developer.

Key Takeaways

type="text" is used for general text input.
type="password" hides entered characters.
type="email" validates email addresses automatically.
type="number" accepts only numeric values.
type="tel" is optimized for phone numbers.
type="url" validates website addresses.
type="search" is designed for search boxes.
type="date" displays a calendar picker.
type="time" displays a time picker.
type="month" allows users to select a month and year.
type="week" allows selection of a specific week.
type="color" opens a color picker.
type="range" creates a slider.
type="file" uploads files from the user’s device.
type="hidden" stores invisible form values.

Frequently Asked Questions (FAQs)

1. What is the purpose of HTML5 input types?

HTML5 input types provide specialized fields for collecting different kinds of user information.

Example:

<input type="email">

<input type="date">

<input type="file">

Using the correct input type improves validation and user experience.

2. Which input type should be used for passwords?

Use:

<input type="password">

This hides typed characters for better security.

3. What is the difference between `email` and `text`?

Email	Text
Validates email format	Accepts any text
Shows email keyboard on mobile	Shows normal keyboard

Example:

<input type="email">

<input type="text">

4. Why should we use `type="number"`?

The number input accepts only numeric values.

Example:

<input
    type="number"
    min="1"
    max="100">

It is commonly used for:

Age
Quantity
Salary
Price

5. What is the purpose of `type="file"`?

The file input allows users to upload files.

Example:

<input type="file">

Common uploads include:

Resume
Images
Documents
Assignments

6. What does `type="range"` do?

The range input creates a slider.

Example:

<input
    type="range"
    min="0"
    max="100">

It is commonly used for:

Volume
Brightness
Ratings
Filters

7. Which input type opens a calendar?

Use:

<input type="date">

This displays the browser’s built-in calendar.

8. Why should developers use HTML5 input types?

HTML5 input types:

Reduce JavaScript validation requirements.

Improve user experience.

Reduce typing mistakes.

Provide built-in validation.

Improve accessibility.

Work well on mobile devices.

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

Rishabh Kumar