Back to subject
HTML5/Select and Textarea

Build a Contact Form

Practical lesson

Let's compare a select menu with a multi-line textarea.

- <select> creates a menu from which the user chooses an option. - Each choice goes inside an <option>. - Give options useful value attributes when the submitted value needs to differ from the visible text. - Use <optgroup> when a long list needs meaningful groups of choices. - <textarea> is for longer, multi-line text such as a message or description. - Unlike <input>, textarea has an opening and closing tag because its text content lives between them. - Give both controls clear labels. - Give both controls a name when their values should be included in form submission. - Use selected or the appropriate default behavior carefully when you want an option to start selected.

The practical difference is easy to remember: select chooses from prepared choices, while textarea lets the user write a longer free-form value.

Try it yourself
Code

Starter example

Code
<label for="country">Country</label>
<select id="country" name="country">
  <option value="pk">Pakistan</option>
  <option value="uk">United Kingdom</option>
  <option value="us">United States</option>
</select>

<label for="message">Message</label>
<textarea id="message" name="message" rows="5"></textarea>
Live preview