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

  1. What is an input type?
  2. Which input type is used for passwords?
  3. Which input type is used for emails?
  4. Which input type is used for dates?
  5. Which input type is used for phone numbers?
  6. What is a placeholder?
  7. 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.

PreviousNext