Formulare: Grundlagen

Klick bei einem gut gebauten Formularfeld auf das Wort Email daneben, und der Cursor springt in das Feld. Dieses kleine Detail ist das Element label bei der Arbeit.

Was ein Formular tut

Suchfelder, Anmeldeseiten und Kassenseiten sind alles Formulare. Ein <form>-Element fasst die Bedienelemente zusammen, und wenn der Besucher es absendet, schickt der Browser den name jedes Bedienelements zusammen mit seinem Wert an die Adresse im Attribut action des Formulars. Das Attribut method sagt, wie: get setzt die Daten in die Adresse, was zu Suchen passt, die man als Lesezeichen speichern will. post schickt sie im Rumpf der Anfrage, was zu allem passt, das Daten verändert, etwa eine Bestellung. HTML baut das Formular, und ein Programm auf dem Server entscheidet, was mit den ankommenden Daten geschieht.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Jedes Bedienelement braucht ein Label

Das Element <label> benennt ein Bedienelement. Verbinde beide, indem du dem Eingabefeld eine id und dem Label ein passendes Attribut for gibst, oder indem du das Eingabefeld in das Label setzt. Die Verbindung bewirkt zweierlei. Screenreader lesen das Label vor, wenn das Feld den Fokus bekommt, sodass der Nutzer „Email, Text bearbeiten“ hört statt nur „Text bearbeiten“. Und ein Klick auf das Label setzt den Fokus ins Feld oder hakt das Kästchen an, was allen, besonders am Handy, eine größere Klickfläche gibt. Ein placeholder (grauer Hinweistext im Feld) ist kein Label: Er verschwindet, sobald du tippst, hat oft wenig Kontrast, und manche assistive Technik ignoriert ihn.

Eingabetypen

Das Attribut type von <input> verändert das Bedienelement. text ist das einzeilige Standardfeld. email, tel und url sehen ähnlich aus, zeigen auf Handys aber eine passende Tastatur, und der Browser prüft, ob eine E-Mail-Adresse die richtige Form hat. number nimmt Ziffern an und kann min und max haben. password verbirgt, was du tippst, date bietet einen Kalender, und checkbox und radio sind Kästchen zum Anklicken. Für längeren Text verwende <textarea>, für eine Auswahl aus einer Liste <select> mit <option>-Elementen darin.

Auswahlmöglichkeiten gruppieren

Optionsfelder (Radiobuttons), die zu einer Frage gehören, haben denselben name, und nur eines davon kann gleichzeitig gewählt sein. Umschließe die Gruppe mit <fieldset> und setz die Frage in <legend>. Ein Screenreader liest dann die Frage zusammen mit jeder Option vor: „Loaf size, Small, Optionsfeld, 1 von 2“. Jedes Optionsfeld bekommt trotzdem sein eigenes Label.

Schaltflächen und eingebaute Prüfungen

Ein <button> in einem Formular sendet es standardmäßig ab. type="submit" macht das deutlich, und type="button" erzeugt eine Schaltfläche, die nichts tut, bis JavaScript ihr eine Aufgabe gibt. Vor dem Absenden kann der Browser Felder für dich prüfen. required hält das Formular auf, wenn das Feld leer ist, type="email" lehnt Text ohne @ ab, und minlength, min und max setzen Grenzen. Diese Prüfungen helfen dem Besucher, Fehler früh zu korrigieren, aber sie laufen in seinem Browser und lassen sich umgehen. Der Server muss die Daten deshalb noch einmal prüfen. Das Attribut autocomplete mit Werten wie email oder name lässt den Browser gespeicherte Angaben eintragen. Das spart allen Tipparbeit und hilft besonders Menschen mit motorischen Einschränkungen oder Gedächtnisschwierigkeiten.