hosted by
netcup.com
 
Navigation 
StartseiteStartseite
NeuigkeitenNeuigkeiten
ArtikelArtikel
ToolsTools
DownloadsDownloads
GästebuchGästebuch
Formular (5 Einträge)
WissenWissen
KontaktKontakt
 

Memory 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Play it again, Sam. 

Artikel zum Thema HTML  
 

Moderne Eingabeelement


Image Input
Mit HTML5 wurde das Input-Element grund­le­gend mo­der­ni­siert. Es kamen zahlreiche neue Ein­ga­be­ty­pen hin­zu, die auf speziellen Ge­rä­ten (wie Smart­phones) au­to­ma­ti­sche Ta­sta­tur-Lay­outs auf­ru­fen und native Va­li­die­run­gen mit­brin­gen.

Mit HTML5 ist die Verwendung einer Reihe neuer Ein­ga­be­typen für E-Mails, URLs, Zahlen, Wertebereiche, Datum- und Zeitangaben, Telefonnummern, Suchtexte und sogar für Color-Picker möglich geworden.

Bei allen <input>-Elementen können u.a. auch die fol­gen­den verwendet werden.

name für den Schlüssel im übermittelten Formular.
id für die eindeutige Identifizierung (z.B. in Kom­bi­na­ti­on mit CSS oder Ja­va­Script).
required, damit das Eingabefeld ausgefüllt werden muss, bevor das Formular abgeschickt wird.
value für den initialen oder aktuellen Wert des Input-Elements.
disabled, damit das Eingabefeld deaktiviert ist, also nicht anklickbar und nicht editierbar ist.
readonly damit das Eingabefeld nur lesbar und nicht änderbar ist.
title für eine beschreibende Information, die oft als Tooltip angezeigt wird, wenn man mit der Maus darüber fährt.

Diese Attribute werden in den folgenden Beispielen nur berücksichtigt, wenn sie relevant sind.

TypeBeschreibungHTMLErklärung
EmailEmail wird verwendet, um dem Benutzer das Ein­ge­ben und Be­ar­bei­ten einer E-Mail-Adres­se oder einer Liste von E-Mail-Adressen zu ermöglichen. Der Ein­ga­be­wert wird au­to­ma­tisch validiert, um si­cher­zu­stel­len, dass er ent­we­der leer ist oder eine kor­rekt formatierte E-Mail-Adresse (oder Liste von Adressen) ent­hält, bevor das Formular gesendet werden kann.
<input
   type="email"
   size="30"
   multiple
>
size:
Breite in Zeichen (Standard­wert ist 20)
multiple:
kommagetrennte Liste von E-Mail Adressen erlaubt
UrlUrl wird verwendet, um dem Benutzer das Ein­ge­ben und Be­ar­bei­ten einer URL zu er­mög­li­chen. Der Ein­ga­be­wert wird au­to­ma­tisch validiert, um si­cher­zu­stel­len, dass er ent­we­der leer ist oder eine kor­rekt formatierte, absolute URL-Adresse ent­hält, be­vor das Formular gesendet werden kann. Die Adresse muss nicht zwingend existieren.
<input
   type="url"
   size="30"
>
size:
Breite in Zeichen (Standard­wert ist 20)
TelTel wird verwendet, um dem Benutzer das Ein­ge­ben und Be­ar­bei­ten einer Te­le­fon­num­mer zu er­mög­li­chen. Im Un­ter­schied zu Email und Url wird der Ein­ga­be­wert nicht au­to­ma­tisch auf ein bestimmtes For­mat validiert.
<input
   type="tel"
   size="30"
>
size:
Breite in Zeichen (Standard­wert ist 20)
SearchSearch kann für eine Such­an­fra­ge verwendet werden. Sie sind funk­tio­nal identisch mit Text, können jedoch vom User Agent unterschiedlich gestylt werden.
<input
   type="search"
   size="30"
