Complete Web Designing Course for Beginners

MODULE 2 – Forms & User Input

📝 Lesson 2.6 – Building a Registration Form

🚀 Creating a Complete Student Registration Form Using HTML

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Create a complete registration form

✅ Use different input types

✅ Use radio buttons

✅ Use checkboxes

✅ Use dropdown menus

✅ Use text areas

✅ Apply form validation

✅ Build professional forms

📖 Introduction

Until now we have learned:

✅ Input Fields

✅ Email Fields

✅ Password Fields

✅ Radio Buttons

✅ Checkboxes

✅ Dropdown Menus

✅ Text Areas

✅ Validation

Now it’s time to combine everything and create a:

🏫 Student Registration Form

This type of form is commonly used in:

Schools
Colleges
Universities
Training Institutes
Online Courses

🌟 What Information Should a Registration Form Collect?

A registration form usually collects:

Personal Information

Name
Email
Mobile Number
Date of Birth

Educational Information

Branch
Semester

Other Information

Gender
Skills
Address

🏗️ Registration Form Structure

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

Student Registration Form

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

Name

Email

Password

Mobile Number

Date of Birth

Gender

Branch

Skills

Address

Submit Button

Reset Button

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

🎯 Step 1 – Create HTML Structure

<!DOCTYPE html>

<html>

<head>

<title>Student Registration Form</title>

</head>

<body>

<h1>Student Registration Form</h1>

</body>

</html>

🎯 Step 2 – Create Form Tag

<form>

</form>

Complete Structure

<h1>Student Registration Form</h1>

<form>

</form>

🎯 Step 3 – Add Name Field

<label>Student Name:</label>

<br>

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

<br><br>

Output

Student Name

[Enter Your Name]

🎯 Step 4 – Add Email Field

<label>Email:</label>

<br>

<input
type="email"
placeholder="Enter Email"
required>

<br><br>

🎯 Step 5 – Add Password Field

<label>Password:</label>

<br>

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

<br><br>

🎯 Step 6 – Add Mobile Number

<label>Mobile Number:</label>

<br>

<input
type="tel"
pattern="[0-9]{10}"
placeholder="9876543210"
required>

<br><br>

🎯 Step 7 – Add Date of Birth

<label>Date of Birth:</label>

<br>

<input
type="date">

<br><br>

🎯 Step 8 – Add Gender Selection

<label>Gender:</label>

<br>

<input
type="radio"
name="gender">

Male

<br>

<input
type="radio"
name="gender">

Female

<br>

<input
type="radio"
name="gender">

Other

<br><br>

Output

○ Male

○ Female

○ Other

Only one can be selected.

🎯 Step 9 – Add Branch Dropdown

<label>Branch:</label>

<br>

<select>

<option>

Computer Science

</option>

<option>

Mechanical

</option>

<option>

Civil

</option>

<option>

Electrical

</option>

<option>

Electronics

</option>

</select>

<br><br>

Output

Dropdown menu appears.

🎯 Step 10 – Add Skills Section

<label>Skills:</label>

<br>

<input
type="checkbox">

HTML

<br>

<input
type="checkbox">

CSS

<br>

<input
type="checkbox">

JavaScript

<br>

<input
type="checkbox">

Python

<br><br>

Output

☐ HTML

☐ CSS

☐ JavaScript

☐ Python

Multiple skills can be selected.

🎯 Step 11 – Add Address Field

<label>Address:</label>

<br>

<textarea
rows="5"
cols="30"
placeholder="Enter Address">

</textarea>

<br><br>

🎯 Step 12 – Add Submit Button

<input
type="submit"
value="Register">

Output

[ Register ]

🎯 Step 13 – Add Reset Button

<input
type="reset"
value="Clear Form">

Output

[ Clear Form ]

Clears all entered data.

💻 Complete Registration Form Program

<!DOCTYPE html>

<html>

<head>

<title>Student Registration Form</title>

</head>

<body>

<h1>Student Registration Form</h1>

<form>

