HTML Forms: So erstellen Sie Formulare für Ihre Website

HTML Forms bzw. HTML-Formulare ermöglichen Ihnen die einfache, direkte Kommunikation mit Ihren Besuchern und Besucherinnen. Durch verschiedene Elemente und Attribute können Sie die Formulare an Ihre Bedürfnisse anpassen.

Was ist ein HTML-Formular?

HTML-Formulare bzw. HTML Forms sind interaktive Formulare für Ihre Website, über die Besucherinnen und Besucher Ihrer Seite individuelle Daten an Sie senden können. Die eingegebenen Daten werden dabei zur Verarbeitung an den jeweiligen Webserver geschickt. Um diese Form der Interaktion in Ihre HTML-Dokumente zu integrieren, benötigen Sie das HTML-<form>-Tag. Dieses HTML-Tag kann durch unterschiedliche Elemente und Attribute für den gewünschten Einsatzzweck angepasst werden. Dabei können verschiedene Eingabetypen wie Text, Nummern, E-Mail, Passwörter, Buttons sowie Checkboxen zum Einsatz kommen.

Falls Sie auf Ihrer Website mit einem HTML-Formular persönliche Daten erheben, müssen Sie darauf explizit in Ihrer Datenschutzerklärung hinweisen und für eine SSL/TLS-Verschlüsselung der Übertragung sorgen.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

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

Weil HTML Forms Ihnen so viele unterschiedliche Eingabeoptionen bieten, können Sie HTML-Formulare für eine Vielzahl von Einsatzzwecken nutzen. Dazu gehören unter anderem die folgenden:

  • Kontaktformulare für Anfragen oder Bestellungen
  • Anmeldeformulare für einen Account oder einen Newsletter
  • Feedback-Funktionen
  • Umfragen
  • Support- und Service-Ticket-Formulare
  • Logins für den Zugang zu geschützten Seitenbereichen

Theoretisch kann beinahe jede Form der Interaktion zwischen Besucherinnen bzw. Besuchern und einer Website über ein HTML-Formular abgewickelt werden.

Syntax von HTML <form>

HTML-Formulare werden mit Hilfe eines einleitenden HTML-<form>-Tags initiiert und mit einem schließenden </form>-Tag abgeschlossen. Innerhalb der beiden Tags können verschiedene weitere Elemente und Attribute stehen, die wir Ihnen im weiteren Verlauf dieses Artikels noch näher vorstellen. Die allgemeine Syntax der praktischen Formulare sieht folgendermaßen aus:

<form> Elemente </form>
html

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

Es gibt verschiedene HTML-Elemente, mit denen Sie Ihr HTML-Formular nach den eigenen Vorstellungen anpassen können. Diese stellen wir Ihnen in der folgenden Tabelle kurz vor:

HTML-Element Beschreibung
<button> Einfache anklickbare Schaltfläche
<datalist> Optionen für das Element <input> in Form einer Drop-Down-Liste
<fieldset> Zusammenhängende Daten gruppieren
<input> Sammlung von Daten; durch das Attribut type angepasst
<label> HTML label erstellt eine sichtbare Beschriftung
<legend> Bezeichnung oder Überschrift für das Tag <fieldset>
<optgroup> <option>-Elemente innerhalb von <select> gruppieren
<option> Auswahlmöglichkeit für <datalist> oder <select> angeben
<output> Resultat einer Berechnung oder eines Skripts angeben
<select> Drop-Down-Liste erstellen
<textarea> Textfeld mit mehreren Zeilen definieren

Die wichtigsten Attribute für HTML Forms

Es gibt zahlreiche HTML-Attribute, mit denen Sie ein Formular mit unterschiedlichen Funktionen ausstatten können. Zu den wichtigsten Attributen 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 Eingabefeld automatisch ausgefüllt werden soll
  • enctype: Bestimmt, wie Daten kodiert werden, die an den Server adressiert sind
  • method: Legt fest, ob die Daten per GET- oder POST-Methode gesendet werden sollen
  • target: Definiert, wo ein verlinktes Dokument geöffnet werden soll
  • name: Gibt dem Formular einen Namen, der in JavaScript verwendet werden kann, um auf das Formular zuzugreifen
  • accept-charset: Bestimmt die Zeichenkodierung, die beim Senden der Formulardaten verwendet werden soll

HTML Forms: Beispiele

Abschließend wollen wir anhand von zwei Beispielen verdeutlichen, wie HTML Forms genau funktionieren. Zunächst erstellen wir ein einfaches Formular, in das Besucherinnen und Besucher ihren Vor- und Nachnamen eingeben und diese Eingaben absenden können. Der entsprechende 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 folgendermaßen aus:

html-formular-namensabfrage.png
Über die Eingabefelder können User im Beispiel-Formular Ihren Vor- und Nachnamen eingeben, bevor sie diese Informationen via „Absenden“ an die ausgewiesene Seite übermitteln.

In einem weiteren Beispiel für HTML Forms nutzen wir die Tags <select>, <option> und <optgroup>, um ein Formularfeld zu erstellen, bei dem User verschiedene 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
Registrieren Sie Ihre perfekte Domain
  • Inklusive Wildcard-SSL-Zertifikat
  • Inklusive Domain Lock
  • Inklusive 2 GB E-Mail-Postfach
War dieser Artikel hilfreich?