>
size:
Breite in Zeichen (Standard­wert ist 20)
NumberNumber wird verwendet, um dem Benutzer die Ein­ga­be ei­ner Zahl zu er­mög­li­chen. Sie beinhaltet eine eingebaute Va­li­die­rung, um nicht-nu­me­ri­sche Ein­ga­ben abzulehnen. Brow­ser, die Number nicht un­ter­stützen, be­han­deln 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
(Standard­wert ist 1)
RangeEin Range lässt den Be­nut­zer einen numerischen Wert an­ge­ben, der nicht kleiner als ein ge­ge­be­ner Wert und nicht grö­ßer als ein anderer ge­ge­be­ner Wert sein darf. Dies wird ty­pi­scher­weise mit einem Schie­be­reg­ler oder einem Dreh­reg­ler dargestellt, an­statt eines Text­ein­ga­be­fel­des wie bei Num­ber. Der aktuelle Wert wird bei Range aber nicht an­ge­zeigt. Brow­ser, die Number nicht un­ter­stützen, be­han­deln 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
(Standard­wert ist 1)
     
OutputOutput wird verwendet, um das Ergebnis einer von einem Script ausgeführten Berechnung darzustellen. Der Output-Wert wird nicht an den Server über­tra­gen. Dafür könnte man ein zusätzliches Hidden verwenden, dessen Wert das Script parallel ak­tu­a­li­siert.
<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
+=
WeekWeek erstellt ein Ein­ga­be­feld, das es dem Benutzer er­mög­licht, ein Jahr und eine Wo­chen­num­mer ein­zu­ge­ben. Das Er­schei­nungs­bild der Da­tums­aus­wahl variiert je nach Brow­ser und Be­triebs­sy­stem. Der re­sul­tie­ren­de Wert ent­hält das Jahr und die Wo­chen­num­mer. Der Wert wird in das For­mat YYYY-Www nor­ma­li­siert. Brow­ser, die Week nicht un­ter­stützen, be­han­deln es als Text.
<input
   type="week"
   min="2025-W20"
   max="2025-W30"
   value="2025-W25"
>
min:
kleinste Wochennummer
max:
größte Wochennummer
value:
Standardwert
MonthMonth erstellt ein Ein­ga­be­feld, das es dem Benutzer er­mög­licht, ein Datum ein­zu­ge­ben. Das Er­schei­nungs­bild der Da­tums­aus­wahl variiert je nach Brow­ser und Be­triebs­sy­stem. Der re­sul­tie­ren­de Wert ent­hält das Jahr und den Monat, aber nicht den Tag. Der Wert wird in das For­mat YYYY-MM nor­ma­li­siert. Brow­ser, die Month nicht un­ter­stützen, be­han­deln es als Text.
<input
   type="month"
   min="2025-01"
   max="2025-12"
   value="2025-01"
>
min:
kleinstes Datum
max:
größtes Datum
value:
Standardwert
DateDate erstellt ein Ein­ga­be­feld, das es dem Benutzer er­mög­licht, ein Datum ein­zu­ge­ben. Das Er­schei­nungs­bild der Da­tums­aus­wahl variiert je nach Brow­ser und Be­triebs­sy­stem. Der re­sul­tie­ren­de Wert ent­hält das Jahr, den Mo­nat und den Tag, aber nicht die Zeit. Der Wert wird in das For­mat YYYY-MM-DD nor­ma­li­siert.
<input
   type="date"
   min="2025-01-01"
   max="2025-12-31"
   value="2025-01-01"
>
min:
kleinstes Datum
max:
größtes Datum
value:
Standardwert
DatetimeDatetime erstellt ein Ein­ga­be­feld, das es dem Benutzer er­mög­licht, ein Datum und eine Uhrzeit ein­zu­ge­ben. Das Er­schei­nungs­bild der Da­tums- und Zeit­aus­wahl variiert je nach Brow­ser und Be­triebs­sy­stem. Der re­sul­tie­ren­de Wert ent­hält das Jahr, den Mo­nat, den Tag, die Stunde und die Minute. Der Wert wird in das For­mat YYYY-MM-DDThh:mm nor­ma­li­siert.
<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
TimeTime erstellt ein Ein­ga­be­feld, das es dem Benutzer er­mög­licht, ein eine Uhr­zeit ein­zu­ge­ben. Das Er­schei­nungs­bild der Da­tums- und Zeit­aus­wahl va­ri­iert je nach Brow­ser und Be­triebs­sy­stem. Der re­sul­tie­ren­de Wert ent­hält die Stunde, die Minute und optional die Se­kun­de. Der Wert wird in das For­mat hh:mm:ss bzw. hh:mm nor­ma­li­siert. Die Se­kun­den werden angezeigt, wenn der Wert von value Sekunden enthält bzw. der Wert von step kein Viel­fa­ches 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
(Standard­wert ist 60)
          
