Startseite >Web >HTML-Referenz – Elemente und Attribute >form – Formular

form – Formular

<form action="/url/" method="post">…</form>

Ein Formular: eine Gruppe von Feldern, deren Werte der Browser beim Absenden an die URL in action schickt. Abgesendet wird es mit einer Schaltfläche, der Enter-Taste in einem Textfeld oder per Skript. Vor dem Absenden prüft der Browser die Regeln der Felder (required, type="email", min …).

  • Standarddarstellung: display: block
  • End-Tag: erforderlich
  • Inhalt: Fließinhalt, aber ohne ein weiteres form
  • Wo es stehen darf: überall, wo Fließinhalt erlaubt ist
  • DOM-Schnittstelle: HTMLFormElement

Attribute

  • action – die URL, an die die Daten gehen (ohne sie die URL der Seite).
  • method – get (Standard, Daten in der URL – für Suche und Filter), post (Daten im Körper der Anfrage – für Bestellungen, Anmeldung, alles, was etwas ändert), dialog (schließt ein dialog).
  • enctype – die Kodierung der Daten bei post: multipart/form-data ist für das Hochladen von Dateien nötig.
  • novalidate – schaltet die Prüfung der Felder durch den Browser ab.
  • autocomplete – off schaltet das automatische Ausfüllen für das ganze Formular ab.
  • target, name, accept-charset, rel.

Beispiele

Ein Bestellformular:

<form action="/order/" method="post">
  <label for="order-name">Name</label>
  <input type="text" id="order-name" name="name" autocomplete="name" required>
  <label for="order-email">E-Mail</label>
  <input type="email" id="order-email" name="email" autocomplete="email" required>
  <label for="order-count">Anzahl Brote</label>
  <input type="number" id="order-count" name="count" min="1" max="20" value="1">
  <button type="submit">Bestellen</button>
</form>

Eine Datei hochladen:

<form action="/upload/" method="post" enctype="multipart/form-data">
  <label for="photo">Foto des Brots (JPEG, max. 5 MB)</label>
  <input type="file" id="photo" name="photo" accept="image/jpeg">
  <button type="submit">Hochladen</button>
</form>

Barrierefreiheit

Jedes Feld braucht ein label; Fehlermeldungen gehören neben das Feld und werden mit ihm verbunden (aria-describedby). Ein Formular mit der Rolle form wird erst mit einem zugänglichen Namen (aria-label) zu einem Orientierungspunkt der Seite.

Worauf Sie achten sollten

  • Die Prüfung im Browser ist nur eine Hilfe für den Besucher – der Server muss die Daten erneut prüfen, denn sie lassen sich auch ohne das Formular senden.
  • Formulare, die etwas ändern (eine Bestellung, eine Passwortänderung), brauchen auf dem Server einen Schutz vor CSRF – ein verstecktes Einmal-Token.
  • Ein Formular in einem Formular funktioniert nicht: Der Browser verwirft das innere <form>. Ein Feld außerhalb des Formulars verbindet das Attribut form="formular-id" mit ihm.
  • Ohne enctype="multipart/form-data" wird nicht die Datei gesendet, sondern nur ihr Name.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 3. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
input – Eingabefeld
label – Feldbeschriftung
button – Schaltfläche
fieldset – Feldgruppe
select – Auswahlliste
textarea – mehrzeiliger Text
search – Suche