HTML-Formularelemente

Formulare verwendest du, um Eingaben von Benutzern zu sammeln. Dazu gehören zum Beispiel Textfelder, Dropdown-Menüs, große Textfelder und Buttons zum Absenden.

Formularelemente stehen meistens zwischen <form> und </form>.

1<form action="/seite.php" method="post">
2  <!-- Formularelemente -->
3</form>

Das <form>-Element

Das <form>-Element ist der Container für ein Formular. Mit action legst du fest, wohin die Formulardaten gesendet werden. Mit method legst du fest, wie die Daten gesendet werden, zum Beispiel mit get oder post.

Das <input>- und <label>-Element

1<label for="vorname">Vorname:</label>
2<input type="text" id="vorname" name="vorname">

<input>

Das <input>-Element ist eines der wichtigsten Formularelemente. Du verwendest es, damit Benutzer Daten eingeben können. type="text" erzeugt ein einfaches Textfeld. Mehr dazu im Kapitel Input-Typen.

<label>

Das <label>-Element beschreibt ein Eingabefeld. Es verbessert die Barrierefreiheit und hilft Screenreadern dabei, das Formular richtig vorzulesen.

Außerdem kannst du auf das Label klicken, um direkt das passende Eingabefeld auszuwählen.

Du verbindest ein Label mit einem Input über:

• for im Label
• id im Input

Das <select>-Element

Das <select>-Element verwendest du, um ein Dropdown-Menü zu erstellen. Der Benutzer kann daraus eine Option auswählen.

Die einzelnen Auswahlmöglichkeiten werden mit dem <option>-Element erstellt.

1<label for="land">Land:</label>
2
3<select id="land" name="land">
4  <option value="de">Deutschland</option>
5  <option value="at">Österreich</option>
6  <option value="ch">Schweiz</option>
7</select>

Erklärung der Attribute

name

name bestimmt, unter welchem Namen die ausgewählte Option beim Absenden des Formulars gesendet wird.

value

value bestimmt den Wert, der an den Server gesendet wird. Bei value="de" wird zum Beispiel de gesendet.

Das <textarea>-Element

Das <textarea>-Element erzeugt ein großes Textfeld. Es eignet sich zum Beispiel für Nachrichten, Kommentare oder längere Texte.

Das Attribut rows gibt die Anzahl der sichtbaren Zeilen an. Das Attribut cols gibt ungefähr die sichtbare Breite in Zeichen an.

1<textarea name="message" rows="12" cols="32">
2Das ist ein großes Textfeld
3</textarea>

Das <fieldset>- und <legend>-Element

Mit <fieldset> kannst du zusammengehörige Formularfelder gruppieren. Mit <legend> gibst du dieser Gruppe eine Überschrift.

Das ist besonders hilfreich, wenn ein Formular mehrere Bereiche hat, zum Beispiel persönliche Daten, Adresse oder Zahlungsinformationen.

1<form action="/seite.php" method="post">
2  <fieldset>
3    <legend>Vor- und Nachname:</legend>
4
5    <label for="fieldset-vorname">Vorname:</label><br>
6    <input type="text" id="fieldset-vorname" name="vorname" value="Max"><br>
7
8    <label for="fieldset-nachname">Nachname:</label><br>
9    <input type="text" id="fieldset-nachname" name="nachname" value="Mustermann"><br><br>
10
11    <input type="submit" value="Absenden">
12  </fieldset>
13</form>