Dropdowns, Text Areas and Suggestions

A select makes a dropdown list of options, a textarea gives room for a longer answer, and a datalist suggests answers while still letting the visitor type their own.

Apprentice · HTML · Updated

After this lesson you can

  • Build a dropdown with select and option, giving each option a value
  • Add a text area for a longer answer and a datalist for typed suggestions
  • Choose the control that fits a question, such as radio buttons, checkboxes, a dropdown, a datalist, a text area or a typed input

Key takeaways

  • A select with option elements makes a dropdown. Each option's value is what the browser sends, and the text between its tags is what the visitor sees.
  • The first option is chosen until the visitor picks another, unless one has the selected attribute. An optgroup puts options under a heading.
  • Use radio buttons for a few choices the visitor should see at once, and a dropdown for a long list or a tight space.
  • A textarea is a box for a longer answer. It has a closing tag, and rows sets how many lines tall it starts.
  • A datalist suggests answers for an input whose list attribute matches the datalist's id, and the visitor can still type anything.

Choosing your state from a list of 50 on a checkout page, writing "the blue door, around the back" for a delivery driver, or starting to type a street and seeing it suggested: you've used all three of this lesson's controls, probably this week.

Slice of Heaven Pizza's order form needs them too: a crust to choose from a list, a box for notes to the driver, and a street box that suggests the streets in town. By the end of this lesson you'll know which control fits each question a form asks.

Dropdowns: select and option

A dropdown is a menu that stays closed until you need it: one line on the page that opens into a list. In HTML it's a <select>, and each choice inside it is an <option>:

<label for="crust">Crust</label>
<select id="crust" name="crust">
  <option value="hand_tossed">Hand-tossed</option>
  <option value="thin" selected>Thin and crispy</option>
  <option value="deep_dish">Chicago deep dish</option>
</select>
  • The name goes on the <select>, once for the whole list, and the label ties to the <select> too.
  • Each option has two kinds of words. The text between its tags is what the visitor sees. Its value is what the browser sends: pick Chicago deep dish and the form sends crust=deep_dish. An option with no value sends its text instead.
  • The first option is chosen until the visitor picks another, unless one has selected, like checked for radio buttons. Here, Thin and crispy shows first.

A <select> always has one of its options chosen. Many forms start with an option such as <option value="">Choose a crust</option>, which sends an empty answer (crust=) until the visitor picks a real one. Built-in Validation shows how to make sure they do.

Groups inside a list

A long list is easier to scan in parts. <optgroup> puts options under a heading, given in its label attribute:

<label for="crust">Crust</label>
<select id="crust" name="crust">
  <optgroup label="Classic">
    <option value="hand_tossed">Hand-tossed</option>
    <option value="thin">Thin and crispy</option>
  </optgroup>
  <optgroup label="Gluten-free">
    <option value="cauliflower">Cauliflower</option>
    <option value="rice_flour">Rice flour</option>
  </optgroup>
</select>

The headings show in the open list, and they can't be picked: only options can.

Radio buttons or a dropdown?

Both let a visitor pick exactly one answer. The difference is what they can see.

  • Radio buttons show every choice at once, with nothing to open. Use them for a few choices, about five or fewer, especially when people should compare them: three pizza sizes with their prices.
  • A dropdown hides its choices until it's opened. Use it for a long list that would crowd the page, or where people know what they're looking for: their state, a country, a month.

A <select> can take the multiple attribute to allow several picks, but on a computer that means holding Ctrl or Command while clicking, which few visitors know. For several picks, checkboxes are friendlier.

Try it. In a file named dropdowns.html, with the page skeleton and a <form> with no action, add the crust dropdown with its optgroups and a <button>Order</button>. Send it, and find crust= in the address bar. Then add selected to Cauliflower and reload the page.

Text areas: room for a longer answer

A text input is one line. For a few sentences, such as directions for the driver, use a <textarea>:

<label for="driver_notes">Notes for the driver</label>
<textarea id="driver_notes" name="driver_notes" rows="4"></textarea>
  • rows sets how many lines tall the box starts. The visitor can type more (the box scrolls), and in most browsers they can drag its corner to make it bigger.
  • It has a closing tag, unlike <input>. Leave it out, or write <textarea />, and the browser treats the rest of your page as the box's starting text.
  • The text between the tags is the starting text, sent as it is unless the visitor changes it. That's why the tags sit right next to each other: spaces between them would show up in the box.

Suggestions: datalist and the list attribute

Some questions have likely answers, and also answers you can't predict. Slice of Heaven delivers mostly to a few streets in town, but a new street can always appear. A <datalist> offers suggestions for an input as the visitor types, and still lets them type anything:

<label for="street">Street</label>
<input type="text" id="street" name="street" list="town_streets">
<datalist id="town_streets">
  <option value="Maple Avenue"></option>
  <option value="Main Street"></option>
  <option value="Riverside Drive"></option>
</datalist>

The connection is the input's list attribute, which names the datalist's id. Spell them differently and nothing breaks, but no suggestions appear. The datalist sends nothing of its own: the input's name and whatever is typed are what's sent.

Here's the difference from a dropdown: a <select> only takes its options, and a datalist only suggests them.

An order form's street box with "Ma" typed in it, and a list below it offering Maple Avenue and Main Street

Check yourself

2 questions to try on the lesson page.

So what

A form asks questions, and every question has a control that fits it best: one choice from a few, any number of choices, one from a long list, a suggestion, or a few sentences in the visitor's own words. Pick the right one, and the form feels like it was made for the person filling it in.

Key terms

Cheat sheets

Related