html mit Adi Prinz

Eine Checkbox erstellen

Eine Checkbox wird mit input type="checkbox" erstellt. Die Beschriftung sollte mit einem label-Element eindeutig mit dem Eingabefeld verbunden werden.

<input
  type="checkbox"
  id="newsletter"
  name="newsletter"
  value="ja">

<label for="newsletter">
  Newsletter abonnieren
</label>
    

Wird die Checkbox nicht ausgewählt, wird für dieses Feld normalerweise kein Name-Wert-Paar übertragen.

Der Wert einer Checkbox

Das value-Attribut bestimmt, welcher Wert beim Absenden übertragen wird. Ist kein value-Attribut vorhanden, verwenden Browser standardmäßig den Wert on.

<input
  type="checkbox"
  id="teilnahme"
  name="teilnahme"
  value="bestaetigt">

<label for="teilnahme">
  Teilnahme bestätigen
</label>
    

Bei ausgewählter Checkbox wird beispielsweise übertragen:

teilnahme=bestaetigt
    

Mehrere Checkboxen verwenden

Mehrere Checkboxen können unabhängig voneinander ausgewählt werden. Bei der späteren Verarbeitung mit PHP kann für zusammengehörige Werte derselbe Name mit eckigen Klammern verwendet werden.

<p>Welche Themen interessieren Sie?</p>

<input
  type="checkbox"
  id="thema-html"
  name="themen[]"
  value="html">

<label for="thema-html">HTML</label>

<input
  type="checkbox"
  id="thema-css"
  name="themen[]"
  value="css">

<label for="thema-css">CSS</label>

<input
  type="checkbox"
  id="thema-javascript"
  name="themen[]"
  value="javascript">

<label for="thema-javascript">JavaScript</label>
    

Eine Auswahl verpflichtend machen

Mit dem booleschen Attribut required kann eine einzelne Checkbox zum Pflichtfeld gemacht werden. Das wird häufig für notwendige Bestätigungen verwendet.

<input
  type="checkbox"
  id="bedingungen"
  name="bedingungen"
  value="akzeptiert"
  required>

<label for="bedingungen">
  Ich akzeptiere die Teilnahmebedingungen.
</label>
    

required bei einer Checkbox prüft nur diese eine Checkbox. Es bedeutet nicht automatisch, dass aus einer Gruppe von Checkboxen eine bestimmte Mindestanzahl ausgewählt werden muss.

Optionsfelder erstellen

Ein Optionsfeld wird mit input type="radio" erstellt. Alle Optionsfelder mit demselben name-Attribut bilden eine gemeinsame Gruppe. Innerhalb dieser Gruppe kann nur ein Wert ausgewählt werden.

<input
  type="radio"
  id="kontakt-email"
  name="kontaktart"
  value="email">

<label for="kontakt-email">E-Mail</label>

<input
  type="radio"
  id="kontakt-telefon"
  name="kontaktart"
  value="telefon">

<label for="kontakt-telefon">Telefon</label>
    

Für die Gruppierung ist das gemeinsame name-Attribut entscheidend. Die id-Werte müssen dagegen eindeutig sein, damit jedes Label mit dem richtigen Optionsfeld verbunden werden kann.

Eine Auswahl vorgeben

Mit dem booleschen Attribut checked kann eine Checkbox oder ein Optionsfeld beim Laden der Seite vorausgewählt werden.

<input
  type="radio"
  id="versand-standard"
  name="versand"
  value="standard"
  checked>

<label for="versand-standard">
  Standardversand
</label>
    

Bei Optionsfeldern einer Gruppe sollte höchstens ein Feld mit checked versehen werden.

Praxisbeispiel: Kursanmeldung

Bei der Kursauswahl ist nur eine Antwort möglich. Bei den zusätzlichen Unterlagen können dagegen keine, eine oder mehrere Möglichkeiten ausgewählt werden.

Eine Auswahlliste erstellen

Das name-Attribut gehört zum select-Element. Der Wert der ausgewählten option wird beim Absenden des Formulars übertragen.

<label for="land">Land:</label>

<select id="land" name="land">
  <option value="at">Österreich</option>
  <option value="de">Deutschland</option>
  <option value="ch">Schweiz</option>
</select>
    

Der sichtbare Text einer Option und ihr übertragener Wert können unterschiedlich sein. Bei der Auswahl „Österreich“ wird in diesem Beispiel land=at übertragen.

Zur Auswahl auffordern

Eine erste Option kann als Aufforderung verwendet werden. Mit value="" besitzt sie keinen gültigen Auswahlwert.

<label for="kurs">Kurs auswählen:</label>

<select id="kurs" name="kurs" required>
  <option value="" selected disabled>
    Bitte auswählen
  </option>

  <option value="html">HTML-Grundlagen</option>
  <option value="css">CSS-Grundlagen</option>
  <option value="javascript">JavaScript-Grundlagen</option>
</select>
    

Durch die Kombination aus value="", disabled und required muss eine andere Option ausgewählt werden. Das Attribut selected zeigt die Aufforderung beim Laden der Seite an.

Eine Option vorauswählen

Mit dem booleschen Attribut selected wird eine Option beim Laden der Seite vorausgewählt.

<select id="sprache" name="sprache">
  <option value="de" selected>Deutsch</option>
  <option value="en">Englisch</option>
  <option value="fr">Französisch</option>
</select>
    

Ohne ein selected-Attribut wird bei einer einfachen Auswahlliste normalerweise die erste Option angezeigt.

Optionen mit optgroup gruppieren

Umfangreiche Auswahllisten können mit optgroup in beschriftete Gruppen gegliedert werden. Die Gruppenüberschrift wird mit dem label-Attribut angegeben.

<label for="kursort">Kursort:</label>

<select id="kursort" name="kursort">
  <optgroup label="Österreich">
    <option value="wien">Wien</option>
    <option value="graz">Graz</option>
    <option value="linz">Linz</option>
  </optgroup>

  <optgroup label="Deutschland">
    <option value="muenchen">München</option>
    <option value="berlin">Berlin</option>
    <option value="hamburg">Hamburg</option>
  </optgroup>
</select>
    

Eine optgroup dient nur zur Gliederung. Die Gruppenüberschrift selbst kann nicht ausgewählt werden.

Optionen deaktivieren

Mit dem booleschen Attribut disabled kann eine einzelne Option oder eine vollständige Gruppe deaktiviert werden.

<select id="termin" name="termin">
  <option value="vormittag">Vormittag</option>
  <option value="nachmittag">Nachmittag</option>
  <option value="abend" disabled>
    Abend – ausgebucht
  </option>
</select>
    

Eine deaktivierte Option wird weiterhin angezeigt, kann aber nicht ausgewählt und nicht als Formularwert übertragen werden.

Mehrere Optionen auswählen

Das boolesche Attribut multiple erlaubt die Auswahl mehrerer Optionen. Mit size kann festgelegt werden, wie viele Zeilen gleichzeitig sichtbar sind.

<label for="kenntnisse">Kenntnisse:</label>

<select
  id="kenntnisse"
  name="kenntnisse[]"
  multiple
  size="4">

  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="php">PHP</option>
</select>
    

Mehrfachauswahllisten sind nicht auf allen Geräten gleich einfach zu bedienen. Für wenige Auswahlmöglichkeiten sind mehrere Checkboxen häufig verständlicher.

Praxisbeispiel: Kursbuchung

Beide Auswahllisten sind Pflichtfelder. Die deaktivierte Option informiert über den ausgebuchten Abendtermin, kann aber nicht ausgewählt werden.