Select, Textarea, and Fieldset
1. Introduction
Beyond text inputs, HTML forms include dropdown menus, multi-line text areas, and logical grouping mechanisms. The <select> element creates dropdown and list-box controls, <textarea> accepts multi-line input, and <fieldset> with <legend> groups related controls together — both visually and semantically. Mastering these elements completes your form-building toolkit.
2. Concept
Comparing Multi-Value Input Options
| Element | Multi-Select? | Typical Use |
|---|---|---|
<select> |
With multiple |
Dropdown menus, list boxes |
<datalist> |
No (text suggestions) | Autocomplete suggestions for text input |
<textarea> |
N/A (freetext) | Comments, messages, code |
| Checkboxes | Yes (multiple checks) | Feature selections, permissions |
<select> without a multiple attribute only allows one option. With multiple and a size attribute, it becomes a list box where users hold Ctrl/Cmd to select several options.<select> that the user must actively choose: <option value="" disabled selected>-- Select --</option>. This prevents the first real option being submitted by default.cols and rows as the sole sizing method for <textarea>. Always define a CSS width and min-height as well — cols and rows use character measurements which differ between fonts.3. Basic Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Select and Textarea Demo</title>
</head>
<body>
<form action="/feedback" method="post">
<!-- Basic select dropdown -->
<label for="country">Country</label>
<select id="country" name="country" required>
<option value="" disabled selected>-- Select country --</option>
<optgroup label="Europe">
<option value="gb">United Kingdom</option>
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
<option value="ca">Canada</option>
</optgroup>
</select>
<!-- Multi-select list box -->
<label for="skills">Skills (hold Ctrl to select multiple)</label>
<select id="skills" name="skills" multiple size="5">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
<option value="node">Node.js</option>
</select>
<!-- Textarea -->
<label for="bio">Short Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Tell us about yourself (max 500 characters)"></textarea>
<!-- Datalist for autocomplete -->
<label for="framework">Favourite Framework</label>
<input list="frameworks" id="framework" name="framework">
<datalist id="frameworks">
<option value="React">
<option value="Vue">
<option value="Angular">
<option value="Svelte">
</datalist>
<button type="submit">Submit</button>
</form>
</body>
</html>
4. How It Works
Step 1 — optgroup for Organised Dropdowns
<optgroup label="Europe"> creates a non-selectable heading in the dropdown, grouping related options. This significantly improves usability in long dropdown lists (countries, time zones, fonts).
Step 2 — Disabled Placeholder Option
<option value="" disabled selected> is shown by default but cannot be selected again once the user chooses another option. Combined with required on the <select>, this forces an active choice.
Step 3 — Textarea Sizing
rows="5" sets the initial visible height. maxlength="500" caps the character count. Unlike <input>, <textarea> has an explicit closing tag and any pre-filled content goes between the tags (no value attribute).
Step 4 — datalist Autocomplete
<datalist id="frameworks"> is linked to an <input> via list="frameworks". As the user types, the browser suggests matching options, but they are not restricted to those options — any text is still valid.
5. Real-World Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Support Ticket</title>
</head>
<body>
<h1>Submit a Support Ticket</h1>
<form action="/support/new" method="post">
<fieldset>
<legend>Your Details</legend>
<label for="t-name">Name</label>
<input type="text" id="t-name" name="name" required autocomplete="name">
<label for="t-email">Email</label>
<input type="email" id="t-email" name="email" required autocomplete="email">
</fieldset>
<fieldset>
<legend>Issue Details</legend>
<label for="department">Department</label>
<select id="department" name="department" required>
<option value="" disabled selected>-- Select department --</option>
<optgroup label="Technical">
<option value="billing">Billing</option>
<option value="account">Account Access</option>
</optgroup>
<optgroup label="Product">
<option value="bug">Bug Report</option>
<option value="feature">Feature Request</option>
</optgroup>
</select>
<label for="priority">Priority</label>
<select id="priority" name="priority">
<option value="low">Low</option>
<option value="medium" selected>Medium</option>
<option value="high">High</option>
<option value="critical">Critical</option>
</select>
<label for="description">Describe the Issue</label>
<textarea
id="description"
name="description"
rows="6"
minlength="20"
maxlength="2000"
required
placeholder="Please describe the problem in detail..."
></textarea>
</fieldset>
<button type="submit">Submit Ticket</button>
</form>
</body>
</html>
6. Common Mistakes
❌ Textarea with value attribute instead of content between tags
<textarea value="Pre-filled text"></textarea>✓ Pre-filled content goes between textarea’s opening and closing tags
<textarea>Pre-filled text</textarea>❌ Select with no disabled placeholder — first option submitted silently by default
<select name="role" required>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>✓ Add a disabled, selected placeholder as the first option
<select name="role" required>
<option value="" disabled selected>-- Select role --</option>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>7. Try It Yourself
8. Quick Reference
| Element / Attribute | Purpose | Notes |
|---|---|---|
<select> |
Dropdown or list box | Add multiple + size for list box |
<option value> |
Selectable choice | selected pre-selects; disabled disables |
<optgroup label> |
Non-selectable group heading | Groups related options |
<textarea rows maxlength> |
Multi-line text input | Content between tags, not value attr |
<datalist> |
Autocomplete suggestions | Linked via input’s list attribute |
<fieldset> |
Groups related controls | Draws a border; semantic grouping |
<legend> |
Label for fieldset | First child of fieldset |