HTML Forms bzw. HTML-Formulare er­mög­li­chen Ihnen die einfache, direkte Kom­mu­ni­ka­ti­on mit Ihren Besuchern und Be­su­che­rin­nen. Durch ver­schie­de­ne Elemente und Attribute können Sie die Formulare an Ihre Be­dürf­nis­se anpassen.

Was ist ein HTML-Formular?

HTML-Formulare bzw. HTML Forms sind in­ter­ak­ti­ve Formulare für Ihre Website, über die Be­su­che­rin­nen und Besucher Ihrer Seite in­di­vi­du­el­le Daten an Sie senden können. Die ein­ge­ge­be­nen Daten werden dabei zur Ver­ar­bei­tung an den je­wei­li­gen Webserver geschickt. Um diese Form der In­ter­ak­ti­on in Ihre HTML-Dokumente zu in­te­grie­ren, benötigen Sie das HTML-<form>-Tag. Dieses HTML-Tag kann durch un­ter­schied­li­che Elemente und Attribute für den ge­wünsch­ten Ein­satz­zweck angepasst werden. Dabei können ver­schie­de­ne Ein­ga­be­ty­pen wie Text, Nummern, E-Mail, Pass­wör­ter, Buttons sowie Check­bo­xen zum Einsatz kommen.

Falls Sie auf Ihrer Website mit einem HTML-Formular per­sön­li­che Daten erheben, müssen Sie darauf explizit in Ihrer Da­ten­schutz­er­klä­rung hinweisen und für eine SSL/TLS-Ver­schlüs­se­lung der Über­tra­gung sorgen.

Web­hos­ting
Das beste Web­hos­ting zum Spit­zen­preis
  • 3x schneller und 60 % günstiger
  • Maximale Ver­füg­bar­keit mit > 99.99 %
  • Nur bei IONOS: Bis zu 500 GB Spei­cher­platz inklusive

Wofür wird das <form>-Element verwendet?

Weil HTML Forms Ihnen so viele un­ter­schied­li­che Ein­ga­be­op­tio­nen bieten, können Sie HTML-Formulare für eine Vielzahl von Ein­satz­zwe­cken nutzen. Dazu gehören unter anderem die folgenden:

  • Kon­takt­for­mu­la­re für Anfragen oder Be­stel­lun­gen
  • An­mel­de­for­mu­la­re für einen Account oder einen News­let­ter
  • Feedback-Funk­tio­nen
  • Umfragen
  • Support- und Service-Ticket-Formulare
  • Logins für den Zugang zu ge­schütz­ten Sei­ten­be­rei­chen

Theo­re­tisch kann beinahe jede Form der In­ter­ak­ti­on zwischen Be­su­che­rin­nen bzw. Besuchern und einer Website über ein HTML-Formular ab­ge­wi­ckelt werden.

Syntax von HTML <form>

HTML-Formulare werden mit Hilfe eines ein­lei­ten­den HTML-<form>-Tags initiiert und mit einem schlie­ßen­den </form>-Tag ab­ge­schlos­sen. Innerhalb der beiden Tags können ver­schie­de­ne weitere Elemente und Attribute stehen, die wir Ihnen im weiteren Verlauf dieses Artikels noch näher vor­stel­len. Die all­ge­mei­ne Syntax der prak­ti­schen Formulare sieht fol­gen­der­ma­ßen aus:

<form> Elemente </form>
html

Welche Elemente für ein HTML-Formular gibt es?

Es gibt ver­schie­de­ne HTML-Elemente, mit denen Sie Ihr HTML-Formular nach den eigenen Vor­stel­lun­gen anpassen können. Diese stellen wir Ihnen in der folgenden Tabelle kurz vor:

HTML-Element Be­schrei­bung
<button> Einfache an­klick­ba­re Schalt­flä­che
<datalist> Optionen für das Element <input> in Form einer Drop-Down-Liste
<fieldset> Zu­sam­men­hän­gen­de Daten grup­pie­ren
<input> Sammlung von Daten; durch das Attribut type angepasst
<label> HTML label erstellt eine sichtbare Be­schrif­tung
<legend> Be­zeich­nung oder Über­schrift für das Tag <fieldset>
<optgroup> <option>-Elemente innerhalb von <select> grup­pie­ren
<option> Aus­wahl­mög­lich­keit für <datalist> oder <select> angeben
<output> Resultat einer Be­rech­nung oder eines Skripts angeben
<select> Drop-Down-Liste erstellen
<textarea> Textfeld mit mehreren Zeilen de­fi­nie­ren

