6. Unterrichtsblock

HTML Logo

Inhaltsverzeichnis

Formular Elemente

In diesem Abschnitt werden alle Formular-Elemente beschrieben.

Liste

Das HTML <form> Element kann mehrere Elemente aus folgender Liste beinhalten:

  • <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.

<label for="vname">Vorname:</label>
<input type="text" id="vname" name="vname">

Das <label> Element

Das Element <label> definiert ein Label für mehrere Formularelemente.

Das <label>-Element ist für Screenreader-Benutzer nützlich, da der Screenreader die Bezeichnung laut vorliest, wenn sich der Benutzer 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 for-Attribut des <label>-Tags sollte gleich dem id-Attribut des <input>-Elements sein, um sie zusammenzubinden.

Das <select> Element

Das <select> Element definiert ein Aufklappmenü.

<form action="/html">
  <label for="auto">Wähle ein Auto:</label>
  <select id="auto" name="auto">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat" selected>Fiat</option>
    <option value="audi">Audi</option>
    <option value="crysler">Crysler</option>
    <option value="ford">Ford</option>
  </select>
</form>

Beispiel

Das Element <option> definiert eine Option, die ausgewählt werden kann. Standardmäßig ist das erste Element in dem Aufklappmenü ausgewählt.

  • Um eine vorausgewählte Option zu definieren, fügt man das selected Attribut zur Option hinzu.
  • Um eine mehrfache Auswahl zu ermöglichen, fügt man das multiple Attribut zum öffnenden <select>-Element hinzu.

Aufgabe

Probiere das <select> Element mit den verschiedenen Attributen und Optionen aus.

Das <textarea>-Element

Das <textarea>-Element definiert ein mehrzeiliges Textfeld.

<textarea name="nachricht" rows="10" cols="30">
Das Auto steht in der Garage.
</textarea>

Das rows-Attribut gibt die sichtbare Anzahl von Zeilen in einem Textbereich an. Das cols-Attribut gibt die sichtbare Breite eines Textbereichs an.

Das <button> Element

Das Element <button> definiert eine anklickbare Schaltfläche.

<button type="button" onclick="alert('Servus!')">Klick mich!</button>

Hinweis: Füge immer das type-Attribut einem Button hinzu. Unterschiedliche Browser können unterschiedliche Standardtypen für das Button-Element verwenden.

Die <fieldset> und <legend> Elemente

Das Element <fieldset> wird verwendet, um zusammengehörige Daten in einem Formular zu gruppieren. Das <legend>-Element definiert eine Beschriftung für das <fieldset>-Element.

 <form action="/html">
  <fieldset>
    <legend>Personalien:</legend>
    <label for="vname">Vorname:</label><br>
    <input type="text" id="vname" name="vname" value="Thomas"><br>
    <label for="nname">Nachname:</label><br>
    <input type="text" id="nname" name="nname" value="Müller"><br><br>
    <input type="submit" value="Absenden">
  </fieldset>
</form>

Beispiel:

Personalien:




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 list-Attribut des <input>-Elements muss auf das id-Attribut des <datalist>-Elements verweisen.

<form action="/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>

Beispiel:

Das <output> Element

Das <output>-Element stellt das Ergebnis einer Berechnung dar (wie eine, die von einem Skript ausgeführt wird).

0 100 + =

Formular Input-Typen

Dieser Abschnitt geht auf die <input>-Typen und deren Besonderheiten ein. Es folgt eine Liste an verschiedenen Attribut-Typen:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">
  • <input type="time">
  • <input type="url">
  • <input type="week">

Hinweis: Das Standard-Attribut für <input> ist „text“

Input Typ „Password“

Die Zeichen in einem Passwortfeld sind maskiert (als Sternchen oder Kreise dargestellt).

<form>
  <label for="nutzername">Nutzername:</label><br>
  <input type="text" id="nutzername" name="nutzername"><br>
  <label for="pwd">Passwort:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Beispiel:




Input Typ „Reset“

Reset ist ein Button, welcher die Werte in den Formularen zurücksetzt.

<form>
  <label for="nutzername">Nutzername:</label><br>
  <input type="text" id="nutzername" name="nutzername"><br>
  <label for="pwd">Passwort:</label><br>
  <input type="password" id="pwd" name="pwd">
  <input type="reset">
</form>

Beispiel:




Input Typ „Color“

Der <input type="color"> wird für Eingabefelder verwendet, die eine Farbe enthalten sollen. Je nach Browserunterstützung kann im Eingabefeld ein Farbwähler erscheinen.

 <form>
  <label for="lieblingsfarbe">Wähle deine Lieblingsfarbe:</label>
  <input type="color" id="favcolor" name="lieblingsfarbe" value="#FE696A"><br>
  <input type="reset">
</form>

Beispiel:


Input Typ „Date“

Das <input type="date"> wird für Eingabefelder verwendet, die ein Datum enthalten sollen. Je nach Browserunterstützung kann im Eingabefeld eine Datumsauswahl erscheinen.

Es ist zudem möglich Min- und Max-Attribute zu verwenden, um Datumsbeschränkungen hinzuzufügen:

<form>
  <label for="geburtstag">Geburtstag:</label>
  <input type="date" id="geburtstag" name="geburtstag" min="2000-01-02">
</form>

Beispiel:



Input Typ „Datetime-local“

<input type="datetime-local"> gibt ein Datums- und Zeiteingabefeld ohne Zeitzone an. Je nach Browserunterstützung kann im Eingabefeld eine Datumsauswahl erscheinen.

<form>
  <label for="geburtstagszeit">Birthday (Datum und Zeit):</label>
  <input type="datetime-local" id="geburtstagszeit" name="geburtstagszeit">
