6. Unterrichtsblock
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:
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).
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.
Attribut | Beschreibung |
---|---|
checked | Gibt an, dass ein Eingabefeld beim Laden der Seite vorausgewählt sein soll (für type="checkbox" oder type="radio" ) |
disabled | Gibt an, dass ein Eingabefeld deaktiviert werden soll |
max | Gibt den maximalen Wert für ein Eingabefeld an |
maxlength | Gibt die maximale Zeichenanzahl für ein Eingabefeld an |
min | Gibt den Mindestwert für ein Eingabefeld an |
pattern | Gibt einen regulären Ausdruck an, gegen den der Eingabewert geprüft werden soll |
readonly | Gibt an, dass ein Eingabefeld schreibgeschützt ist (kann nicht geändert werden) |
required | Gibt an, dass ein Eingabefeld erforderlich ist (muss ausgefüllt werden) |
size | Gibt die Breite (in Zeichen) eines Eingabefelds an |
step | Gibt die zulässigen Nummernintervalle für ein Eingabefeld an |
value | Gibt 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