Formulare: Eingaben der Nutzer

Bis zu dieser Lektion war deine Webseite eine Einbahnstraße: Du schreibst, die Besucher lesen. Formulare drehen die Richtung um – plötzlich können Menschen dir etwas mitteilen: eine Suchanfrage, eine Anmeldung zum Sommerfest, eine Nachricht über das Kontaktformular. Praktisch jede Interaktion im Web, vom Login bis zur Bestellung, beginnt mit einem HTML-Formular. In dieser Lektion lernst du alle Bausteine kennen – und die eine Regel, die gute Formulare von frustrierenden unterscheidet.

Alle Eingabefelder, die zusammengehören, wohnen in einem gemeinsamen <form>-Element. Es ist der Briefumschlag für die Daten deiner Nutzer – und wie bei einem Briefumschlag musst du zwei Fragen beantworten: Wohin soll er geschickt werden, und wie?

• action beantwortet das Wohin: die Adresse, an die die Daten beim Absenden geschickt werden – meist ein Programm auf einem Server.
• method beantwortet das Wie: get hängt die Daten sichtbar an die Adresse an (gut für Suchfelder), post schickt sie unsichtbar im Hintergrund mit (richtig für alles Persönliche wie Passwörter oder Nachrichten).

Mehr musst du dir an dieser Stelle nicht merken: action = wohin, method = wie. Die Details werden erst wichtig, wenn du später mit einem Server arbeitest – fürs Üben darfst du beide Attribute sogar weglassen.

Ein einzelnes Eingabefeld erzeugst du mit <input> – einem leeren Element ohne schließendes Tag, wie du es von <img> kennst. Aber ein Feld allein ist wertlos: Niemand weiß, was hineingehört. Deshalb bekommt jedes Feld eine Beschriftung mit <label>. Und jetzt kommt die wichtigste Regel dieser Lektion: Label und Feld werden technisch miteinander verbunden – das for-Attribut des Labels enthält exakt die id des Feldes.

Warum dieser Aufwand, wo der Text doch ohnehin daneben steht? Aus zwei handfesten Gründen:

• Größere Klickfläche: Ein verbundenes Label ist klickbar – ein Klick auf den Text setzt den Cursor ins Feld oder hakt die Checkbox ab. Gerade auf dem Smartphone, wo eine Checkbox winzig ist, macht das den Unterschied zwischen Treffer und Fehlversuch.
• Screenreader: Springt eine blinde Nutzerin mit der Tab-Taste in das Feld, liest der Screenreader die verbundene Beschriftung vor: „Deine E-Mail-Adresse, Eingabefeld“. Ohne Verbindung hört sie nur „Eingabefeld“ – und muss raten, was hineingehört.

Neben der id trägt jedes Feld noch ein zweites Attribut: name. Die beiden werden gern verwechselt, haben aber völlig verschiedene Jobs. Die id verbindet das Feld mit seinem Label und muss auf der ganzen Seite einzigartig sein. Der name ist das Etikett, unter dem der eingegebene Wert beim Absenden verschickt wird – ein Feld ohne name wird schlicht nicht mitgesendet. In der Praxis gibst du fast immer beides an, oft mit demselben Wert.

Das type-Attribut bestimmt, was für ein Feld der Browser baut. Für den Anfang reichen dir sieben Typen – und es lohnt sich, immer den treffendsten zu wählen, denn der Browser schenkt dir dafür einiges: Auf dem Smartphone erscheint bei type="email" automatisch eine Tastatur mit @-Zeichen, bei type="number" ein Ziffernblock, und bei type="date" öffnet sich ein fertiger Kalender, den du nie selbst programmieren müsstest.

Probier die Typen direkt aus – besonders auf dem Smartphone lohnt der Test: Tippe in die Felder und beobachte, wie sich die Tastatur je nach Typ verändert. Ändere testweise type="text" in type="password" und sieh zu, was mit deiner Eingabe passiert.

Nicht jede Eingabe ist Freitext. Oft sollen Nutzer aus vorgegebenen Möglichkeiten wählen – und HTML bietet dafür drei Werkzeuge mit klar getrennten Aufgaben:

