Aufbau und Funktion von HTML-Formularen einfach erklärt

Sie möchten selbst ein Formular auf Ihrer Homepage einrichten? Dann sind Sie hier genau richtig. Wir zeigen Ihnen, wie Webformulare aufgebaut sind und wie Sie selbst ein Formular mit den gewünschten Eingabefeldern erstellen.

Websites werden in der Auszeichnungssprache HTML geschrieben. HTML steht für Hypertext Markup Language und ist die grundlegende Sprache für den Aufbau und die Strukturierung von Webseiten. Auch die Beschreibung eines Online-Formulars, also welche Eingabefelder vorhanden sind und welche Beschriftungen diese haben, erfolgt in HTML. Im Folgenden zeigen wir Ihnen, wie dieser HTML-Code aufgebaut ist und wie Sie damit selbst Ihr gewünschtes Formular schreiben können.

Wenn Ihnen HTML noch gar nichts sagt, finden Sie unter folgenden Link ein Einsteiger-Tutorial: HTML/Tutorials/Einstieg bei SelfHtml.

Aufbau eines HTML-Formulars

Folgender HTML-Code zeigt den Quelltext eines Beispielformulars, welchen wir in Folge schrittweise für Sie erläutern.

<form action="backend.php" method="post">

  <label for="name">Ihr Name</label>
  <input type="text" id="name" name="Name">

  <label for="email">E-Mail-Adresse</label>
  <input type="email" id="email" name="Email">

  <label for="msg">Ihre Nachricht</label>
  <textarea id="msg" name="Nachricht"></textarea>

  <button type="submit">Abschicken</button>

</form>

Für den Aufbau eines Online-Formulars werden in HTML Tags wie form, input, textarea, select und option verwendet.

form-Tag

Das form-Tag ist das Container-Element für das Formular. Es umschließt alle Felder für die Inhaltseingabe und beinhaltet Angaben für die Sendungsübertragung.

<form action="backend.php" method="post">
  ...
</form>

Die Felder für die Inhaltseingabe werden zwischen dem öffnenden und dem schließenden form-Tag definiert. Mit Attributen werden beim form-Tag einige Angaben eingetragen, um festzulegen, wohin die Formulardaten gesendet werden sollen und in welcher technischen Form die Datenübermittlung stattfinden soll. Im Folgenden erklären wir Ihnen den Sinn und Zweck dieser Angaben.

Wie funktioniert der Formular-Versand?

Der Seitenbesucher füllt die Felder des Formulars aus und löst mit Klick auf den Sende-Button die Übertragung aus. Damit stellt der Webbrowser alle Formulareingaben in einer Liste mit Schlüssel-Wert Paaren aus Feldnamen und Feldwert zusammen. Diese Daten sendet er an das Backend, welches die weitere Verarbeitung übernimmt.

Das Backend

Das Backend ist ein Computerprogramm, welches sich um die Annahme der Formularsendungen und deren weiteren Verarbeitung annimmt. Oftmals leitet ein solches Backend-Skript die Formulareingaben als E-Mail-Nachricht weiter.

Die Webadresse des Backends wird im action-Attribut des Formular-Tags eingetragen. An diese Adresse sendet der Webbrowser die Formulareingaben, wenn das Formular abgesendet wird.

Die Sendemethoden GET und POST

Im Attribut method muss die korrekte HTTP-Methode eingestellt werden. Es gibt dabei zwei Methoden, mit denen man die Formularübertragung einrichten kann. Diese nennen sich GET und POST. Die Methode GET dient vorrangig dazu, Daten von einem Server abzurufen und Daten nur in kleinen Umfang zu übermitteln. POST hingegen ist konkret dafür gedacht, Daten an den Server, auch in einem größeren Umfang, zu übertragen. Deshalb wird in aller Regel die Methode POST für die Sendeübertragung von Online-Formularen verwendet.
Richten Sie sich bei der Wahl der Methode danach, welche vom verwendeten Backend erfordert wird, damit die Daten in der passenden Form übertragen werden.

Datenkodierung

Mit dem Attribut enctype wird der MIME-Typ angegeben. Dieser legt fest, mit welcher Datenkodierung die Übertragung erfolgt.

Der Typ application/x-www-form-urlencoded wird als Standard verwendet und muss nicht extra angegeben werden. Werden mit dem Formular Dateien übertragen, so muss dafür der MIME-Typ auf multipart/form-data eingestellt werden.

<form action="..." method="post" enctype="multipart/form-data">

Zeichensatz

Das accept-charset Attribut informiert den Webbrowser, in welchem Zeichensatz die Textzeichen an das Backend-Skript gesendet werden sollen. Heutzutage hat sich der Zeichensatz UTF-8 durchgesetzt und wird als Standard verwendet. Wenn Ihnen auffällt, dass Sonderzeichen oder Umlaute nicht korrekt gesendet werden, so liegt es oft daran, dass das Backend mit einem anderen Zeichensatz arbeitet. In diesem Fall können Sie mit diesem Attribut den Zeichensatz auf z. B. ISO-8859-1 ändern.