<label>Student Name:</label>

<br>

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

<br><br>

<label>Email:</label>

<br>

<input
type="email"
placeholder="Enter Email"
required>

<br><br>

<label>Password:</label>

<br>

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

<br><br>

<label>Mobile Number:</label>

<br>

<input
type="tel"
pattern="[0-9]{10}"
placeholder="9876543210"
required>

<br><br>

<label>Date of Birth:</label>

<br>

<input
type="date">

<br><br>

<label>Gender:</label>

<br>

<input
type="radio"
name="gender"> Male

<br>

<input
type="radio"
name="gender"> Female

<br>

<input
type="radio"
name="gender"> Other

<br><br>

<label>Branch:</label>

<br>

<select>

<option>Computer Science</option>

<option>Mechanical</option>

<option>Civil</option>

<option>Electrical</option>

<option>Electronics</option>

</select>

<br><br>

<label>Skills:</label>

<br>

<input type="checkbox"> HTML

<br>

<input type="checkbox"> CSS

<br>

<input type="checkbox"> JavaScript

<br>

<input type="checkbox"> Python

<br><br>

<label>Address:</label>

<br>

<textarea
rows="5"
cols="30"
placeholder="Enter Address">

</textarea>

<br><br>

<input
type="submit"
value="Register">

<input
type="reset"
value="Clear Form">

</form>

</body>

</html>

🎯 Expected Output

Student Registration Form containing:

✅ Name

✅ Email

✅ Password

✅ Mobile Number

✅ Date of Birth

✅ Gender

✅ Branch

✅ Skills

✅ Address

✅ Register Button

✅ Clear Form Button

🌟 Real World Example

This form structure is used in:

College Admission Form

Student Registration Form

Course Enrollment Form

Training Registration Form

Internship Registration Form

⚠️ Common Beginner Mistakes

Mistake 1

Different Names for Radio Buttons

Wrong:

<input type="radio" name="a">

<input type="radio" name="b">

Correct:

<input type="radio" name="gender">

<input type="radio" name="gender">

Mistake 2

Using Text Instead of Email

Wrong:

<input type="text">

Correct:

<input type="email">

Mistake 3

Forgetting Required Fields

Wrong:

<input type="text">

Better:

<input type="text" required>

🌟 Best Practices

✅ Use proper labels.

✅ Use placeholders.

✅ Validate important fields.

✅ Keep form organized.

✅ Use correct input types.

✅ Use dropdowns for fixed options.

🏆 Mini Project – Institute Registration Form

Create a form containing:

✅ Student Name

✅ Father’s Name

✅ Email

✅ Mobile Number

✅ Branch

✅ Gender

✅ Skills

✅ Address

✅ Submit Button

📝 Practical Activity

Create your own:

Polytechnic Student Registration Form

Include:

Name
Email
Mobile
DOB
Branch
Skills
Address

Run in Chrome Browser.

Take a Screenshot.

📋 Assignment

Assignment 2.6

What is a Registration Form?
Which input type is used for passwords?
Why is the required attribute important?
Which tag creates a dropdown menu?
Which tag creates a textarea?
Create a complete registration form.
Add validation to Name and Email fields.

🧠 Quiz

Q1. Which input type hides characters?

A. text

B. password

C. email

D. date

✅ Answer: B

Q2. Which tag creates a dropdown menu?

A. option

B. menu

C. select

D. list

✅ Answer: C

Q3. Which tag creates a text area?

A. input

B. area

C. textarea

D. text

✅ Answer: C

Q4. Which button submits a form?

A. reset

B. clear

C. submit

D. send

✅ Answer: C

Q5. Which button clears a form?

A. delete

B. reset

C. submit

D. remove

✅ Answer: B

📌 Lesson Summary

✅ Registration forms collect user information.

✅ Forms combine multiple HTML form elements.

✅ Input fields, radio buttons, checkboxes, dropdowns, and textareas work together.

✅ Validation ensures accurate data entry.

✅ Registration forms are widely used in real-world applications.