HTML select, option, optgroup, datalist and textarea

Besides <input>, forms use three more elements: <select> for choosing from a list, <datalist> for suggestions, and <textarea> for longer text.

Drop-down lists: select#

<form action="/register" method="post">
  <label for="course">Choose a course</label>
  <select id="course" name="course">
    <option value="">-- Please choose --</option>
    <option value="html">HTML</option>
    <option value="css" selected>CSS</option>
    <option value="js">JavaScript</option>
  </select>
  <button>Register</button>
</form>

• Each <option> is a choice. Its value is what is submitted; its text is what the user sees.
• selected chooses the starting option. Without it, the first option is selected.
• A first option with an empty value, like "Please choose", combined with required, forces the user to make a real choice (see Form Validation).

Grouping options#

<optgroup> adds a heading inside long lists:

<label for="city">City</label>
<select id="city" name="city">
  <optgroup label="Telangana">
    <option>Hyderabad</option>
    <option>Warangal</option>
  </optgroup>
  <optgroup label="Karnataka">
    <option>Bengaluru</option>
    <option>Mysuru</option>
  </optgroup>
</select>

When an <option> has no value attribute, its text is submitted.

Selecting several options#

multiple lets users choose more than one option (with Ctrl or Cmd), and size sets how many rows are visible:

<label for="skills">Skills</label><br>
<select id="skills" name="skills" multiple size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>SQL</option>
</select>

Multiple-select lists are awkward to use on many devices; a group of checkboxes is often clearer.

Suggestions: datalist#

<datalist> offers suggestions for a text field while still letting the user type anything. Connect it with the input's list attribute:

<label for="browser">Your browser</label>
<input id="browser" name="browser" list="browsers">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Edge">
  <option value="Firefox">
  <option value="Safari">
</datalist>

Click the field or start typing to see matching suggestions.

Multi-line text: textarea#

<textarea> is for longer text such as messages and comments. Unlike <input>, it has a closing tag, and its starting text goes between the tags:

<label for="message">Your message</label><br>
<textarea id="message" name="message" rows="5" cols="40" maxlength="500"
  placeholder="Tell us how we can help"></textarea>

• rows and cols set the visible size in lines and characters. CSS width and height are more common in real sites.
• Users can usually resize a textarea by dragging its corner; CSS resize controls this.
• Whitespace between the tags is part of the value, so write <textarea></textarea> with nothing in between unless you want starting text.

Practice#

<form action="/feedback" method="post">
  <p>
    <label for="rating">Rating</label>
    <select id="rating" name="rating" required>
      <option value="">Choose a rating</option>
      <option value="5">Excellent</option>
      <option value="4">Good</option>
      <option value="3">Average</option>
      <option value="2">Poor</option>
    </select>
  </p>
  <p>
    <label for="comments">Comments</label><br>
    <textarea id="comments" name="comments" rows="4" cols="40"></textarea>
  </p>
  <button type="submit">Send feedback</button>
</form>

Key takeaway#