Complete Web Designing Course for Beginners

Lesson 2.4 – Select Menu & Text Areas

📝 Creating Dropdown Menus and Multi-Line Input Fields in HTML Forms

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Select Menus

✅ Create Dropdown Lists

✅ Add Multiple Options

✅ Understand Text Areas

✅ Create Multi-Line Input Fields

✅ Build Professional Forms

✅ Create Admission and Feedback Forms

📖 Introduction

Imagine a College Admission Form.

For Branch Selection:

Computer Science

Mechanical

Civil

Electrical

Electronics

Should we create:

<input type="text">

❌ No

Student may enter incorrect values.

Instead we use:

📋 Dropdown Menu

Another Example:

Feedback Form

Write your Suggestions

Should we use:

<input type="text">

❌ No

Because feedback can be several lines long.

Instead we use:

📝 Text Area

🌟 What is a Select Menu?

A Select Menu creates a dropdown list.

It allows users to choose one option from many options.

Real Life Examples

Branch Selection

▼ Computer Science

Country Selection

▼ India

Blood Group Selection

▼ O+

🎯 Select Tag

Dropdown menus are created using:

<select>

Options are created using:

<option>

Basic Syntax

<select>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

</select>

Example

<label>Branch:</label>

<select>

<option>Computer Science</option>

<option>Mechanical</option>

<option>Civil</option>

<option>Electrical</option>

</select>

Output

Branch:

▼ Computer Science

When clicked:

Computer Science

Mechanical

Civil

Electrical

🌟 Value Attribute

Professional forms use values.

Example:

<option value="CSE">
Computer Science
</option>

Example

<select>

<option value="CSE">
Computer Science
</option>

<option value="ME">
Mechanical
</option>

<option value="CE">
Civil
</option>

</select>

Why Use Value?

When submitted:

CSE

is stored instead of the full text.

🎯 Selected Attribute

Sets a default option.

Example

<option selected>

Computer Science

</option>

Result

Computer Science appears automatically.

Example

<select>

<option selected>

Computer Science

</option>

<option>

Mechanical

</option>

<option>

Civil

</option>

</select>

🌟 Grouping Options

Large dropdowns can be grouped using:

<optgroup>

Example

<select>

<optgroup label="Engineering">

<option>CSE</option>

<option>Mechanical</option>

</optgroup>

<optgroup label="Management">

<option>BBA</option>

<option>MBA</option>

</optgroup>

</select>

Output

Engineering

CSE

Mechanical

Management

BBA

MBA

📝 What is a Text Area?

A Text Area allows users to enter:

Multiple Lines of Text

Real Life Examples

Feedback

Suggestions

Address

Description

Comments

Textarea Tag

Created using:

<textarea>

Basic Syntax

<textarea>

</textarea>

Example

<label>Address:</label>

<textarea>

</textarea>

Output

Large input box appears.

🎯 Rows Attribute

Controls height.

Example

<textarea rows="5">

</textarea>

Meaning

5 lines high.

🎯 Cols Attribute

Controls width.

Example

<textarea
rows="5"
cols="30">

</textarea>

Meaning

30 character width.

Example

<label>Address:</label>

<br>

<textarea
rows="5"
cols="30">

</textarea>

Output

┌─────────────────────┐
│                     │
│                     │
│                     │
│                     │
│                     │
└─────────────────────┘

🌟 Placeholder in Textarea

Example:

<textarea
placeholder="Enter your address">

</textarea>

Output

Enter your address

appears inside the box.

🌟 Complete Example

<!DOCTYPE html>

<html>

<head>

<title>Select and Textarea</title>

</head>

<body>

<h1>Student Form</h1>

<form>

<label>Branch:</label>

<br>

<select>

<option>

Computer Science

</option>

<option>

Mechanical

</option>

<option>

Civil

</option>

<option>

Electrical

</option>

</select>

<br><br>

<label>Address:</label>

<br>

