Complete Web Designing Course for Beginners

📘 MODULE 2 – Forms & User Input

📝 Lesson 2.1 – Introduction to Forms

🌐 Collecting User Information Through Websites

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what HTML Forms are

✅ Understand why forms are important

✅ Create basic forms

✅ Collect user information

✅ Understand common form elements

✅ Create simple user input forms

📖 Introduction

Think about the websites you use every day.

When you:

Login to Facebook
Register on a website
Fill a college admission form
Submit a contact form
Apply for a job

You are using:

📝 Forms

Forms are one of the most important parts of websites.

Without forms:

❌ No Login System

❌ No Registration System

❌ No Contact Form

❌ No Admission Form

❌ No User Input

🤔 What is a Form?

A form is a section of a webpage used to collect information from users.

Examples:

Student Name
Mobile Number
Email Address
Password
Address
Feedback

🌍 Real Life Example

College Admission Form

Students enter:

Name

Father Name

Email

Mobile Number

Branch

Address

This information is collected through a form.

🌟 Why Forms Are Important?

Forms help websites:

✅ Collect Information

✅ Register Users

✅ Login Users

✅ Receive Feedback

✅ Take Admissions

✅ Conduct Surveys

🏗️ HTML Form Tag

Forms are created using:

<form>

This is called:

Form Tag

Basic Syntax

<form>

Form Elements

</form>

Example

<form>

Name:

<input type="text">

</form>

Output

Name:

[________]

🎯 Understanding Form Elements

Forms contain different elements.

Examples:

Element	Purpose
Input	User Input
Label	Field Name
Button	Submit Data
Select	Dropdown Menu
Textarea	Large Text Input

🏷️ Label Tag

Labels identify form fields.

Example

<label>Name:</label>

Output

Name:

Why Use Labels?

Without labels:

[________]

User won’t know what to enter.

With labels:

Name:

[________]

Much better.

🌟 Input Tag

Input fields are created using:

<input>

Example

<input type="text">

Output

[________]

What Does Input Do?

Input allows users to:

Type Text
Enter Email
Enter Password
Select Dates
Choose Options

🎯 Simple Form Example

<form>

<label>Name:</label>

<input type="text">

</form>

Output

Name:

[________]

🌟 Multiple Fields Example

<form>

<label>Name:</label>

<input type="text">

<br><br>

<label>Email:</label>

<input type="text">

</form>

Output

Name:

[________]

Email:

[________]

📏 Line Breaks in Forms

We often use:

<br>

to move fields to a new line.

Example

<label>Name:</label>

<br>

<input type="text">

Result

Input appears below the label.

🌟 Complete Basic Form

<!DOCTYPE html>

<html>

<head>

<title>Simple Form</title>

</head>

<body>

<h1>Student Information Form</h1>

<form>

<label>Name:</label>

<br>

<input type="text">

<br><br>

<label>Email:</label>

<br>

<input type="text">

<br><br>

<label>Mobile:</label>

<br>

<input type="text">

</form>

</body>

</html>

🎯 Expected Output

Student Information Form

Name:

[________]

Email:

[________]

Mobile:

[________]

🏫 Example – College Admission Form Layout

<form>

<label>Student Name:</label>

<br>

<input type="text">

<br><br>

<label>Father Name:</label>

<br>

<input type="text">

<br><br>

<label>Branch:</label>

<br>

<input type="text">

</form>

Output

A simple admission form.

🌟 Form Attributes

The <form> tag can contain attributes.

Example:

<form action="">

<form method="">

Don’t worry.

We will learn them later.

For now focus on:

Creating form fields.

🎯 Form Structure Diagram

--------------------------------

FORM

--------------------------------

LABEL

INPUT

--------------------------------

LABEL

INPUT

--------------------------------

LABEL

INPUT

--------------------------------

💻 Complete Practical Example

<!DOCTYPE html>

<html>

<head>

<title>Student Registration</title>

</head>

<body>

<h1>Student Registration Form</h1>

<form>

<label>Student Name:</label>

<br>

<input type="text">

<br><br>

<label>Email Address:</label>

<br>

<input type="text">

<br><br>

<label>Mobile Number:</label>

<br>

<input type="text">

<br><br>

<label>City:</label>

<br>

<input type="text">

</form>

</body>

</html>

🌟 Real World Applications

Forms are used in:

Login Page

Username

Password

Registration Page

Name

Email

Password

Admission Form

Student Details

Contact Form

Name

Email

Message

Job Application

Resume

Personal Information

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting Form Tag

Wrong:

<input type="text">

Correct:

<form>

<input type="text">

</form>

Mistake 2

Not Using Labels

Wrong:

<input type="text">

Correct:

<label>Name:</label>

<input type="text">

Mistake 3

Not Using Line Breaks

Wrong:

Name:
<input type="text">
Email:
<input type="text">

Looks messy.

Correct:

Use:

<br>

for proper formatting.

🌟 Best Practices

✅ Always use labels.

✅ Organize fields properly.

✅ Keep forms simple.

✅ Use line breaks for readability.

✅ Give meaningful field names.

🏆 Mini Project – Student Information Form

Create a form containing:

Student Name
Email
Mobile Number
City

Display all fields neatly.

📝 Practical Activity

Create:

Student Registration Form

Include:

✅ Name

✅ Email

✅ Mobile Number

✅ Address

Run in Chrome Browser.

📋 Assignment

Assignment 2.1

What is an HTML Form?
Why are forms important?
Which tag creates a form?
Which tag creates an input field?
Which tag creates labels?
Create a simple student form.
Name three real-world uses of forms.

🧠 Quiz

Q1. Which tag creates a form?

A. <input>

B. <label>

C. <form>

D. <textarea>

✅ Answer: C

Q2. Which tag creates user input fields?

A. <input>

B. <form>

C. <button>

D. <label>

✅ Answer: A

Q3. Which tag identifies form fields?

A. <label>

B. <input>

C. <select>

D. <textarea>

✅ Answer: A

Q4. Forms are mainly used for:

A. Styling

B. User Input

C. Images

D. Tables

✅ Answer: B

Q5. Which website feature uses forms?

A. Login Page

B. Registration Page

C. Admission Form

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Forms are used to collect user information.

✅ <form> creates a form.

✅ <input> creates input fields.

✅ <label> identifies fields.

✅ Forms are used in login, registration, admission, and contact pages.

✅ Properly structured forms improve user experience.