Wenn du ein Formular baust, nutzt du Frameworks oder Formular-Builder. Im Hintergrund arbeiten aber alle mit HTML-Formularen. Wer versteht, wie HTML-Formulare funktionieren, versteht alles andere. Du bist von keinem Tool und keinem Framework abhängig. Du kennst die Grundlagen.
Dieser Artikel behandelt das HTML-Formularelement, Eingabetypen, Labels, Validierung und wie Formulare tatsächlich abgesendet werden. Keine Frameworks. Keine Bibliotheken. Nur HTML und die Prinzipien, auf denen alles andere aufbaut.
Das HTML-Formularelement
Ein Formular ist ein HTML-Element, das Formularfelder umschliesst und ihre Daten irgendwohin sendet. Der Grundaufbau sieht so aus:
<form action="/submit" method="POST">
<input type="text" name="email">
<button type="submit">Send</button>
</form>
Drei Attribute sind wichtig. Das Attribut action sagt dem Formular, wohin es die Daten senden soll. „/submit“ bedeutet: per POST an den Endpunkt /submit auf deinem Server. Ist action leer, sendet das Formular an die aktuelle Seite. Das Attribut method bestimmt, wie die Daten übertragen werden. POST sendet die Daten im Anfragekörper (sicher, nicht in der URL sichtbar). GET hängt die Daten an die URL an (für sensible Daten unsicher, nützlich für Suchanfragen). Das Attribut enctype brauchst du nur für Datei-Uploads. Setze enctype="multipart/form-data", wenn dein Formular ein Dateifeld enthält.
Alles zwischen den Formular-Tags gehört zur Übermittlung. Klickt der Nutzer auf den Absende-Button, sammelt der Browser alle benannten Felder und sendet sie mit der angegebenen Methode an die action-URL.
Eingabetypen und was sie tun
text
<input type="text" name="first_name">
Ein einzeiliges Textfeld. Der Browser zeigt ein einfaches Textfeld. Keine Validierung. Jedes Zeichen ist erlaubt.
<input type="email" name="email">
Ein Feld für E-Mail-Adressen. Am Desktop sieht es aus wie ein Textfeld. Auf dem Smartphone zeigt der Browser eine E-Mail-Tastatur. Beim Absenden prüft der Browser, ob der Wert wie eine E-Mail-Adresse aussieht (ein @ enthält). Nur eine einfache Prüfung.
password
<input type="password" name="password">
Text, der beim Tippen als Punkte oder Sternchen verborgen wird. Der Wert wird trotzdem im Klartext übertragen, nutze bei Formularen mit Passwortfeldern also immer HTTPS.
number
<input type="number" name="age">
Am Desktop ein Textfeld, das nur Zahlen akzeptiert. Auf dem Smartphone zeigt der Browser eine Zifferntastatur. Der Browser verhindert nicht numerische Eingaben.
date
<input type="date" name="birth_date">
Eine Datumsauswahl. In unterstützten Browsern und auf unterstützten Geräten öffnet ein Klick auf das Feld einen Kalender. Der Wert hat das Format JJJJ-MM-TT.
checkbox
<input type="checkbox" name="agree" value="yes">
Ein Kästchen, das sich an- und ausschalten lässt. Ist es angehakt, wird der Wert des Felds beim Absenden mitgeschickt. Ist es nicht angehakt, wird das Feld gar nicht gesendet.
radio
<input type="radio" name="plan" value="starter"> Starter
<input type="radio" name="plan" value="pro"> Pro
Mehrere Radio-Buttons mit demselben Namen bilden eine Gruppe. Es kann immer nur einer ausgewählt sein. Der Wert des gewählten Buttons wird beim Absenden gesendet.
select (Dropdown)
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</select>
Ein Dropdown-Menü. Der Wert der gewählten Option wird beim Absenden gesendet.
textarea
<textarea name="message"></textarea>
Ein mehrzeiliges Textfeld. Nutzer können ganze Absätze schreiben. Der Wert enthält die Zeilenumbrüche.
file
<input type="file" name="resume">
Ein Button, der die Dateiauswahl des Geräts öffnet. Die gewählte Datei wird an den Server gesendet. Erfordert enctype="multipart/form-data" im Formularelement.
hidden
<input type="hidden" name="user_id" value="12345">
Ein Feld, das nicht angezeigt, aber beim Absenden mitgeschickt wird. Nützlich für Tracking-Daten, die enthalten sein sollen, die der Nutzer aber nicht ändern soll.
Labels und Barrierefreiheit
Kombiniere Eingabefelder immer mit Labels.
<label for="email">Email address</label>
<input type="email" id="email" name="email">
Das Attribut for im Label muss zur id des Eingabefelds passen. Machst du das richtig, gilt:
Screenreader lesen Label und Feld zusammen vor, ein Klick auf das Label setzt den Fokus ins Eingabefeld, und mobile Nutzer bekommen eine grössere Tippfläche.
Lass Labels nie weg. Musst du ein Label optisch verbergen, blende es per CSS aus, lass es aber im HTML stehen. Das nennt man ein „visuell verstecktes“ Label.
Zusammengehörige Felder gruppieren
Für zusammengehörige Felder nutzt du fieldset und legend.
<fieldset>
<legend>Shipping address</legend>
<input type="text" name="street">
<input type="text" name="city">
</fieldset>
Das Element legend kündigt die Gruppe für Screenreader an. Fieldsets helfen, Radio-Buttons und Checkboxen optisch und inhaltlich zu ordnen.
Formularübermittlung und HTTP-Methoden
Klickt der Nutzer auf den Absende-Button, sammelt der Browser alle benannten Felder, kodiert die Daten (standardmässig als application/x-www-form-urlencoded), sendet eine HTTP-Anfrage mit der gewählten Methode (POST oder GET) an die action-URL und wartet auf eine Antwort.
Der Server empfängt die Anfrage und kann die Daten verarbeiten. Die Daten kommen als Schlüssel-Wert-Paare an. Ist die Formularmethode POST und die action „/submit“, sieht die Anfrage so aus: POST /submit HTTP/1.1 mit dem Content-Type application/x-www-form-urlencoded, dann folgen die Daten als email=user@example.com&name=John.
Der Server liest diese Daten aus und antwortet. Ist die Antwort eine Seite, lädt der Browser sie. Ist die Antwort eine Weiterleitung, wechselt der Browser zur neuen URL.
Validierung im Browser
HTML hat eingebaute Validierungsattribute. Der Browser prüft sie, bevor er das Formular sendet.
required
<input type="text" name="email" required>
Das Feld muss einen Wert haben. Bleibt es leer, wird das Formular nicht gesendet und der Browser zeigt einen Fehler.
minlength und maxlength
<input type="password" name="password" minlength="8" maxlength="128">
Der Wert muss zwischen den angegebenen Zeichenanzahlen liegen.
min und max
<input type="number" name="age" min="18" max="120">
Bei Zahlenfeldern muss der Wert im angegebenen Bereich liegen.
pattern
<input type="text" name="zip_code" pattern="[0-9]{5}">
Ein regulärer Ausdruck, dem der Wert entsprechen muss. Eine fünfstellige Postleitzahl passt zu [0-9]{5}.
Die Validierung im Browser ist eine Hilfe für Nutzer. Sie verhindert, dass ungültige Daten gesendet werden und der Server einen Fehler meldet. Verlasse dich für die Sicherheit aber nie darauf. Prüfe immer auch auf dem Server.
Der Unterschied zwischen type="submit" und type="button"
<button type="submit">Send</button>
<button type="button">Save</button>
Ein Button mit type="submit" sendet das Formular beim Klick ab. Ein Button mit type="button" tut standardmässig nichts. Nutze type="button", wenn du JavaScript-Event-Handler anhängen willst.
Viele Entwickler nutzen <button> ohne type. Dann gilt standardmässig type="submit", was meist gewollt ist. Gib den Typ aber trotzdem an, um Überraschungen zu vermeiden.
Warum du HTML-Formulare verstehen solltest
Nutzt du moderne JavaScript-Frameworks, baust du auf HTML-Formularen auf. Frameworks verbergen die Details, die Prinzipien bleiben gleich. Ein Formular wird weiter an einen Endpunkt gesendet. Validierung muss weiter stattfinden. Der Server muss die Daten weiter verarbeiten.
Wenn bei der Formularverarbeitung etwas schiefgeht, hilft dir HTML-Wissen bei der Fehlersuche. Du weisst, woher die Daten kommen, wie sie kodiert werden und was der Server erhalten sollte. Das ist das Fundament.
Die meisten modernen Web-Apps nutzen die klassische Formularübermittlung nicht mehr. Sie fangen das Formular mit JavaScript ab, validieren es und senden die Daten per _blocked_ oder mit einer HTTP-Bibliothek. Aber wer zuerst den HTML-Weg kennt, versteht diese Muster besser.
Wie der Formular-Builder von WEMASY diese Prinzipien nutzt
Im Hintergrund erzeugt der Formular-Builder von WEMASY barrierefreie HTML-Formulare mit denselben Elementen. Labels sind mit Eingabefeldern verknüpft. Die Validierung läuft im Browser und auf dem Server. Formulardaten werden sicher übertragen. Exportierst oder passt du ein WEMASY-Formular an, arbeitest du mit HTML-Formularen, die auf diesen Grundlagen beruhen.
Auf der WEMASY-Preisseite findest du Details zu Formularfunktionen und Anpassungsoptionen.