</form>

Beispiel:



Input Typ „E-Mail“

Der <input type="email"> wird für Eingabefelder verwendet, die eine E-Mail-Adresse enthalten sollen. Je nach Browserunterstützung kann die E-Mail-Adresse beim Absenden automatisch validiert werden. Einige Smartphones erkennen den E-Mail-Typ und fügen „.com“ zur Tastatur hinzu, um der E-Mail-Eingabe zu entsprechen.

<form>
  <label for="email">E-Mail eingeben:</label>
  <input type="email" id="email" name="email">
</form>

Beispiel:

Input Typ „Image“

Der <input type="image"> definiert ein Bild als Submit-Button. Der Pfad zum Bild wird im src-Attribut angegeben.

<form>
  <input type="image" src="https://www.seo-kueche.de/wp-content/themes/seo-kueche/_/img/logo.svg" alt="Submit" width="100" height="100">
</form>

Beispiel:


Input Typ „File“

Der <input type="file"> definiert ein Dateiauswahlfeld und eine Schaltfläche „Durchsuchen“ für Datei-Uploads.

 <form>
  <label for="datei">Wähle eine Datei aus:</label>
  <input type="file" id="datei" name="datei">
</form>

Beispiel:

Input Typ „Number“

Der <input type="number"> definiert ein numerisches Eingabefeld. Man kann auch Einschränkungen festlegen, welche Nummern akzeptiert werden. Das folgende Beispiel zeigt ein numerisches Eingabefeld, in welches man einen Wert von 1 bis 5 eingeben kann:

<form>
  <label for="menge">Menge (zwischen 1 und 5):</label>
  <input type="number" id="menge" name="menge" min="1" max="5">
</form>

Beispiel:



Eingabebeschränkungen

Hier ist eine Liste mit Eingabebeschränkungen, welche als Attribute in das <input> Element eingebaut werden.

AttributBeschreibung
checkedGibt an, dass ein Eingabefeld beim Laden der Seite vorausgewählt sein soll (für type="checkbox" oder type="radio")
disabledGibt an, dass ein Eingabefeld deaktiviert werden soll
maxGibt den maximalen Wert für ein Eingabefeld an
maxlengthGibt die maximale Zeichenanzahl für ein Eingabefeld an
minGibt den Mindestwert für ein Eingabefeld an
patternGibt einen regulären Ausdruck an, gegen den der Eingabewert geprüft werden soll
readonlyGibt an, dass ein Eingabefeld schreibgeschützt ist (kann nicht geändert werden)
requiredGibt an, dass ein Eingabefeld erforderlich ist (muss ausgefüllt werden)
sizeGibt die Breite (in Zeichen) eines Eingabefelds an
stepGibt die zulässigen Nummernintervalle für ein Eingabefeld an
valueGibt den Standardwert für ein Eingabefeld an

Das folgende Beispiel zeigt ein numerisches Eingabefeld, in das Sie einen Wert von 0 bis 100 in Zehnerschritten eingeben können. Der Standardwert ist 30:

<form>
  <label for="menge">Menge (zwischen 0 und 100):</label>
  <input type="number" id="menge" name="menge" min="0" max="100" step="10" value="30"><br><br>
  <input type="reset">
</form>

Beispiel:



Input Typ „Range“

Der <input type="range"> definiert ein Steuerelement zur Eingabe einer Zahl, deren genauer Wert nicht wichtig ist (wie ein Schieberegler). Der Standardbereich ist 0 bis 100. Man kann jedoch mit den Attributen min, max und step einschränken, welche Zahlen akzeptiert werden.

<form>
  <label for="vol">Lautstärke (zwischen 0 und 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

Beispiel:



Input Typ „Tel“

Der <input type="tel"> wird für Eingabefelder verwendet, die eine Telefonnummer enthalten sollen.

 <form>
  <label for="phone">Telefonnummer eingeben:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Beispiel:



Input Typ „URL“

Die <input type="url"> wird für Eingabefelder verwendet, die eine URL-Adresse enthalten sollen. Je nach Browserunterstützung kann das URL-Feld beim Absenden automatisch validiert werden. Einige Smartphones erkennen den URL-Typ und fügen „.com“ zur Tastatur hinzu, um der URL-Eingabe zu entsprechen.

<form>
  <label for="homepage">Gib eine URL ein:</label>
  <input type="url" id="homepage" name="homepage">
</form>

Beispiel:



Übungsaufgabe

1. Aufgabe

Erstelle ein Formular mit folgenden Eingabemöglichkeiten. Trenne die einzelnen Feldsektionen dabei mit <fieldset> und <legend>

Erste Sektion

  • Eingabefeld: Vorname
  • Eingabefeld: Nachname
  • Eingabefeld: PLZ
  • Eingabefeld: Stadt
  • Eingabefeld: Straße / Hausnummer

Zweite Sektion

  • Datum-Eingabefeld: Geburtsdatum
  • Telefonnummer-Eingabefeld
  • Homepage-Eingabefeld: URL
  • Upload-Feld: Profilfoto
  • Eingabefeld: Passwort
  • Eingabefeld: Profilfarbe
  • Mehrfachauswahl – Hobbys mit sechs verschiedenen Optionen über ein Select-Element
  • Absende-Button mit der Aufschrift: „Jetzt registrieren“

Erstelle für die o.g. Eingabefelder passende <label>-Elemente sowie passende name-Attribute.

2. Aufgabe

Recherchiere die Attribute für die Formular-Elemente und die Input-Elemente und probiere die aus, die ohne PHP-Datei funktionieren.

3. Aufgabe

Recherchiere zu XML und XHTML