Form - Eingabeelemente

label-Element

Das <label>-Element beschreibt, welches Eingabefeld gemeint ist. Mit dem Attribut for wird es mit einem bestimmten Eingabefeld (id) verknüpft.

<form>
  <label for="nachname">Nachname:</label>
</form>

Hinweis

Klickt man auf den Text im <label>, wird automatisch das zugehörige Eingabefeld aktiviert. Das verbessert die Benutzerfreundlichkeit und Barrierefreiheit.

input-Element

<input> ist eines der wichtigsten und vielseitigsten Elemente in einem Formular.
Es kann Textfelder, Auswahlfelder, Schaltflächen und vieles mehr darstellen.
Das Verhalten wird über das Attribut type festgelegt.

Ein <input>-Element ist selbstschließend (es hat kein schließendes Tag).

<input type="text" name="vorname" id="vorname" />

Input-Typen

Textfeld

<label for="vorname">Vorname:</label>
<input type="text" id="vorname" name="vorname" placeholder="Max" required />

Zahlenfeld

<label for="anzahl">Anzahl:</label>
<input type="number" id="anzahl" name="anzahl" min="1" max="10" />

Passwortfeld

<label for="passwort">Passwort:</label>
<input type="password" id="passwort" name="passwort" required />

Hinweis:
Das Passwort wird nur im Browser verdeckt angezeigt – nicht verschlüsselt übertragen.

E-Mail-Feld

<label for="email">E-Mail-Adresse:</label>
<input
  type="email"
  id="email"
  name="email"
  placeholder="name@example.com"
  required
/>

Der Browser überprüft automatisch, ob eine gültige E-Mail-Adresse eingegeben wurde.

Radio-Buttons

Nur eine Auswahl ist möglich. Alle Radio-Buttons einer Gruppe müssen den gleichen Wert für das name-Attribut haben.

Bemerkung

Das value-Attribut gibt den Wert an, der versendet wird. Es muss angegeben werden

<p>Lieblingsheld:</p>

<input type="radio" id="ironman" name="held" value="Ironman" />
<label for="ironman">Ironman</label>

<input type="radio" id="thor" name="held" value="Thor" />
<label for="thor">Thor</label>

<input type="radio" id="hulk" name="held" value="Hulk" />
<label for="hulk">Hulk</label>

Lieblingsheld:

Checkboxen

Hier können mehrere Optionen gewählt werden. Alle Check-Buttons einer Gruppe müssen den gleichen Wert für das name-Attribut haben.

Bemerkung

Das value-Attribut gibt den Wert an, der versendet wird. Es muss angegeben werden

<p>Lieblingshelden:</p>

<input type="checkbox" id="ironman" name="helden" value="Ironman" />
<label for="ironman">Ironman</label>

<input type="checkbox" id="hulk" name="helden" value="Hulk" />
<label for="hulk">Hulk</label>

<input type="checkbox" id="thor" name="helden" value="Thor" />
<label for="thor">Thor</label>

Lieblingshelden:

Submit-Button

Der Submit-Button versendet das Formular an die im method-Attribut angegebene Website.

Bemerkung

Der Wert für value erzeugt die Beschriftung des Buttons.

<input type="submit" value="Senden" />

Reset-Button

Der Reset-Button löscht alle Eingaben im Formluar.

Bemerkung

Der Wert für value erzeugt die Beschriftung des Buttons.

<input type="reset" value="Zurücksetzen" />

Hier ist eine kurze und verständliche Erklärung des <button>-Elements:

Button

Das <button>-Element ist ein interaktives HTML-Element, das es Benutzer ermöglicht, Aktionen auszulösen, z. B. ein Formular absenden oder ein Skript starten.

  • Unterstützt Attribute wie:

    • type="button" → normales Klick-Element

    • type="submit" → sendet ein Formular ab

    • type="reset" → setzt ein Formular zurück

<button type="button">Klick mich</button>
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>

<!-- Button, der durch JS aktiviert wird -->
<button>öffnen</button>

Datumsfeld

<label for="geburtstag">Geburtsdatum:</label>
<input type="date" id="geburtstag" name="geburtstag" />

Zeitfeld

<label for="uhrzeit">Uhrzeit:</label>
<input type="time" id="uhrzeit" name="uhrzeit" />

Farbwähler

<label for="farbe">Lieblingsfarbe:</label>
<input type="color" id="farbe" name="farbe" />

Bereich (Range)

<label for="bewertung">Bewertung (1–10):</label>
<input
  type="range"
  id="bewertung"
  name="bewertung"
  min="1"
  max="10"
  value="5"
/>

Datei-Upload

<label for="datei">Datei auswählen:</label>
<input type="file" id="datei" name="datei" />

select-Element

Mit <select> kann man aus einer Liste vordefinierter Optionen auswählen.

<label for="marvel">Lieblingsheld:</label>
<select id="marvel" name="marvel">
  <option value="ironman">Ironman</option>
  <option value="thor">Thor</option>
  <option value="hulk">Hulk</option>
</select>

Mit dem Attribut size kann man festlegen, wie viele Einträge sichtbar sind.

Mehrfachauswahl

Durch multiple können mehrere Einträge gewählt werden. Dazu muss die Strg-Taste gedrückt werden.

<label for="marvel">Lieblingshelden:</label>
<select id="marvel" name="marvel" multiple size="3">
  <option value="ironman">Ironman</option>
  <option value="thor">Thor</option>
  <option value="hulk">Hulk</option>
  <option value="black-widow">Black Widow</option>
</select>

textarea-Element

Das <textarea>-Element wird für mehrzeilige Texteingaben verwendet – z. B. bei Kommentaren oder Nachrichten.

<label for="nachricht">Nachricht:</label>
<textarea id="nachricht" name="nachricht" cols="40" rows="5"></textarea>

Die Größe lässt sich mit cols (Spaltenbreite) und rows (Zeilenhöhe) anpassen.

Gruppierung mit fieldset und legend

Mehrere Felder kann man mit <fieldset> zu einer logischen Gruppe zusammenfassen.
<legend> fügt eine Überschrift für die Gruppe hinzu.

<fieldset>
  <legend>Persönliche Daten</legend>

  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname" />

  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname" name="nachname" />
</fieldset>
Persönliche Daten