Forms and Tables

Select Options

One Value from a List

A compact form control starts as a select, gains options, and then exposes the selected option as its value.

Program

Select controls keep multiple choices in the document while the browser exposes one current value to the form.

select_options.html
Visuals: captured from real browser rendering
<label for="plan">Plan</label>
<select id="plan" name="plan">
  <option value="basic">Basic</option>
  <option value="team" selected>Team</option>
</select>

  1. Name the select control.

    A Plan label appears above an empty area.
    The label points to the future select id.

  2. Create the select control.

    A compact Plan select control appears.
    The select element owns the list of choices.

  3. Add the Basic option.

    The select can show Basic as an available option.
    An option supplies a submitted value and a visible label.

  4. Add Team and make it selected.

    The select shows Team as the chosen plan.
    The selected attribute chooses the initial form value.
option An option is one selectable value inside a select control.
selected The selected attribute marks the initial value before user interaction.