Nicht jedes Formularfeld ist zum Eintippen gedacht - oft soll der Besucher aus vorgegebenen Möglichkeiten auswählen. Dafür gibt es drei wichtige Werkzeuge.

checkbox: eine oder mehrere Optionen auswählen

Eine Checkbox (Kontrollkästchen) lässt sich unabhängig von anderen Checkboxen an- und abhaken - man kann also mehrere gleichzeitig auswählen:

<input type="checkbox" name="newsletter" id="newsletter">
<label for="newsletter">Ich möchte den Newsletter erhalten</label>

Hier taucht ein neues Element auf: <label> ("Beschriftung"). Das for-Attribut des Labels muss genau mit der id des zugehörigen Eingabefelds übereinstimmen. Der große Vorteil: Wenn diese Verbindung besteht, kann man auch auf den Text des Labels klicken, um die Checkbox an- oder abzuhaken - nicht nur auf das kleine Kästchen selbst. Das ist besonders auf dem Handy sehr hilfreich, wo kleine Kästchen schwer zu treffen sind.

radio: genau eine Option aus mehreren

Ein Radiobutton (benannt nach den alten Radios mit Wahlschaltern) erlaubt nur eine Auswahl aus mehreren Möglichkeiten. Damit der Browser weiß, welche Radiobuttons zusammengehören, müssen sie alle den gleichen name haben:

<input type="radio" name="position" id="stuermer" value="stuermer">
<label for="stuermer">Stürmer</label>

<input type="radio" name="position" id="verteidiger" value="verteidiger">
<label for="verteidiger">Verteidiger</label>

<input type="radio" name="position" id="torwart" value="torwart">
<label for="torwart">Torwart</label>

Probiere das im Browser aus: Wenn du eine Option anklickst, wird automatisch jede vorher ausgewählte Option in derselben Gruppe (also mit demselben name) wieder abgewählt.

select: eine Ausklappliste

<select> zeigt eine platzsparende Ausklappliste. Jede Option darin ist ein eigenes <option>-Element:

<label for="lieblingsverein">Mein Lieblingsverein:</label>
<select name="lieblingsverein" id="lieblingsverein">
  <option value="verein-a">Verein A</option>
  <option value="verein-b">Verein B</option>
  <option value="verein-c">Verein C</option>
</select>

Auch hier funktioniert <label for="..."> genauso wie bei Checkbox und Radiobutton.

value vs. sichtbarer Text: ein wichtiger Unterschied

Bei <option> (und auch bei Radiobuttons) gibt es einen wichtigen Unterschied: value="verein-a" ist der Wert, der beim Absenden tatsächlich übermittelt wird (technisch, meist ohne Leerzeichen/Umlaute), während der Text zwischen <option> und </option> ("Verein A") das ist, was der Besucher tatsächlich sieht. Die beiden können unterschiedlich sein, müssen es aber nicht.

Checkboxen für Finns Hobbys

Erweitere das Kontaktformular um eine kleine Umfrage:

<h2>Kleine Umfrage</h2>
<form>
  <p>
    <label for="lieblingsverein">Mein Lieblingsverein:</label><br>
    <select name="lieblingsverein" id="lieblingsverein">
      <option value="verein-a">Verein A</option>
      <option value="verein-b">Verein B</option>
    </select>
  </p>

  <p>
    <input type="checkbox" name="newsletter" id="newsletter">
    <label for="newsletter">Ich möchte den Newsletter erhalten</label>
  </p>
</form>