Section 19: Select, Option, Optgroup, Textarea and Datalist

Learning Objectives

• Create dropdowns using select and option.
• Group options using optgroup.
• Collect longer text using textarea.
• Provide suggestions using datalist.
• Understand multiple and size attributes.

1. The select Element

Use select when users need to choose from a predefined list of options.

<label for="country">Country</label>
<select id="country" name="country" required>
  <option value="">Choose a country</option>
  <option value="in">India</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

The empty first option acts as a prompt. With required on a normal single-select control, the empty value prevents the user from satisfying the field by leaving the prompt selected.

2. Option Values

<select name="department">
  <option value="dev">Development</option>
  <option value="qa">Quality Assurance</option>
  <option value="hr">Human Resources</option>
</select>

The value attribute is what is normally submitted. When value is omitted, the option's text is generally used as its value.

3. Grouping with optgroup

<label for="course">Choose a course</label>
<select id="course" name="course">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="php">PHP</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

4. Multiple Selections

<label for="skills">Skills</label>
<select id="skills" name="skills[]" multiple size="4">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="laravel">Laravel</option>
  <option value="node">Node.js</option>
</select>

The multiple attribute allows more than one option to be selected. The name skills[] is a common server-side naming convention for a collection of values; the brackets are not required by HTML itself.

5. The textarea Element

Use textarea for longer text such as comments, addresses and messages.

<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" cols="40"
  maxlength="1000" placeholder="Write your message here"></textarea>

Unlike input, textarea has an opening and closing tag. Its initial text, if any, belongs between those tags, not in a value attribute.

6. The datalist Element

Datalist provides suggestions for an input. Unlike a select element, users can usually enter a value that is not in the suggestions.

<label for="framework">Framework</label>
<input id="framework" name="framework" list="framework-options">

<datalist id="framework-options">
  <option value="Laravel">
  <option value="React">
  <option value="Vue.js">
  <option value="Express">
</datalist>

7. Which Control Should You Use?

• select: when users should choose from a defined list.
• textarea: when users need to enter longer text.
• datalist: when suggestions are useful but custom input should remain possible.

8. Complete Example

<form action="/feedback" method="post">
  <label for="topic">Feedback Topic</label>
  <select id="topic" name="topic" required>
    <option value="">Choose a topic</option>
    <option value="course">Course Content</option>
    <option value="website">Website</option>
    <option value="support">Support</option>
  </select>

  <label for="feedback">Your Feedback</label>
  <textarea id="feedback" name="feedback" rows="5" required></textarea>

  <button type="submit">Send Feedback</button>
</form>

Common Mistakes

• Forgetting the name attribute.
• Using textarea with a value attribute instead of initial text between its tags.
• Expecting datalist to restrict users to the suggestions.
• Forgetting to label a select or textarea.
• Assuming that submitted option values are trustworthy without server validation.

Practice Exercises

1. Create a country dropdown with a placeholder option.
2. Group courses into frontend and backend categories.
3. Create a multiple-selection skills list.
4. Build a message textarea with a maximum length.
5. Create a datalist of programming languages.

Revision Quiz

1. Which element creates a dropdown?
2. Which element represents one choice inside a select?
3. Which element groups related options?
4. Which element is designed for longer text input?
5. Can users normally type a custom value into an input connected to datalist?
6. Which attribute allows multiple select options?

Answer Key and Explanations

1. select — It provides a list of choices.
2. option — It defines an individual choice.
3. optgroup — It organizes related options under a label.
4. textarea — It supports multi-line text.
5. Yes. Datalist suggestions do not normally restrict input to listed values.
6. multiple — It enables multiple selections.