Hero

Textarea & Select Elements Learn how to collect multi-line text using textareas and create clean, space-saving dropdown menus using the select element. Learning Outcomes: Master the <textarea> for long-form text and <select>/<option> tags for dropdowns. Prerequisites: Understanding of HTML forms and basic input types. Reading Time: 4 min read Difficulty: Beginner

Introduction

While the <input> tag is fantastic, it has limitations. A standard type="text" input is strictly for a single line of text. What if you want a user to write a 500-word message? Furthermore, what if you want a user to choose their country from a list of 195 options? A giant list of 195 radio buttons would look terrible! This is where <textarea> and <select> come to the rescue.

Why This Matters

If you are building the "Hire Me" page on himubey.in, clients need a place to describe their project in detail (a textarea), and they might need a dropdown menu to select their estimated budget range (a select menu). These elements keep your forms compact and professional.

Core Concepts

1. The <textarea> Element

Unlike <input>, the <textarea> tag is a paired tag (it has an opening and closing tag). It allows users to enter multi-line text. You can control its default size using the rows and cols attributes.

2. The <select> and <option> Elements

The <select> element creates a dropdown list. However, it doesn't do anything on its own. You must place <option> elements inside it to define the actual choices the user can pick from.

Syntax

<!-- Multi-line text -->
<textarea name="message" rows="4" cols="50">
Default text goes between the tags, not in a value attribute!
</textarea>

<!-- Dropdown Menu -->
<select name="country">
  <option value="in">India</option>
  <option value="us">United States</option>
</select>

Real World Example

Let's build a freelance project inquiry form for Himanshu Dubey's portfolio.

<form action="/submit-inquiry" method="POST">
  <h2>Start a Project with Himubey</h2>
  
  <label for="budget">Select Project Budget:</label>
  <select id="budget" name="budget">
    <option value="small">Under ₹10,000</option>
    <option value="medium">₹10,000 - ₹50,000</option>
    <option value="large">₹50,000+</option>
  </select>
  
  <br><br>
  
  <label for="projectDetails">Describe your project requirements:</label>
  <br>
  <textarea id="projectDetails" name="projectDetails" rows="6" cols="40" placeholder="Hi Himanshu, I am looking to build..."></textarea>
  
  <br><br>
  <button type="submit">Send Proposal</button>
</form>

Best Practices

• Provide a Default Option: In a <select> menu, it is standard practice to make the first <option> a disabled placeholder like <option value="" disabled selected>Please choose an option...</option>.
• Value vs Text: In an <option> tag, the text between the tags is what the user sees, but the value attribute is what is actually sent to the server.

Common Mistakes

Mistake: Trying to use a value attribute on a <textarea>.

<!-- WRONG -->
<textarea value="Hello Himanshu"></textarea>

Correct Approach: The value of a textarea goes between the opening and closing tags.

<!-- CORRECT -->
<textarea>Hello Himanshu</textarea>

💡 Himubey Tip

By default, browsers allow users to drag the bottom-right corner of a <textarea> to resize it. If this breaks your beautiful CSS layout, you can disable resizing completely by applying the CSS rule resize: none; to the textarea!

Interview Questions

1. Why is <textarea> a paired tag whereas <input> is a self-closing tag?
2. What are the two essential tags required to build a functional dropdown menu?
3. How do you define the default visible height and width of a <textarea> in HTML?

Mini Challenge

Task: Build a feedback form.

1. Create a <select> dropdown asking the user to rate a course from 1 to 5.
2. Below that, create a <textarea> asking the user to write a detailed review of the course.

Summary

When single-line inputs aren't enough, <textarea> gives your users the space they need to express themselves. When you have too many options for radio buttons, the <select> dropdown keeps your UI clean and manageable. Mastering these two elements is essential for building robust web forms.

Next Lesson

Next Lesson: More on Forms