HTML -Formularelemente
Dieses Kapitel beschreibt alle verschiedenen HTML-Formularelemente.
Die HTML-<form>-Elemente
Das HTML- <form>Element 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 <input>Element kann je nach type
Attribut auf verschiedene Arten angezeigt werden.
Beispiel
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Alle verschiedenen Werte des type
Attributs werden im nächsten Kapitel behandelt:
HTML-Eingabetypen .
Das <label>-Element
Das <label>Element definiert eine Bezeichnung für mehrere Formularelemente.
Das <label>Element ist für Benutzer von Screenreadern nützlich, da der Screenreader die Bezeichnung laut vorliest, wenn der Benutzer sich auf das Eingabeelement konzentriert.
Das <label>Element hilft auch Benutzern, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Optionsfelder oder Kontrollkästchen) zu klicken – denn wenn der Benutzer auf den Text innerhalb des <label>Elements klickt, wird das Optionsfeld/Kontrollkästchen umgeschaltet.
Das forAttribut des <label>Tags sollte gleich dem idAttribut des <input>
Elements sein, um sie miteinander zu verbinden.
Das <select>-Element
Das <select>Element 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>
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 vorausgewählte Option zu definieren, fügen Sie der Option das selectedAttribut hinzu:
Beispiel
<option value="fiat" selected>Fiat</option>
Sichtbare Werte:
Verwenden Sie das sizeAttribut, 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>
Mehrfachauswahl zulassen:
Verwenden Sie das multipleAttribut, damit der Benutzer mehr als einen Wert auswählen kann:
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>
Das <textarea>-Element
Das <textarea>Element definiert ein mehrzeiliges Eingabefeld (einen Textbereich):
Beispiel
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Das rowsAttribut gibt die sichtbare Anzahl von Zeilen in einem Textbereich an.
Das colsAttribut 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 mit CSS definieren:
Beispiel
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Das <button>-Element
Das <button>Element definiert eine anklickbare Schaltfläche:
Beispiel
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
So wird der obige HTML-Code in einem Browser angezeigt:
Hinweis: Geben Sie immer das typeAttribut für das Schaltflächenelement an. Unterschiedliche Browser können unterschiedliche Standardtypen für das Schaltflächenelement verwenden.
Die Elemente <fieldset> und <legend>
Das <fieldset>Element wird verwendet, um zusammengehörige Daten in einem Formular zu gruppieren.
Das <legend>Element definiert eine Beschriftung für das
<fieldset>
Element.
Beispiel
<form action="/action_page.php">
<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>
So wird der obige HTML-Code in einem Browser angezeigt:
Das <datalist>-Element
Das <datalist>Element gibt eine Liste vordefinierter Optionen für ein <input>Element an.
Benutzer sehen eine Dropdown-Liste der vordefinierten Optionen, während sie Daten eingeben.
Das listAttribut des <input>Elements muss auf das
idAttribut des <datalist>Elements verweisen.
Beispiel
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Das <output>-Element
Das <output>Element stellt das Ergebnis einer Berechnung dar (wie eine, 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.php"
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>
HTML-Übungen
HTML-Formularelemente
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .