Type Beschreibung HTML Erklärung Email Email wird verwendet, um dem Benutzer das Eingeben und Bearbeiten einer E-Mail-Adresse oder einer Liste von E-Mail-Adressen zu ermöglichen. Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer ist oder eine korrekt formatierte E-Mail-Adresse (oder Liste von Adressen) enthält, bevor das Formular gesendet werden kann.
<input
type="email"
size="30"
multiple
>size :
Breite in Zeichen (Standardwert ist 20)
multiple :
kommagetrennte Liste von E-Mail Adressen erlaubt
Url Url wird verwendet, um dem Benutzer das Eingeben und Bearbeiten einer URL zu ermöglichen. Der Eingabewert wird automatisch validiert, um sicherzustellen, dass er entweder leer ist oder eine korrekt formatierte, absolute URL-Adresse enthält, bevor das Formular gesendet werden kann. Die Adresse muss nicht zwingend existieren.
<input
type="url"
size="30"
>size :
Breite in Zeichen (Standardwert ist 20)
Tel Tel wird verwendet, um dem Benutzer das Eingeben und Bearbeiten einer Telefonnummer zu ermöglichen. Im Unterschied zu Email und Url wird der Eingabewert nicht automatisch auf ein bestimmtes Format validiert.
<input
type="tel"
size="30"
>size :
Breite in Zeichen (Standardwert ist 20)
Search Search kann für eine Suchanfrage verwendet werden. Sie sind funktional identisch mit Text, können jedoch vom User Agent unterschiedlich gestylt werden.
<input
type="search"
size="30"
>size :
Breite in Zeichen (Standardwert ist 20)
Number Number wird verwendet, um dem Benutzer die Eingabe einer Zahl zu ermöglichen. Sie beinhaltet eine eingebaute Validierung, um nicht-numerische Eingaben abzulehnen. Browser, die Number nicht unterstützen, behandeln es als Text.
<input
type="number"
min="10"
max="90"
value="40"
step="10"
>min :
kleinste Zahl
max :
größte Zahl
value :
Standardwert
step :
Schrittweite
(Standardwert ist 1)
Range Ein Range lässt den Benutzer einen numerischen Wert angeben, der nicht kleiner als ein gegebener Wert und nicht größer als ein anderer gegebener Wert sein darf. Dies wird typischerweise mit einem Schieberegler oder einem Drehregler dargestellt, anstatt eines Texteingabefeldes wie bei Number. Der aktuelle Wert wird bei Range aber nicht angezeigt. Browser, die Number nicht unterstützen, behandeln es als Text.
<input
type="range"
min="10"
max="90"
value="40"
step="10"
>
<input
type="range"
min="10"
max="90"
value="40"
step="10"
style="accent-color: red;"
>min :
kleinste Zahl
max :
größte Zahl
value :
Standardwert
step :
Schrittweite
(Standardwert ist 1)
Output Output wird verwendet, um das Ergebnis einer von einem Script ausgeführten Berechnung darzustellen. Der Output-Wert wird nicht an den Server übertragen. Dafür könnte man ein zusätzliches Hidden verwenden, dessen Wert das Script parallel aktualisiert.
<form
oninput="
x.value = parseInt(a.value) +
parseInt(b.value)"
>
<input
type="range"
id="a"
value="50"
> +
<input
type="number"
id="b"
value="25"
> =
<output
id="c"
for="a b"
></output>
</form>oninput :
beim Schreiben Script ausführen
type :
Inputtype
for :
verwendete Elemente im Script
+ = Week Week erstellt ein Eingabefeld, das es dem Benutzer ermöglicht, ein Jahr und eine Wochennummer einzugeben. Das Erscheinungsbild der Datumsauswahl variiert je nach Browser und Betriebssystem. Der resultierende Wert enthält das Jahr und die Wochennummer. Der Wert wird in das Format YYYY-Www normalisiert. Browser, die Week nicht unterstützen, behandeln es als Text.
<input
type="week"
min="2025-W20"
max="2025-W30"
value="2025-W25"
>min :
kleinste Wochennummer
max :
größte Wochennummer
value :
Standardwert
Month Month erstellt ein Eingabefeld, das es dem Benutzer ermöglicht, ein Datum einzugeben. Das Erscheinungsbild der Datumsauswahl variiert je nach Browser und Betriebssystem. Der resultierende Wert enthält das Jahr und den Monat, aber nicht den Tag. Der Wert wird in das Format YYYY-MM normalisiert. Browser, die Month nicht unterstützen, behandeln es als Text.
<input
type="month"
min="2025-01"
max="2025-12"
value="2025-01"
>min :
kleinstes Datum
max :
größtes Datum
value :
Standardwert
Date Date erstellt ein Eingabefeld, das es dem Benutzer ermöglicht, ein Datum einzugeben. Das Erscheinungsbild der Datumsauswahl variiert je nach Browser und Betriebssystem. Der resultierende Wert enthält das Jahr, den Monat und den Tag, aber nicht die Zeit. Der Wert wird in das Format YYYY-MM-DD normalisiert.
<input
type="date"
min="2025-01-01"
max="2025-12-31"
value="2025-01-01"
>min :
kleinstes Datum
max :
größtes Datum
value :
Standardwert
Datetime Datetime erstellt ein Eingabefeld, das es dem Benutzer ermöglicht, ein Datum und eine Uhrzeit einzugeben. Das Erscheinungsbild der Datums- und Zeitauswahl variiert je nach Browser und Betriebssystem. Der resultierende Wert enthält das Jahr, den Monat, den Tag, die Stunde und die Minute. Der Wert wird in das Format YYYY-MM-DDThh:mm normalisiert.
<input
type="datetime-local"
min="2025-01-01T00:00"
max="2025-12-31T23:59"
value="2025-01-01T00:00"
>min :
kleinstes Datum mit Uhrzeit
max :
größtes Datum mit Uhrzeit
value :
Standardwert
Time Time erstellt ein Eingabefeld, das es dem Benutzer ermöglicht, ein eine Uhrzeit einzugeben. Das Erscheinungsbild der Datums- und Zeitauswahl variiert je nach Browser und Betriebssystem. Der resultierende Wert enthält die Stunde, die Minute und optional die Sekunde. Der Wert wird in das Format hh:mm:ss bzw. hh:mm normalisiert. Die Sekunden werden angezeigt, wenn der Wert von value Sekunden enthält bzw. der Wert von step kein Vielfaches von 60 ist.
<input
type="time"
min="00:00"
max="23:59"
value="00:00"
>
<input
type="time"
min="00:00"
max="23:59"
value="00:00"
step="10"
>
<input
type="time"
min="00:00:00"
max="23:59:59"
value="00:00:00"
step="1"
>min :
kleinste Uhrzeit
max :
größte Uhrzeit
value :
Standardwert
step :
Schrittweite in Sekunden
(Standardwert ist 60)
Color Color bietet einem Benutzer die Möglichkeit, eine Farbe anzugeben, entweder durch Verwendung einer visuellen Farbauswahloberfläche oder durch Eingabe der Farbe als Text im CSS-Farbwertformat.
<input
type="color"
value="#ff0000"
>value :
StandardfarbeImage Image wird verwendet, um eine grafische Absende-Schaltfläche anstelle einer mit Text beschrifteten zu erstellen. Image akzeptiert kein value-Attribut. Der Pfad zu dem anzuzeigenden Bild wird im src-Attribut angegeben. <input
type="image"
alt="Formular absenden"
>
<input
type="image"
src="/images/img_submit.png"
alt="Formular absenden"
>src :
Bildpfad
alt :
alternativer Text, wenn das Image nicht angezeigt werden kann