Complete Web Designing Course for Beginners

MODULE 2 – Forms & User Input

🎓 Lesson 2.7 – Mini Project: College Admission Form

🏫 Building a Complete Real-World Admission Form Using HTML

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Create a Complete Admission Form

✅ Use All Form Elements Together

✅ Apply Form Validation

✅ Create Professional Form Layouts

✅ Build Real College Admission Forms

✅ Understand Real-World Form Design

📖 Introduction

Congratulations! 🎉

You have learned:

✅ Form Basics

✅ Input Types

✅ Radio Buttons

✅ Checkboxes

✅ Dropdown Menus

✅ Text Areas

✅ Form Validation

Now it’s time to build a complete project.

🌟 What is a College Admission Form?

A College Admission Form is used to collect information from students who want admission.

It collects:

Personal Details
Educational Details
Contact Information
Course Preferences

🎯 Information Required

Our Admission Form will collect:

✅ Student Name

✅ Father’s Name

✅ Mother’s Name

✅ Email Address

✅ Mobile Number

✅ Date of Birth

✅ Gender

✅ Category

✅ Course Selection

✅ Skills

✅ Address

🏗️ Admission Form Structure

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

COLLEGE ADMISSION FORM

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

Student Name

Father Name

Mother Name

Email

Mobile Number

Date of Birth

Gender

Category

Course Selection

Skills

Address

Submit Button

Reset Button

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

💻 Complete College Admission Form

<!DOCTYPE html>

<html>

<head>

<title>College Admission Form</title>

</head>

<body>

<h1>College Admission Form</h1>

<form>

<label>Student Name:</label>

<br>

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

<br><br>

<label>Father's Name:</label>

<br>

<input
type="text"
placeholder="Enter Father's Name"
required>

<br><br>

<label>Mother's Name:</label>

<br>

<input
type="text"
placeholder="Enter Mother's Name"
required>

<br><br>

<label>Email Address:</label>

<br>

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

<br><br>

<label>Mobile Number:</label>

<br>

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

<br><br>

<label>Date of Birth:</label>

<br>

<input
type="date"
required>

<br><br>

<label>Gender:</label>

<br>

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

Male

<br>

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

Female

<br>

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

Other

<br><br>

<label>Category:</label>

<br>

<select required>

<option value="">
Select Category
</option>

<option>General</option>

<option>OBC</option>

<option>SC</option>

<option>ST</option>

<option>EWS</option>

</select>

<br><br>

<label>Course Applied For:</label>

<br>

<select required>

<option value="">
Select Course
</option>

<option>Diploma CSE</option>

<option>Diploma Mechanical</option>

<option>Diploma Civil</option>

<option>Diploma Electrical</option>

<option>Diploma Electronics</option>

</select>

<br><br>

<label>Skills:</label>

<br>

<input type="checkbox">

Computer Basics

<br>

<input type="checkbox">

MS Office

<br>

<input type="checkbox">

Programming

<br>

<input type="checkbox">

Internet Knowledge

<br><br>

<label>Address:</label>

<br>

<textarea
rows="5"
cols="40"
placeholder="Enter Full Address">

</textarea>

<br><br>

<input
type="submit"
value="Submit Application">

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

</form>

</body>

</html>

🎯 Expected Output

College Admission Form

Student Name

Father’s Name

Mother’s Name

Mobile Number

Date of Birth

Gender

🌟 Adding Educational Details

You can improve the form by adding:

<label>10th Percentage:</label>

<br>

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

<br><br>

<label>School Name:</label>

<br>

<input
type="text">

<br><br>

🌟 Adding Upload Fields

Students can upload documents.

<label>Upload Photo:</label>

<br>

<input type="file">

<br><br>

<label>Upload Marksheet:</label>

<br>

<input type="file">

🎯 Complete Admission Process Flow

Student Opens Form

↓

Fills Details

↓

Selects Course

↓

Uploads Documents

↓

Clicks Submit

↓

Admission Data Stored

🏫 Real World Example

Forms similar to this are used by:

Polytechnic Colleges
Engineering Colleges
Universities
Coaching Institutes
Training Centers

🌟 Professional Improvements

Later using CSS we can add:

✅ Colors

✅ Borders

✅ Backgrounds

✅ Professional Layout

✅ Responsive Design

⚠️ Common Beginner Mistakes

Mistake 1

Not Using Required Fields

Wrong:

<input type="text">

Correct:

<input
type="text"
required>

Mistake 2

Using Text Instead of Email

Wrong:


<input type="text">

Correct:

<input type="email">

Mistake 3

Using 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">

🌟 Best Practices

✅ Use Labels

✅ Use Validation

✅ Use Dropdown Menus

✅ Use Text Areas

✅ Use Proper Input Types

✅ Organize Form Fields Properly

🏆 Final Mini Project Challenge

Create your own:

Polytechnic Admission Form

Include:

✅ Student Details

✅ Parent Details

✅ Contact Details

✅ Course Selection

✅ Educational Details

✅ Address

✅ Submit Button

📝 Practical Activity

Create a complete admission form for your Polytechnic College.

Add:

Student Name
Father Name
Mother Name
Email
Mobile
Gender
Category
Branch
Skills
Address

Run in Chrome Browser.

📋 Assignment

Assignment 2.7

What is a College Admission Form?
Why is validation important?
Which tag creates dropdown menus?
Which tag creates text areas?
Which input type uploads files?
Create a complete admission form.
Add educational details and document upload fields.

🧠 Quiz

Q1. Which input type uploads files?

A. text

B. upload

C. file

D. document

✅ Answer: C

Q2. Which tag creates dropdown menus?

A. <option>

B. <select>

C. <list>

D. <menu>

✅ Answer: B

Q3. Which tag creates multi-line text fields?

A. <input>

B. <text>

C. <textarea>

D. <area>

✅ Answer: C

Q4. Which attribute makes a field mandatory?

A. validate

B. required

C. check

D. verify

✅ Answer: B

Q5. Which input type validates email format?

A. text

B. mail

C. email

D. address

✅ Answer: C

📌 Module 2 Summary – Forms & User Input

You have successfully learned:

✅ Lesson 2.1 – Introduction to Forms

✅ Lesson 2.2 – Input Types

✅ Lesson 2.3 – Radio Buttons & Checkboxes

✅ Lesson 2.4 – Select Menu & Text Areas

✅ Lesson 2.5 – Form Validation Basics

✅ Lesson 2.6 – Building a Registration Form

✅ Lesson 2.7 – Mini Project: College Admission Form