HTML -Formularelemente
In diesem Kapitel werden alle verschiedenen HTML-Formularelemente beschrieben.
Die HTML-<form>-Elemente
Das HTML-Element <form> kann eines oder mehrere der folgenden Formularelemente enthalten:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
Das <input>-Element
Eines der am häufigsten verwendeten Formularelemente ist das <input>-Element.
Das Element <input> kann abhängig vom Attribut type auf verschiedene Arten angezeigt werden.
Beispiel
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Try it Yourself »
Alle verschiedenen Werte des Attributs type werden im nächsten Kapitel behandelt: HTML-Eingabetypen.
Das <label>-Element
Das Element <label> definiert eine Beschriftung für mehrere Formularelemente.
Das Element <label> ist für Benutzer von Screenreadern nützlich, da der Screenreader die Beschriftung laut vorliest, wenn der Benutzer sich auf das Eingabeelement konzentriert.
Das Element <label> hilft auch Benutzern, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Optionsfelder oder Kontrollkästchen) zu klicken – weil der Benutzer auf den darin enthaltenen Text klickt das Element <label> schaltet das Optionsfeld/Kontrollkästchen um.
Das for-Attribut des <label>-Tags sollte dem entsprechen id-Attribut des <input>-Elements, um sie miteinander zu verbinden.
Das <select>-Element
Das Element <select> definiert eine Dropdown-Liste:
Beispiel
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Die <option>-Elemente definieren eine Option, die ausgewählt werden kann.
Standardmäßig ist das erste Element in der Dropdown-Liste ausgewählt.
Um eine vorab ausgewählte Option zu definieren, fügen Sie der Option das Attribut selected hinzu:
Sichtbare Werte:
Verwenden Sie das Attribut size, um die Anzahl der sichtbaren Werte anzugeben:
Beispiel
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Mehrfachauswahl zulassen:
Verwenden Sie das Attribut multiple, um dem Benutzer die Auswahl mehrerer Werte zu ermöglichen:
Beispiel
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
Das <textarea>-Element
Das Element <textarea> definiert ein mehrzeiliges Eingabefeld (einen Textbereich):
Beispiel
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Try it Yourself »
Das Attribut rows gibt die sichtbare Anzahl von Zeilen in einem Textbereich an.
Das Attribut cols gibt die sichtbare Breite eines Textbereichs an.
So wird der obige HTML-Code in einem Browser angezeigt:
Sie können die Größe des Textbereichs auch mithilfe von CSS definieren:
Beispiel
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Try it Yourself »
Das ><button>-Element
Das Element ><button> definiert eine anklickbare Schaltfläche:
Beispiel
<button type="button" onclick="alert('Ehre sei der Ukraine!')">Klick mich!</button>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Hinweis: Geben Sie immer das Attribut type für das Schaltflächenelement an. Verschiedene Browser verwenden möglicherweise unterschiedliche Standardtypen für das Schaltflächenelement.
Die Elemente <fieldset> und <legend>
Das Element <fieldset> wird verwendet, um zusammengehörige Daten in einem Formular zu gruppieren.
Das Element <legend> definiert eine Beschriftung für das Element <fieldset>.
Beispiel
<form action="/action_page.html">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Try it Yourself »
So wird der obige HTML-Code in einem Browser angezeigt:
Das <datalist>-Element
Das Element <datalist> gibt eine Liste vordefinierter Optionen für ein Element <input> an.
Benutzer sehen bei der Dateneingabe eine Dropdown-Liste der vordefinierten Optionen.
Das list-Attribut des <input>-Elements muss auf den verweisen id-Attribut des <datalist>-Elements.
Beispiel
<form action="/action_page.html">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Try it Yourself »
Das <output>-Element
Das Element <output> stellt das Ergebnis einer Berechnung dar (z. B. eine Berechnung, die von einem Skript ausgeführt wird).
Beispiel
Führen Sie eine Berechnung durch und zeigen Sie das Ergebnis in einem <output>-Element an:
<form action="/action_page.html"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Try it Yourself »
HTML Übungen
HTML-Formularelemente
| Tag | Beschreibung |
|---|---|
| <form> | Definiert ein HTML-Formular für Benutzereingaben |
| <input> | Definieren Sie ein Eingabesteuerelement |
| <textarea> | Definiert ein mehrzeiliges Eingabesteuerelement (Textbereich) |
| <label> | Definiert eine Bezeichnung für ein <input>-Element |
| <fieldset> | Gruppiert verwandte Elemente in einem Formular |
| <legend> | Definiert eine Beschriftung für ein <fieldset>-Element |
| <select> | Definieren Sie eine Dropdown-Liste |
| <optgroup> | Definiert eine Gruppe verwandter Optionen in einer Dropdown-Liste |
| <option> | Definieren Sie eine Option in einer Dropdown-Liste |
| <button> | Definieren Sie eine anklickbare Schaltfläche |
| <datalist> | Geben Sie eine Liste vordefinierter Optionen für Eingabesteuerelemente an |
| <output> | Definiert das Ergebnis einer Berechnung |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
