Lomakkeet: select-, option- ja optgroup-elementit

Ikäsi on

Kuljen työmatkani
Voit valita useita pitämällä Ctrl-näppäintä pohjassa. Juuri tämän takia monivalintainen lista on käyttäjälle hankala.

Selain, jota käytät eniten

CSS

HTML

<p>
  <label for="ika">Ikäsi on</label><br />
  <select id="ika" name="ika">
    <option value="alle20">Alle 20 vuotta</option>
    <option value="20-30" selected="selected">20-30 vuotta</option>
    <option value="30-40">30-40 vuotta</option>
    <option value="40-50">40-50 vuotta</option>
    <option value="yli50">Yli 50 vuotta</option>
  </select>
</p>

<p>
  <label for="matka">Kuljen työmatkani</label><br />
  <span id="matka-ohje">Voit valita useita pitämällä Ctrl-näppäintä pohjassa.
  Juuri tämän takia monivalintainen lista on käyttäjälle hankala.</span><br />
  <select id="matka" name="matka" multiple="multiple" size="6"
          aria-describedby="matka-ohje">
    <option value="hauto">Henkilöautolla</option>
    <option value="bussi" selected="selected">Linja-autolla</option>
    <option value="juna">Junalla</option>
    <option value="pp">Polkupyörällä</option>
    <option value="mp">Moottoripyörällä</option>
    <option value="jalan">Kävellen</option>
  </select>
</p>

<p>
  <label for="selain">Selain, jota käytät eniten</label><br />
  <select id="selain" name="selain">
    <option value="">Valitse</option>
    <optgroup label="Firefox">
      <option value="firefox">Firefox</option>
      <option value="firefox-esr">Firefox ESR</option>
    </optgroup>
    <optgroup label="Chromium-pohjaiset">
      <option value="chrome">Chrome</option>
      <option value="edge">Edge</option>
      <option value="brave">Brave</option>
    </optgroup>
    <optgroup label="Muut">
      <option value="safari">Safari</option>
      <option value="muu">Jokin muu</option>
    </optgroup>
  </select>
</p>

CSS

HTML

Javascript

Konsoli