Die wich­tigs­ten Attribute für HTML Forms

Es gibt zahl­rei­che HTML-Attribute, mit denen Sie ein Formular mit un­ter­schied­li­chen Funk­tio­nen aus­stat­ten können. Zu den wich­tigs­ten At­tri­bu­ten gehören diese:

  • action: Gibt die URL an, an die die Daten aus dem Formular gesendet werden sollen
  • autocomplete: Zeigt dem Browser an, ob ein Ein­ga­be­feld au­to­ma­tisch aus­ge­füllt werden soll
  • enctype: Bestimmt, wie Daten kodiert werden, die an den Server adres­siert sind
  • method: Legt fest, ob die Daten per GET- oder POST-Methode gesendet werden sollen
  • target: Definiert, wo ein ver­link­tes Dokument geöffnet werden soll
  • name: Gibt dem Formular einen Namen, der in Ja­va­Script verwendet werden kann, um auf das Formular zu­zu­grei­fen
  • accept-charset: Bestimmt die Zei­chen­ko­die­rung, die beim Senden der For­mu­lar­da­ten verwendet werden soll

HTML Forms: Beispiele

Ab­schlie­ßend wollen wir anhand von zwei Bei­spie­len ver­deut­li­chen, wie HTML Forms genau funk­tio­nie­ren. Zunächst erstellen wir ein einfaches Formular, in das Be­su­che­rin­nen und Besucher ihren Vor- und Nachnamen eingeben und diese Eingaben absenden können. Der ent­spre­chen­de Code sieht so aus:

<!DOCTYPE html>
<html>
<body>
<h2>Beispiel für ein HTML-Formular</h2>
<form action="/action_page.php">
<label for="vorname">Vorname:</label><br>
<input type="text" id="vorname" name="vorname" value="Peter"><br>
<label for="nachname">Nachname:</label><br>
<input type="text" id="nachname" name="nachname" value="Schulz"><br><br>
<input type="submit" value="Absenden">
</form> 
<p>Wenn Sie auf "Absenden" klicken, werden Ihre Daten an eine Seite namens "/action_page.php" übermittelt.</p>
</body>
</html>
html

Auf der Website sieht das passende Formular zu dem Code in etwas fol­gen­der­ma­ßen aus:

Bild: Einfaches HTML-Formular-Beispiel
Über die Ein­ga­be­fel­der können User im Beispiel-Formular Ihren Vor- und Nachnamen eingeben, bevor sie diese In­for­ma­tio­nen via „Absenden“ an die aus­ge­wie­se­ne Seite über­mit­teln.

In einem weiteren Beispiel für HTML Forms nutzen wir die Tags <select>, <option> und <optgroup>, um ein For­mu­lar­feld zu erstellen, bei dem User ver­schie­de­ne Städte aus einer Dropdown-Liste auswählen können:

<!DOCTYPE html>
<html>
<head>
<title>Beispiel für ein HTML-Formular</title>
</head>
<body>
<label for="stadt">Städte:</label>
<select id="stadt">
<optgroup label="Deutschland">
<option value="berlin">Berlin</option>
<option value="hamburg">Hamburg</option>
</optgroup>
<optgroup label="Frankreich">
<option value="paris">Paris</option>
<option value="marseille">Marseille</option>
</optgroup>
<optgroup label="England">
<option value="london">London</option>
</optgroup>
</select>
</body>
</html>
html
Domain kaufen
Re­gis­trie­ren Sie Ihre perfekte Domain
  • Inklusive 1 SSL-Wildcard-Zer­ti­fi­kat pro Vertrag
  • Inklusive Domain Lock
  • Inklusive Domain Connect für einfache DNS-Ein­rich­tung
Zum Hauptmenü