ColorColor bietet einem Be­nut­zer die Möglichkeit, eine Farbe anzugeben, ent­we­der durch Verwendung ei­ner visuellen Farb­aus­wahl­ober­fläche oder durch Ein­gabe der Farbe als Text im CSS-Farbwertformat.
<input
   type="color"
   value="#ff0000"
>
value:
Standardfarbe
ImageImage wird verwendet, um ei­ne grafische Ab­sen­de-Schalt­flä­che anstelle einer mit Text be­schrif­te­ten zu erstellen. Image akzeptiert kein value-At­tribut. Der Pfad zu dem an­zu­zei­gen­den 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
     
© webman-company, 31. Juli 2026
Weiterführende Informationen


Ihr Kommentar *
(es stehen 1000 Zeichen zur Verfügung)
0 / 1000

Zur Vermeidung von Missbrauch klicken Sie bitte auch die genannten Zahlen vor dem Absenden an.

Bitte 1 und 2 anklicken: 1 2 3  
 
DATENSCHUTZ
Ich stimme zu, dass mein Name und mein Kommentar zu diesem Artikel sowie Datum und Uhrzeit öffentlich sichtbar sind. Sollte ich die Entfernung meines Kommentars wünschen, werde ich mich an office@webman-company.de wenden.


*) Ihr erster Kommentar wird nicht sofort veröffentlicht.
 
Aktuelle Fragen   

Fragen über Fragen

Ist ein Raumschiff, das ausschließlich mit Frauen besetzt ist, eigentlich unbemannt? 
Warum muss man auf 'Start' drücken, um Windows zu beenden? 
Wie lange muss eine Katze trainieren, um ein Muskelkater zu werden? 
Darf man mit Hosen zu einem Rockkonzert? 
Sind Buttermesser eigentlich Streichinstrumente? 
 
 
Gedicht des Tages

Schlachtfeld

Schollenmürbe schläfert ein das Eisen
Blute filzen Sickerflecke
Roste krumen
Fleische schleimen
Saugen brünstet um Zerfallen.
Mordesmorde
Blinzen
Kinderblicke.

(August Stramm, 1915)
Infografik: Wie viel Traffic wird von Bots verursacht? | Statista Mehr Infografiken finden Sie bei Statista
Infografik: Was sind die größten Frust-Faktoren bei der Datensuche mit KI? | Statista Mehr Infografiken finden Sie bei Statista

Ihre Zeit 

 

Besucherstatistik 
0
Besucher

3.976.471 Seitenabrufe
(seit November 2006)
 

Ihr Client 
 

KalenderKalender 
August 2026
Mo Di Mi Do Fr Sa So
         
3
2006: Muttur-Massaker
2020: Explosion im Hafen von Beirut
4
5
1806: Ende des Heiligen Römischen Reichs Deutscher Nation
1945: Abwurf der ersten Atombombe
Letztes Mondviertel
Hiroshima: Verbrechen gegen die Menschlichkeit
Verklärung des Herrn
6
7
1945: Abwurf der zweiten Atombombe
Nagasaki: Verbrechen gegen die Menschlichkeit
9
10
1904: Schlacht am Waterberg
Microsoft Patchday
Welt-Krill-Tag
11
12
1961: Bau der Berliner Mauer
1980: Gesetz über die Gleichbehandlung von Männern und Frauen am Arbeitsplatz
13
14
1096: Erster Kreuzzug
Mariä Himmelfahrt
15
17
18
2013: Whistleblower Bradley Man­ning
21
22
1887: Made in Germany
2019: Tiergartenmord
23
1572: Bartholomäusnacht
Tag des Messers
24
25
26
27
29
30
31
           

iCalendar
 

 
© 2006-2026 webman-company (Berlin, 27.07.2026)
 
 
Bitte haben Sie einen Augenblick Geduld.

Bitte warten


schließen