<form action="..." method="post" accept-charset="UTF-8">

Die Eingabeelemente eines Formulars

Der HTML-Standard stellt eine Reihe von Elementen zur Verfügung, mit denen Sie ein Formular mit den Eingabefeldern nach Ihren Wünschen erstellen können.

Im Folgenden zeigen wir Ihnen die verschiedenen Eingabeelemente, inklusive einen beispielhaften HTML-Code, den Sie für Ihr Formular übernehmen und anpassen können. Der HTML-Code aller Formularfelder muss zwischen dem öffnenden und dem schließenden form-Tag eingefügt werden, damit diese Felder als Bestandteil des Formulars gelten und bei dessen Übermittlung mitgesendet werden.

Das Textfeld

Das am häufigsten genutzte Formularelement ist ein einfaches Textfeld benötigt. Dieses kann für die verschiedensten Inhalte verwendet werden, bei denen keine mehrzeilige Texteingabe erforderlich ist.

Ein Textfeld wird zum Beispiel für die Eingabe eines Namens, einer Adresse oder einer beliebigen anderen Texteingabe genutzt. Sehen wir uns den HTML-Code für ein Textfeld an:

<input type="text" name="Feldname" value="">

Mit dem Tag input wird in HTML ein Formularfeld ausgezeichnet. Um dem Browser mitzuteilen, dass es sich bei diesem Formularfeld um ein einfaches Textfeld handelt, wird das mit dem Attribut type="text" festgelegt.

Feldattribute

Zum input-Tag können mehrere Attribute eingetragen werden, um die genauen Feldeinstellungen festzulegen. Die Attribute type und name sind bei Input-Feldern Pflicht und müssen immer vorhanden sein. Weitere Attribute sind optional und brauchen nur bei Nutzung der jeweiligen Funktionalität angegeben werden. Sehen wir uns nun den Einsatz der wichtigsten Attribute an:

type Attribut

Das Attribut type muss bei jedem Input-Feld vorhanden sein und gibt an, um welchen Typ von Eingabefeld es sich handelt. Für ein Textfeld wird hier text eingetragen. Aber auch andere Angaben sind möglich, die wir uns in Folge bei der Beschreibung der verschiedenen Eingabeelemente ansehen.

name Attribut

Der Feldname wird im Attribut name eingetragen und ist essenziell! Diese Bezeichnung wird bei der Sendungsübertragung als Titel zusammen mit der Feldeingabe (Wert) übermittelt.

value Attribut

Das value-Attribut ermöglicht es, ein Feld mit einem Wert vorbelegen. Zumeist sollen aber Formularfelder beim Seitenaufruf leer sein und erst durch den Nutzer befüllt werden. In diesem Fall können Sie dieses Attribut weglassen.

placeholder Attribut

Der in diesem Attribut angegebene Text wird im Formularfeld als Platzhalter angezeigt, solange in diesem Feld noch nichts eingegeben wurde. Das kann nützlich sein, um dem Nutzer Informationen zur korrekten Eingabe mitzugeben. Beispielsweise, wenn die Eingabe in einem bestimmten Format erfolgen soll.

Beschriftung der Eingabefelder

Natürlich benötigt ein Formularfeld auch eine Beschriftung, damit für den Seitenbesucher ersichtlich ist, welche Information einzugeben ist. Dafür ist in HTML der Tag label vorgesehen. Als Inhalt wird in diesem Tag der Beschriftungstext eingefügt. Um zwischen dem Label und dem Eingabefeld die logische Verbindung herzustellen, wird in beiden Tags eine beliebige, aber eindeutige Kennung eingetragen. Anhand dieses Beispieles sollte die Sache klar sein:

<label for="feld-01">Ihr Name</label>
<input type="text" name="Name" id="feld-01">

Eingabefelder für Telefonnummern und E-Mail-Adressen

Um Textfelder für die Eingabe einer Telefonnummer oder E-Mail-Adresse auszuzeichnen, geben Sie beim type-Attribut den Wert tel oder email an. Damit versteht der Webbrowser, um welche Art von Eingabe erwartet wird und kann den Nutzer bei der Eingabe unterstützen. Das führt z. B. dazu, dass bei der Eingabe am Smartphone eine entsprechend angepasste Tastatur angezeigt wird.

<label for="feld-01">Ihre Telefonnummer</label>
<input type="tel" name="Telefon" id="feld-01">

<label for="feld-02">Ihre E-Mail-Adresse</label>
<input type="email" name="Email" id="feld-02">

Das mehrzeilige Textfeld

Für ein Textfeld zur Eingabe eines mehrzeiligen Textes wird in HTML ein eigenes Element mit dem Tag textarea verwendet.

<textarea name="Nachricht"></textarea>

Wenn Sie eine Textarea mit einem Inhalt vorbelegen möchten, so fügen Sie den Text als Inhalt zwischen dem öffnenden und schließenden Tag ein.

Checkboxen