• Checkbox (type="checkbox"): eine unabhängige Ja/Nein-Frage. Mehrere Checkboxen dürfen gleichzeitig angehakt sein.
• Radiobuttons (type="radio"): genau eine Wahl aus mehreren Optionen – benannt nach den Stationstasten alter Radios, bei denen immer nur eine Taste gedrückt sein konnte.
• <select>: ein Aufklappmenü. Die richtige Wahl, wenn die Liste lang ist – niemand möchte dreißig Radiobuttons für eine Länderauswahl sehen.

Bei Radiobuttons steckt die entscheidende Technik im name-Attribut: Alle Buttons mit demselben name bilden eine Gruppe, und innerhalb einer Gruppe kann immer nur einer ausgewählt sein. Vergisst du den gemeinsamen Namen, lassen sich plötzlich alle Optionen gleichzeitig anwählen – einer der häufigsten Anfängerfehler bei Formularen. Ihre eigene, einzigartige id samt Label behält trotzdem jede einzelne Option.

Ein Aufklappmenü baust du aus zwei Elementen: <select> ist der Rahmen (und bekommt id und name), jede Wahlmöglichkeit ist ein <option>-Element darin. Auch das <select> braucht selbstverständlich sein Label – die Regel kennt keine Ausnahme.

Für längere Texte – eine Nachricht, eine Bewertung, ein Kommentar – ist das einzeilige <input> zu klein. Hier kommt <textarea> ins Spiel: ein mehrzeiliges Eingabefeld, das im Gegensatz zu <input> ein schließendes Tag besitzt. Mit dem Attribut rows gibst du die sichtbare Höhe in Zeilen vor; tippen können deine Nutzer trotzdem so viel sie wollen.

Abgeschickt wird das Formular mit einem <button>. Und hier lauert eine Falle: Ein Button in einem Formular ist automatisch ein Absende-Knopf, auch ganz ohne Attribut – der Standardwert ist type="submit". Willst du einen Knopf, der nicht absendet (etwa für eine spätere JavaScript-Spielerei), musst du das ausdrücklich sagen: type="button". Gewöhne dir deshalb an, den Typ immer explizit hinzuschreiben – dann liest jeder deinen Code ohne Rätselraten. Im Editor unten kommt alles zusammen: Radiogruppe, Checkboxen, Aufklappmenü, Textfeld und Absende-Knopf.

Zwei Attribute wirst du in fast jedem echten Formular antreffen. Das erste ist placeholder: ein blasser Beispieltext, der im leeren Feld steht und beim ersten Tastendruck verschwindet. Genau darin liegt seine Grenze – und ein weit verbreiteter Fehler: Viele Formulare sparen sich das Label und schreiben die Beschriftung in den Platzhalter. Das rächt sich dreifach:

• Sobald man tippt, ist die Beschriftung verschwunden – wer kurz abgelenkt war, weiß nicht mehr, was in das halb ausgefüllte Feld gehört.
• Der graue Text hat absichtlich wenig Kontrast und ist für viele Menschen schlecht lesbar.
• Screenreader behandeln den Platzhalter nicht zuverlässig als Beschriftung – das Feld bleibt für blinde Nutzer schlimmstenfalls ein Rätsel.

Die Regel ist deshalb einfach: placeholder ergänzt das Label, ersetzt es nie. Gut geeignet ist er für Formatbeispiele, etwa „z. B. 63811“ im Postleitzahl-Feld.

Das zweite Attribut ist required – dein erster Kontakt mit der eingebauten Validierung: Markierst du ein Feld damit als Pflichtfeld, weigert sich der Browser, das Formular leer abzuschicken, und zeigt eine Hinweisblase direkt am betreffenden Feld. Ganz ohne Programmierung. Verlassen darfst du dich darauf allein allerdings nicht: Diese Prüfung ist Komfort für die Nutzer, kein Schutz – ein Server muss alle ankommenden Daten trotzdem noch einmal selbst kontrollieren.

Dein Werkzeugkasten ist damit fast vollständig: Text, Links, Bilder, Listen, Tabellen und jetzt Formulare. In der nächsten Lektion „Seitenstruktur & semantische Elemente“ fügst du alles zu einem großen Ganzen zusammen und gibst deiner Seite ein professionelles Skelett.