Dropdowns, text areas and buttons

Three more kinds of control

You can build many forms from input alone, but three other elements cover common needs: select for choosing from a list, textarea for writing more than one line, and button for actions.

select: a dropdown list

<form>
  <p>
    <label for="country">Country</label><br>
    <select id="country" name="country">
      <option value="">Choose a country</option>
      <option value="in" selected>India</option>
      <option value="np">Nepal</option>
      <option value="lk">Sri Lanka</option>
    </select>
  </p>
</form>

• Each choice is an option. The value is what is sent; the text is what the visitor sees. They can differ, which is useful for codes.
• selected pre-selects an option.
• A first option with an empty value works as a prompt ("Choose…"). Combined with required, it forces an actual choice.

Groups and multiple choice

<form>
  <label for="food">Pick snacks (hold Ctrl or Cmd for several)</label><br>
  <select id="food" name="food" multiple size="5">
    <optgroup label="Savoury">
      <option>Samosa</option>
      <option>Pakora</option>
    </optgroup>
    <optgroup label="Sweet">
      <option>Jalebi</option>
      <option>Ladoo</option>
    </optgroup>
  </select>
</form>

optgroup adds headings inside the list. multiple lets people choose several; size sets how many rows are visible. A multiple select is awkward on many devices, so for a few options, checkboxes are friendlier.

When not to use a select

For two to five choices that fit on screen, radio buttons show all options at once and take one click. Use a select when there are many options (countries, states) or little space.

datalist: suggestions, not limits

<form>
  <label for="city">City</label>
  <input list="cities" id="city" name="city">
  <datalist id="cities">
    <option value="Delhi">
    <option value="Mumbai">
    <option value="Chennai">
  </datalist>
</form>

The visitor can pick a suggestion or type something else. It is a gentle way to help without restricting them.

textarea: longer text

<form>
  <label for="story">Tell us your story</label><br>
  <textarea id="story" name="story" rows="5" cols="40" maxlength="300" placeholder="Write here…"></textarea>
</form>

• rows and cols set the visible size; CSS is better for real designs.
• maxlength limits the length. Tell users the limit in text.
• Unlike input, textarea has a closing tag, and whatever is between the tags becomes the starting text. Be careful with whitespace there: the browser keeps it.
• Line breaks typed by the visitor are sent as part of the value.

button: actions

<form action="/subscribe" method="post">
  <input type="email" name="email" aria-label="Email address">
  <button type="submit">Subscribe</button>
  <button type="reset">Clear</button>
  <button type="button" id="help">Help</button>
</form>

A button has three types:

• submit: sends the form. This is the default inside a form, which is why a stray button with no type can submit it by accident.
• reset: restores every field to its starting value. Rarely a good idea, since people click it by mistake.
• button: does nothing on its own; used with JavaScript.

Prefer button over input type="submit": it can contain text, icons and formatting. Its text should say what happens: "Place order" is better than "Submit".

Disabled and read-only fields

• disabled greys out the control, skips it with Tab and does not send its value.
• readonly (on text fields) shows a value that cannot be changed but is still sent.

Do not use disabled fields to show information users need to read; they have poor contrast and are skipped by keyboards.

Common mistakes

• An option with no value, so the text is sent instead; this is fine only if you mean it.
• A select for yes or no, where a checkbox or two radio buttons is simpler.
• A button with no type inside a form that you did not mean to submit.
• Forgetting the label on select and textarea.
• Putting spaces inside textarea tags and being surprised that the box starts with indentation.

Exercise

Build a feedback form with a required rating dropdown (5 to 1, with a "Choose a rating" prompt), a comments textarea limited to 500 characters, and a "Send feedback" submit button.

<form action="/feedback" method="post">
  <p>
    <label for="rating">Rating</label><br>
    <select id="rating" name="rating" required>
      <option value="">Choose a rating</option>
      <option value="5">5 – Excellent</option>
      <option value="4">4 – Good</option>
      <option value="3">3 – Fair</option>
      <option value="2">2 – Poor</option>
      <option value="1">1 – Very poor</option>
    </select>
  </p>
  <p>
    <label for="comments">Comments (up to 500 characters)</label><br>
    <textarea id="comments" name="comments" rows="5" cols="40" maxlength="500"></textarea>
  </p>
  <button type="submit">Send feedback</button>
</form>