<textarea
rows="5"
cols="30">

</textarea>

</form>

</body>

</html>

🎯 Expected Output

Branch

Dropdown Menu

Address

Large Text Area

🏫 Real World Example – College Admission Form

<form>

<label>Branch:</label>

<br>

<select>

<option>

Computer Science

</option>

<option>

Mechanical

</option>

<option>

Civil

</option>

</select>

<br><br>

<label>Address:</label>

<br>

<textarea
rows="4"
cols="30">

</textarea>

</form>

🌟 Real World Example – Feedback Form

<form>

<label>Your Feedback:</label>

<br>

<textarea
rows="6"
cols="40"
placeholder="Write your feedback here">

</textarea>

</form>

🎯 Combining Input, Radio, Checkbox, Select and Textarea

<form>

<label>Name:</label>

<input type="text">

<br><br>

<label>Gender:</label>

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

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

<br><br>

<label>Skills:</label>

<input type="checkbox"> HTML

<input type="checkbox"> CSS

<br><br>

<label>Branch:</label>

<select>

<option>CSE</option>

<option>Mechanical</option>

</select>

<br><br>

<label>Address:</label>

<textarea rows="4" cols="30"></textarea>

</form>

💻 Complete Practical Program

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

<br><br>

<label>Branch:</label>

<br>

<select>

<option>Computer Science</option>

<option>Mechanical</option>

<option>Civil</option>

<option>Electrical</option>

</select>

<br><br>

<label>Address:</label>

<br>

<textarea
rows="5"
cols="30">

</textarea>

</form>

</body>

</html>

⚠️ Common Beginner Mistakes

Mistake 1

Using Input Instead of Select

Wrong:

<input type="text">

for branch selection.

Correct:

<select>

<option>CSE</option>

</select>

Mistake 2

Using Input Instead of Textarea

Wrong:

<input type="text">

for feedback.

Correct:

<textarea>

</textarea>

Mistake 3

Forgetting Option Tags

Wrong:

<select>

CSE

Mechanical

</select>

Correct:

<select>

<option>CSE</option>

<option>Mechanical</option>

</select>

🌟 Best Practices

✅ Use Select for predefined choices.

✅ Use Textarea for long text.

✅ Use placeholders for guidance.

✅ Keep dropdown options organized.

✅ Use meaningful labels.

🏆 Mini Project – Student Feedback Form

Create:

Branch Selection

Dropdown Menu

Semester Selection

Dropdown Menu

Feedback

Text Area

Suggestions

Text Area

📝 Practical Activity

Create a form containing:

✅ Name

✅ Branch Dropdown

✅ Semester Dropdown

✅ Address Textarea

✅ Feedback Textarea

Run it in Chrome Browser.

📋 Assignment

Assignment 2.4

What is a Select Menu?
Which tag creates a dropdown list?
Which tag creates options?
What is a Text Area?
Which tag creates a text area?
What is the purpose of rows and cols?
Create a simple feedback form.

🧠 Quiz

Q1. Which tag creates a dropdown menu?

A. <option>

B. <select>

C. <input>

D. <list>

✅ Answer: B

Q2. Which tag creates dropdown options?

A. <item>

B. <choice>

C. <option>

D. <menu>

✅ Answer: C

Q3. Which tag creates a multi-line input field?

A. <input>

B. <text>

C. <textarea>

D. <area>

✅ Answer: C

Q4. Which attribute controls textarea height?

A. cols

B. height

C. rows

D. size

✅ Answer: C

Q5. Which attribute controls textarea width?

A. rows

B. cols

C. width

D. size

✅ Answer: B

📌 Lesson Summary

✅ <select> creates dropdown menus.

✅ <option> creates menu options.

✅ <textarea> creates multi-line input fields.

✅ Rows control height.

✅ Cols control width.

✅ Dropdowns are used for predefined choices.

✅ Textareas are used for addresses, feedback, and comments.