Checkboxen sind Optionen, die vom Nutzer aktiviert werden können. Aktivierte Checkboxen werden je nach Browser und Betriebssystem mit einem Kreuz oder einem Häkchen dargestellt und werden häufig in Online-Formularen verwendet, um etwa die Geschäftsbedingungen vom Nutzer bestätigen zu lassen.

In HTML wird eine Checkbox mit einem Input-Element und der Typ-Angabe checkbox angelegt.

<input type="checkbox" name="AGB bestätigt" value="Ja" id="option-agb">
<label for="option-agb"> Ich bestätige die AGB</label>

Beachten Sie, dass der Wert der Checkbox nur bei Aktivierung übertragen wird. Um dieses Verhalten zu umgehen und für diese Angabe immer einen Wert zu übertragen, ist es ein kleiner Kniff, das Markup um ein verstecktes Formularfeld zu ergänzen, dessen Wert bei Nicht-Aktivierung der Checkbox übertragen wird. Hier ein Beispiel:

<input type="hidden" name="Rückruf gewünscht" value="Nein">
<input type="checkbox" name="Rückruf gewünscht" value="Ja" id="option-rueckruf">
<label for="option-rueckruf"> Ich möchte einen Rückruf erhalten</label>

Ist die Checkbox beim Absenden des Formulars nicht aktiviert, so wird der Wert „Nein“ für das Formularfeld, mit dem Namen „Rückruf gewünscht“, übertragen. Die Aktivierung der Checkbox führt zu einem Überschreiben der Angabe und es erfolgt die Übertragung des Wertes „Ja“.

Optionsauswahl mit Radio-Buttons

Radio-Buttons werden verwendet, wenn zu einer Formularangabe die Auswahl aus mehreren vorgegebenen Antwortoptionen erfolgen soll.

Für jede Option wird hierfür in HTML ein Input-Element mit Typ radio angelegt.

<input type="radio" name="Lieblingsfarbe" value="Rot" id="radio-01">
<label for="radio-01">Rot</label><br>

<input type="radio" name="Lieblingsfarbe" value="Blau" id="radio-02">
<label for="radio-02">Blau</label><br>

<input type="radio" name="Lieblingsfarbe" value="Grün" id="radio-03">
<label for="radio-03">Grün</label>

Die Verwendung des gleichen Namens für alle Radio-Buttons innerhalb einer Gruppe (hier „Lieblingsfarbe“) stellt sicher, dass der Benutzer nur eine Option auswählen kann. Wenn der Benutzer eine Option auswählt, wird die Auswahl der anderen Optionen automatisch aufgehoben.

Nur die vom Nutzer ausgewählte Option wird übertragen. Wird kein Radio-Button aktiviert, so erfolgt keine Übertragung. Wenn Sie sicherstellen möchten, dass zu dieser Formularangabe immer eine Optionsauswahl gesendet wird, so können Sie mit dem Attribut checked eine Option vorauswählen:

<input type="radio" name="Lieblingsfarbe" value="Rot" checked>

Auswahlliste mit Select-Feld

Ein Select-Feld (auch oft als Dropdown-Liste bezeichnet) wird in einem HTML-Formular verwendet, um dem Nutzer eine Auswahlmöglichkeit aus einer Liste von Optionen zu bieten.

Für die Umsetzung werden hier die HTML-Tags select und option verwendet. Hier ein Beispiel, wie eine Select-Liste in HTML erstellt wird:

<label for="select-01">Land:</label>
<select name="Land" id="select-01">
  <option value="Deutschland">Deutschland</option>
  <option value="Österreich">Österreich</option>
  <option value="Schweiz">Schweiz</option>
</select>

Für jede Auswahlmöglichkeit ist im Markup eine Option anzulegen. Der Inhalt des option-Tags wird zur Anzeige verwendet. Zur Übermittlung beim Sendevorgang wird hingegen der Wert aus dem Attribut value übernommen.

Das Formular in Bereiche unterteilen

Mit dem HTML-Element fieldset lassen sich Formularfelder gruppieren und das Formular in Bereiche unterteilen.

<form action="...">
  <fieldset>
    <legend>Bereich 1</legend>
    ...
  </fieldset>
  <fieldset>
    <legend>Bereich 2</legend>
    ...
  </fieldset>
</form>

Innerhalb des fieldset-Tags werden die Formularfelder platziert, die zu dieser Gruppe gehören. Zusätzlich kann mit legend ein Bereichstitel, am Beginn des Fieldsets, eingefügt werden.

Buttons

Buttons sind Schaltflächen, mit denen eine Aktion ausgelöst werden kann. Für Formulare sind zwei Typen von Buttons relevant. Einerseits der Submit-Button, der den Sendevorgang auslöst, und der Reset-Button, der alle Formularfelder zurücksetzt.

<button type="reset">Formular leeren</button>
<button type="submit">Formular absenden</button>

Die Buttons müssen sich im Inhaltsbereich des form-Tags befinden, damit diese funktionell mit dem Formular verbunden sind.