Complete Web Designing Course for Beginners

Lesson 2.2 – Input Types

🌐 Understanding Different Types of User Input Fields in HTML Forms

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand HTML Input Types

✅ Create Text Fields

✅ Create Password Fields

✅ Create Email Fields

✅ Create Number Fields

✅ Create Date Fields

✅ Create Telephone Fields

✅ Create URL Fields

✅ Create Search Fields

✅ Use Different Input Types Professionally

📖 Introduction

In the previous lesson, we learned that:

<input>

creates an input field.

But think about this:

Should a password field look the same as a name field?

❌ No

Should a date field look the same as a phone number field?

❌ No

HTML provides different input types for different purposes.

Example:

Name → Text Field
Password → Password Field
Email → Email Field
Age → Number Field
Date of Birth → Date Field

🤔 What is an Input Type?

An input type tells the browser:

What kind of information the user should enter.

Syntax:

<input type="value">

🌟 Common Input Types

Most important input types:

type="text"

type="password"

type="email"

type="number"

type="tel"

type="date"

type="url"

type="search"

1️⃣ Text Input

Most common input type.

Used for:

Name
City
College Name
Branch

Syntax

<input type="text">

Example

<label>Name:</label>

<input type="text">

Output

Name:

[____________]

🌟 Placeholder Attribute

Provides guidance to users.

Example:

<input type="text"
placeholder="Enter Your Name">

Output

[Enter Your Name]

2️⃣ Password Input

Used for passwords.

Characters are hidden automatically.

Syntax

<input type="password">

Example

<label>Password:</label>

<input type="password">

Output

Password:

[********]

Why Use Password Fields?

Protects user privacy.

3️⃣ Email Input

Used for email addresses.

Syntax

<input type="email">

Example

<label>Email:</label>

<input type="email">

Output

Email:

[____________]

Benefit

Modern browsers can validate email format automatically.

Example:

✅ student@gmail.com

❌ studentgmail.com

4️⃣ Number Input

Used for numbers only.

Syntax

<input type="number">

Example

<label>Age:</label>

<input type="number">

Output

Age:

[____]

Benefit

Only numeric values are allowed.

Example with Limits

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

Meaning

Allowed range:

1 to 100

5️⃣ Telephone Input

Used for mobile numbers.

Syntax

<input type="tel">

Example

<label>Mobile:</label>

<input type="tel">

Output

Mobile:

[____________]

Real World Example

Admission Forms

Registration Forms

Contact Forms

6️⃣ Date Input

Used for selecting dates.

Syntax

<input type="date">

Example

<label>Date of Birth:</label>

<input type="date">

Output

Date Picker appears.

Benefit

Users can select dates easily.

Example

📅 25-12-2026

7️⃣ URL Input

Used for website links.

Syntax

<input type="url">

Example

<label>Website:</label>

<input type="url">

Output

Website:

[____________]

Example Value

https://www.google.com

Real World Use

Portfolio Websites

Business Websites

Company Profiles

8️⃣ Search Input

Used for search boxes.

Syntax

<input type="search">

Example

<label>Search:</label>

<input type="search">

Output

Search:

[____________]

Real World Example

Google Search

YouTube Search

Amazon Search

🎯 Readonly Input

User can view but cannot edit.

Example

<input type="text"
value="Polytechnic"
readonly>

Output

Polytechnic

Cannot be changed.

🎯 Disabled Input

Completely disabled.

Example

<input type="text"
value="Disabled"
disabled>

Output

Greyed out field.

🎯 Required Attribute

Makes a field mandatory.

Example

<input type="text"
required>

Result

Form cannot be submitted if field is empty.

🌟 Complete Example Program

<!DOCTYPE html>

<html>

<head>

<title>Input Types Example</title>

</head>

<body>

<h1>Student Registration Form</h1>

<form>

<label>Name:</label>

<input type="text">

<br><br>

<label>Password:</label>

<input type="password">

<br><br>

<label>Email:</label>

<input type="email">

<br><br>

<label>Age:</label>

<input type="number">

<br><br>

<label>Mobile:</label>

<input type="tel">

<br><br>

<label>Date of Birth:</label>

<input type="date">

<br><br>

<label>Website:</label>

<input type="url">

<br><br>

<label>Search:</label>

<input type="search">

</form>

</body>

</html>

🎯 Expected Output

Form containing:

✅ Name Field

✅ Password Field

✅ Email Field

✅ Number Field

✅ Mobile Field

✅ Date Picker

✅ Website Field

✅ Search Field

🏫 Real World Example – College Registration Form

<form>

<label>Student Name:</label>

<input type="text">

<br><br>

<label>Email:</label>

<input type="email">

<br><br>

<label>Mobile:</label>

<input type="tel">

<br><br>

<label>Date of Birth:</label>

<input type="date">

</form>

⚠️ Common Beginner Mistakes

Mistake 1

Using Text for Password

Wrong:

<input type="text">

Correct:

<input type="password">

Mistake 2

Using Text for Email

Wrong:

<input type="text">

Correct:

<input type="email">

Mistake 3

Forgetting Placeholder

Wrong:

<input type="text">

Better:

<input type="text"
placeholder="Enter Your Name">

🌟 Best Practices

✅ Use the correct input type.

✅ Use placeholders for guidance.

✅ Use required fields when necessary.

✅ Use email type for email addresses.

✅ Use password type for passwords.

✅ Use date picker for dates.

🏆 Mini Project – Student Registration Form

Create a form containing:

Name
Email
Mobile Number
Date of Birth
Password

Use proper input types for each field.

📝 Practical Activity

Create a form containing:

✅ Name

✅ Email

✅ Mobile Number

✅ Age

✅ Date of Birth

✅ Website

Run it in Chrome Browser.

📋 Assignment

Assignment 2.2

What is an input type?
Which input type is used for passwords?
Which input type is used for emails?
Which input type is used for dates?
Which input type is used for phone numbers?
What is a placeholder?
Create a form using at least five input types.

🧠 Quiz

Q1. Which input type hides characters?

A. text

B. email

C. password

D. date

✅ Answer: C

Q2. Which input type is used for email addresses?

A. text

B. mail

C. email

D. url

✅ Answer: C

Q3. Which input type displays a date picker?

A. calendar

B. time

C. date

D. day

✅ Answer: C

Q4. Which input type is used for phone numbers?

A. mobile

B. tel

C. phone

D. number

✅ Answer: B

Q5. Which attribute makes a field mandatory?

A. readonly

B. disabled

C. required

D. placeholder

✅ Answer: C

📌 Lesson Summary

✅ Input types help collect different types of user information.

✅ text is used for normal text.

✅ password hides user input.

✅ email validates email addresses.

✅ number accepts numeric values.

✅ tel is used for phone numbers.

✅ date provides a date picker.

✅ Using correct input types improves user experience.