Status: Aktueller Standard
<form> steht für formular (Formular, Eingabemaske).
<form>-Tag ist ein zentrales HTML-Element zur Erfassung und Übermittlung von Benutzereingaben. Er bildet die Grundlage für Interaktion zwischen Client (Browser) und Server. Es sammelt Eingaben (z. B. Textfelder, Checkboxen, Buttons) und sendet sie an eine definierte Ressource.
<form type="..." [attribute]>...</form>Ziel-URL für die Datenübertragung.
HTTP-Methode (get/post)
Kodierung der Daten bei Datei-Uploads.
Ziel-Fenster bzw. Tab.
Autovervollständigung an/aus.
Deaktiviert Browser-Validierung.
Validierung auf Inhalt
Mindestanzahl Zeichen
Maximalzahl Zeichen
Validierung auf regulären Ausdruck (Regex)
<form>
- --- <form action="/submit" method="post" enctype="multipart/form-data" autocomplete="on">
<!-- ========================== -->
<fieldset>
<legend>Textbasierte Eingaben</legend>
<label for="text">Text:</label>
<input type="text" id="text" name="text" required>
<label for="password">Passwort:</label>
<input type="password" id="password" name="password">
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
<label for="website">URL:</label>
<input type="url" id="website" name="website">
<label for="phone">Telefon:</label>
<input type="tel" id="phone" name="phone">
<label for="search">Suche:</label>
<input type="search" id="search" name="search">
<label for="number">Zahl:</label>
<input type="number" id="number" name="number" min="0" max="100">
<label for="range">Range:</label>
<input type="range" id="range" name="range" min="0" max="100">
<label for="date">Datum:</label>
<input type="date" id="date" name="date">
<label for="time">Zeit:</label>
<input type="time" id="time" name="time">
<label for="datetime">Datum & Zeit:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="month">Monat:</label>
<input type="month" id="month" name="month">
<label for="week">Woche:</label>
<input type="week" id="week" name="week">
<label for="color">Farbe:</label>
<input type="color" id="color" name="color">
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Checkboxen & Radio</legend>
<label>
<input type="checkbox" name="newsletter" value="yes">
Newsletter abonnieren
</label>
<label>
<input type="checkbox" name="terms" required>
AGB akzeptieren
</label>
<p>Geschlecht:</p>
<label>
<input type="radio" name="gender" value="male"> Männlich
</label>
<label>
<input type="radio" name="gender" value="female"> Weiblich
</label>
<label>
<input type="radio" name="gender" value="diverse"> Divers
</label>
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Datei & Versteckte Felder</legend>
<label>Datei-Upload:
<input type="file" name="file">
</label>
<input type="hidden" name="hiddenField" value="hiddenValue">
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Freitext</legend>
<label>Textarea:
<textarea name="message" rows="4" cols="50"></textarea>
</label>
</fieldset>
<!-- ========================== -->
<fieldset>
<legend>Buttons</legend>
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button type="button" onclick="alert('Button ohne Submit')">Normaler Button</button>
<input type="submit" value="Submit-Input">
<input type="reset" value="Reset-Input">
<input type="image" src="https://via.placeholder.com/100x40" alt="Bild-Submit">
</fieldset>
</form>