Grundaufbau Formulare

Formulare sind ein zentraler Bestandteil von Webseiten, weil sie die Interaktion zwischen Nutzer:innen und Website ermöglichen. Immer dann, wenn du Daten eingeben und abschicken kannst – etwa bei einer Anmeldung, einer Suche oder einem Kontaktformular – steckt dahinter ein HTML-Formular.

HTML Codebeispiel

1<form action="/send" method="post">
2  <label for="vorname">Vorname:</label><br>
3  <input type="text" id="vorname" name="vorname"><br>
4  <label for="nachname">Nachname:</label><br>
5  <input type="text" id="nachname" name="nachname"><br>
6  <button type="submit">Absenden</button>
7</form>

Output

Wichtige Bestandteile eines Formulars

<form> fasst alle Eingabefelder zusammen und legt fest, wohin und auf welche Weise die Daten gesendet werden.
action gibt an, an welche URL die Formulardaten gesendet werden.
Mehr dazu im Kapitel Formular Attribute
method legt fest, wie die Daten übertragen werden.
Es gibt zwei häufig verwendete Methoden:
method="get" → Daten werden in der URL übertragen und sind sichtbar.
method="post" → Daten werden im Body der HTTP-Anfrage übertragen und sind nicht in der URL sichtbar.
Mehr dazu im Kapitel Formular Attribute
<label> beschreibt, was in ein Feld eingegeben werden soll. Es ist über das for-Attribut mit der id eines Eingabefeldes verbunden. Dadurch kannst du auch auf den Text klicken, um das Feld zu aktivieren.
Mehr dazu im Kapitel Das <label> Element
<input> ist eines der wichtigsten Elemente eines Formulars. Hier gibst du Daten ein. Das name-Attribut ist besonders wichtig, da der eingegebene Wert unter diesem Namen an den Server gesendet wird, z. B. vorname=Max.
Mehr dazu im Kapitel Formular Elemente
Ein Button mit type="submit" sendet das Formular ab. Dabei sendest du alle Eingaben an die im action-Attribut angegebene Adresse übertragen.

Im nächsten Kapitel lernst du: Formular Attribute