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.