Formulare

Formulare sind die Stelle, an der eine Seite aufhört, nur zu zeigen, und anfängt, etwas entgegenzunehmen: Suche, Anmeldung, Kontakt, Bestellung. Sie bestehen aus wenigen Bausteinen, die immer gleich zusammenspielen.

01 / 04Die vier Bausteine

<form>
  <label for="name">Dein Name</label>
  <input type="text" id="name">

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

form ist die Klammer um alles, was zusammen abgeschickt wird.

input ist das Eingabefeld. Es ist ein Void-Element, hat also keinen Inhalt und keinen schließenden Tag. Welche Art von Feld daraus wird, entscheidet das type-Attribut, dazu gleich mehr in einer eigenen Lektion.

label ist die Beschriftung.

button löst das Absenden aus.

Probier das Beispiel aus: Klick auf die Wörter „Dein Name“, nicht ins Feld. Der Cursor springt trotzdem ins Feld. Das ist keine Nebensache, sondern der ganze Punkt des label.

02 / 04Die Verbindung über for und id

Diese Verbindung entsteht durch zwei zusammengehörige Attribute: Das input bekommt eine id, das label bekommt ein for mit genau demselben Wert. Das ist derselbe Mechanismus wie bei den Sprungmarken, nur ohne Raute.

Was du dadurch bekommst:

• Größere Klickfläche. Ein Klick auf die Beschriftung landet im Feld. Bei einer Checkbox von drei mal drei Millimetern ist das auf dem Handy der Unterschied zwischen benutzbar und ärgerlich.
• Screenreader. Springt der Nutzer ins Feld, liest die Software die Beschriftung vor. Ohne Verbindung hört er nur „Eingabefeld“ und muss raten.
• Formulare bleiben verständlich, auch wenn das Layout die Beschriftung mal über, mal neben das Feld setzt.

Es gibt eine zweite Schreibweise ohne for und id:

<form>
  <label>
    Dein Name
    <input type="text">
  </label>

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

Hier umschließt das label das Feld, und die Verbindung ergibt sich aus der Verschachtelung. Das funktioniert genauso und spart die id. In der Praxis ist die Variante mit for verbreiteter, weil sie beim Stylen mehr Freiheit lässt. Nimm die, die dir liegt, aber nimm eine von beiden.

03 / 04Was ohne label passiert

<form>
  <p>Dein Name</p>
  <input type="text">

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

Gemeint ist dasselbe, und in einem echten Projekt sähe es auch gleich aus. Aber der Klick auf die Wörter tut nichts, und ein Screenreader liest an dieser Stelle einen Absatz und danach ein namenloses Eingabefeld vor. Der Zusammenhang existiert nur im Kopf der sehenden Nutzer.

Das ist der häufigste Fehler in selbstgebauten Formularen und zugleich der am leichtesten zu vermeidende: Jedes Eingabefeld braucht ein label.

04 / 04Der Button

button hat ein type-Attribut mit drei Werten. submit schickt das Formular ab und ist die Voreinstellung, wenn du nichts hinschreibst. reset setzt alle Felder auf ihren Ausgangswert zurück, nicht auf leer: Was im Markup vorbelegt war, steht danach wieder da. Nutzer klicken den Knopf meistens nur versehentlich an. button tut von sich aus nichts und wartet auf JavaScript.

Schreib den Typ trotzdem hin. Ein button ohne type in einem Formular ist automatisch ein Absende-Knopf, und das überrascht spätestens dann, wenn jemand einen zweiten Knopf für etwas anderes einbaut.

Zum Ausprobieren: Tipp etwas ins Feld und klick dann auf „Absenden“. Die Seite baut sich neu auf, was du getippt hast, ist weg, und in der Adresszeile ändert sich nichts.

Das Abschicken selbst passiert also durchaus. Es geht nur nirgendwohin: Dem Formular fehlt die Angabe, an welche Adresse, und dem Feld fehlt der Name, unter dem sein Wert ankommen soll. Beides ist das Thema der nächsten Lektion.