Textareas & Dropdowns
Overview
The standard `<input type="text">` is great for short things like a first name or an email. But what if you want the user to write a huge paragraph, like a product review or a message to customer support? You need a multi-line text box: the `<textarea>`.
Similarly, what if you want the user to choose their Country from a list of 195 countries? Writing 195 radio buttons would take up the whole screen! Instead, you use a Dropdown menu: the `<select>` tag.
Syntax
Unlike the `<input>` tag which is a void element, `<textarea>` is a container element! It MUST have a closing tag `</textarea>`. Any text you put between the opening and closing tags will become the default text inside the box.
<!-- rows controls the height, cols controls the width -->
<label for="feedback">Your Feedback:</label>
<textarea id="feedback" name="feedback" rows="5" cols="30">
This is the default text inside the box.
</textarea>To create a dropdown menu, you wrap a `<select>` tag around multiple `<option>` tags. The `value` attribute on the option is what actually gets sent to the server, while the text inside the tag is what the user sees.
<label for="country">Choose your country:</label>
<select id="country" name="country">
<!-- The user sees 'India', but the server receives 'IN' -->
<option value="IN">India</option>
<option value="US">United States</option>
<option value="UK">United Kingdom</option>
</select>Common Pitfalls
- If you leave spaces or line breaks between <textarea> and </textarea> in your code, those spaces will literally show up inside the text box on the screen! Write them tightly together if you want it empty.
- Interview tip: You can add the 'multiple' attribute to a <select> tag to allow users to select multiple options by holding down Ctrl/Cmd.
Real-World Example
A contact form using both a dropdown for subject and a textarea for the message:
<form action="/contact" method="POST">
<label for="subject">How can we help?</label>
<select id="subject" name="subject" required>
<!-- An empty value acts as a placeholder -->
<option value="" disabled selected>-- Select an option --</option>
<option value="sales">Sales Inquiry</option>
<option value="support">Technical Support</option>
<option value="billing">Billing Question</option>
</select>
<label for="message">Your Message:</label>
<!-- Notice there is NO space between the textarea tags to keep it empty -->
<textarea id="message" name="message" rows="10" required></textarea>
<button type="submit">Send Message</button>
</form>