BESTE WEBSITE FÜR WEBENTWICKLER
HTML5-Lektionen für Anfänger

Ua En Es

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:

Beispiel

<option value="fiat" selected>Fiat</option>
Try it Yourself »

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:

Personalia: First name:

Last name:



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

Testen Sie sich mit Übungen

Übung:

Fügen Sie im Formular unten eine leere Dropdown-Liste mit dem Namen hinzu "cars".

<form action="/action_page.html">
<>
</>
</form>


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.



Kommentare