EMZETT.
Login

Emzett Wiki

HTML + CSS: Formulare

Properties1
tagsprogrammiersprachen, html-css

4 Min. Lesezeit

Kurz: Formulare sammeln Eingaben von Besucherinnen und Besuchern: Anmeldung, Suche, Kontakt, Bestellung.

Teil des Kurses HTML + CSS

Kapitel 8 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

Formulare sammeln Eingaben von Besucherinnen und Besuchern: Anmeldung, Suche, Kontakt, Bestellung.

<form action="/senden" method="post">
  <p>
    <label for="name">Name</label><br>
    <input type="text" id="name" name="name" required>
  </p>
  <p>
    <label for="mail">E-Mail</label><br>
    <input type="email" id="mail" name="mail" required>
  </p>
  <p>
    <label for="nachricht">Nachricht</label><br>
    <textarea id="nachricht" name="nachricht" rows="4" cols="30"></textarea>
  </p>
  <button type="submit">Absenden</button>
</form>
  • <form> umschließt alles. action ist die Adresse, an die gesendet wird, method ist get (Daten in der Adresse, für Suchen) oder post (Daten im Anfragekörper, für alles Sensible).
  • <label> ist Pflicht für jedes Feld. Über for und id gehört er zum Feld; ein Klick auf den Text fokussiert das Feld, und Screenreader lesen ihn vor.
  • name bestimmt den Namen, unter dem der Wert an den Server geht. Felder ohne name werden nicht gesendet.

Eingabetypen

<form>
  <p><label>Text <input type="text" placeholder="Platzhalter"></label></p>
  <p><label>Passwort <input type="password"></label></p>
  <p><label>E-Mail <input type="email"></label></p>
  <p><label>Zahl <input type="number" min="0" max="10" step="1" value="5"></label></p>
  <p><label>Bereich <input type="range" min="0" max="100"></label></p>
  <p><label>Datum <input type="date"></label></p>
  <p><label>Uhrzeit <input type="time"></label></p>
  <p><label>Farbe <input type="color" value="#ff8800"></label></p>
  <p><label>Suche <input type="search"></label></p>
  <p><label>Telefon <input type="tel"></label></p>
  <p><label>Webseite <input type="url"></label></p>
  <p><label>Datei <input type="file"></label></p>
</form>

Der richtige type bringt auf Handys die passende Tastatur, prüft Eingaben und liefert Bedienelemente wie Datumswähler.

Auswahlfelder

<form>
  <fieldset>
    <legend>Versand</legend>
    <label><input type="radio" name="versand" value="post" checked> Post</label>
    <label><input type="radio" name="versand" value="abholung"> Abholung</label>
  </fieldset>
 
  <fieldset>
    <legend>Extras</legend>
    <label><input type="checkbox" name="extras" value="geschenk"> Geschenkverpackung</label>
    <label><input type="checkbox" name="extras" value="eil" checked> Eilversand</label>
  </fieldset>
 
  <p>
    <label for="land">Land</label>
    <select id="land" name="land">
      <option value="">Bitte wählen</option>
      <optgroup label="DACH">
        <option value="de" selected>Deutschland</option>
        <option value="at">Österreich</option>
        <option value="ch">Schweiz</option>
      </optgroup>
    </select>
  </p>
 
  <p>
    <label for="stadt">Stadt (mit Vorschlägen)</label>
    <input id="stadt" list="staedte">
    <datalist id="staedte"><option value="Berlin"><option value="Bonn"><option value="Bremen"></datalist>
  </p>
</form>
  • Radio-Buttons mit gleichem name bilden eine Gruppe (nur eine Auswahl)
  • Checkboxen erlauben mehrere
  • <fieldset> mit <legend> fasst zusammengehörige Felder zusammen, wichtig für Screenreader

Validierung im Browser

<form>
  <p><label>Benutzername (3 bis 12 Buchstaben)
    <input name="user" required minlength="3" maxlength="12" pattern="[A-Za-zÄÖÜäöüß]+"
           title="Nur Buchstaben, 3 bis 12 Zeichen"></label></p>
  <p><label>Alter (18 bis 99)
    <input type="number" name="alter" min="18" max="99" required></label></p>
  <p><label><input type="checkbox" required> Ich akzeptiere die Bedingungen</label></p>
  <button>Prüfen und senden</button>
</form>
AttributBedeutung
requiredPflichtfeld
minlength, maxlengthTextlänge
min, max, stepZahlen und Datum
patternregulärer Ausdruck
placeholderHinweis im leeren Feld (kein Ersatz für label)
readonly, disablednur lesbar / deaktiviert (wird nicht gesendet)
autocompleteVorschläge: name, email, current-password, postal-code
autofocusFokus beim Laden

Achtung

Die Prüfung im Browser ist Komfort, kein Schutz. Der Server muss alles noch einmal prüfen.

Weitere Elemente

<form>
  <p><label for="g">Zusatzinfo</label> <textarea id="g" rows="3" cols="30" maxlength="200">Vorgabetext</textarea></p>
  <p><label>Fortschritt <progress value="70" max="100">70%</progress></label></p>
  <p><label>Akku <meter min="0" max="100" low="20" high="80" optimum="100" value="45">45</meter></label></p>
  <p>
    <button type="submit">Senden</button>
    <button type="reset">Zurücksetzen</button>
    <button type="button" onclick="alert('Hallo!')">Nur klicken</button>
  </p>
</form>

Der type eines Buttons: submit (senden, Standard in Formularen), reset, button (tut nichts, nur für JavaScript).

Formulare zugänglich machen

  • Jedes Feld hat ein sichtbares <label>
  • Pflichtfelder sind im Text gekennzeichnet (nicht nur mit Sternchen oder Farbe)
  • Fehlermeldungen stehen als Text neben dem Feld und werden per aria-describedby verknüpft
  • Die Tab-Reihenfolge entspricht der Lesereihenfolge
  • Genug Abstand und Größe für Touch (mindestens 44 × 44 Pixel)
<p>
  <label for="plz">Postleitzahl</label>
  <input id="plz" inputmode="numeric" pattern="[0-9]{5}" aria-describedby="plz-hilfe" required>
  <small id="plz-hilfe">Fünf Ziffern, zum Beispiel 50667</small>
</p>

Merke

  • <form action method> mit Feldern, jedes mit <label for> und name
  • Passende types (email, number, date, …) helfen bei Tastatur und Prüfung
  • Radio-Gruppen über gleichen name; fieldset/legend für Gruppen
  • required, pattern, min/max prüfen im Browser; der Server prüft trotzdem
  • placeholder ersetzt kein label

Übungsaufgabe

Baue ein Anmeldeformular mit Name, E-Mail, Passwort, Land (Auswahl), Newsletter (Checkbox) und Absenden-Button, mit sinnvoller Validierung.

Quiz zur Selbstkontrolle

Weiter im Kurs

Zurück: Tabellen

Weiter: Semantisches HTML und Seitenaufbau

Alle Kapitel: HTML + CSS im Überblick

Graphansicht

Backlinks