HTML/Formulare/input/time

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche

HTML5 bietet eine Vielzahl von neuen Eingabe-Typen für Datums- und Zeitangaben. Bei mobilen Geräten wird dann ein Nummernfeld eingeblendet, das die Eingabe erleichtert.

Falls ein älterer Browser diese nicht kennt, erscheint ein normales Eingabefeld vom type="text", dass die Eingabe eines Datums ebenfalls zulässt, dann aber nicht vom Browser geprüft wird, sondern erst vom Server validiert werden muss.

type = "date"[Bearbeiten]

Mit input type="date" können Sie Datumseingaben abfragen.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Datumseingabe mit type="date" ansehen …
<label>
    Geben Sie Ihr Geburtsdatum ein: 
    <input type="date" id="gebdat">
</label>

Die Gestaltung des Eingabefeldes und die Auswahl des Datums unterscheidet sich von Browser zu Browser. In der Regel wird eine Kalenderdarstellung zur Auswahl des Datums angeboten.

type = "datetime-local"[Bearbeiten]

Mit input type="datetime-local" können Sie eine Datumseingabe mit einer Zeitangabe ohne Zeitzone kombinieren. Dabei wird die Zeitzone des Nutzers verwendet.

  • HTML5
  • Chrome
  • Leer
  • Edge
  • Opera
  • Leer

Details: caniuse.com

Beispiel: Datumseingabe mit type="datetime-local" ansehen …
<label>
    Geben Sie Ihr Geburtsdatum und -Uhrzeit ein: 
    <input type="datetime-local" name="geburtsdatum">
</label>

Die Gestaltung des Eingabefeldes und die Auswahl von Datum und Uhrzeit unterscheidet sich von Browser zu Browser. In der Regel wird eine Kalenderdarstellung zur Auswahl des Datums angeboten.

Beachten Sie: input type="datetime", mit dem eine Datumseingabe mit einer Zeitangabe (+ Zeitzone) kombiniert wurde, ist mittlerweile wieder obsolet
Da das Format type="datetime-local" z.B. vom Firefox nicht unterstützt wird, ist es empfehlenswert, Datum und Uhrzeit getrennt abzufragen.

type = "week"[Bearbeiten]

Mit input type="week" können Sie eine Wochenangabe abfragen.

  • HTML5
  • Chrome
  • Leer
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Wocheneingabe mit type="week" ansehen …
<label>
    Geben Sie bitte Jahr und Woche ein: 
    <input type="week" name="JahrKW">
</label>

Die Gestaltung des Eingabefeldes und die Auswahl des Datums unterscheidet sich von Browser zu Browser. In der Regel wird eine Kalenderdarstellung zur Auswahl des Datums angeboten.

Attribute

Folgende Angaben sind möglich:

  • list: Angabe mehrerer Optionen in Verbindung mit <datalist>
  • value: erwartet einen String in dieser Reihenfolge:
    • vierstellige Jahresangabe
    • den String "w-"
    • die zweistellige Angabe der Woche (max ist je nach Jahr 52 oder 53)

type = "month"[Bearbeiten]

Mit input type="month" können Sie eine Monatsangabe mit einer Jahreszahl kombinieren.

  • HTML5
  • Chrome
  • Leer
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Datumseingabe mit type="month" ansehen …
<label>
    Geben Sie bitte Monat und Jahr ein: 
    <input type="month" name="monat">
</label>

Die Gestaltung des Eingabefeldes und die Auswahl des Datums unterscheidet sich von Browser zu Browser. In der Regel wird eine Kalenderdarstellung zur Auswahl des Datums angeboten.

type = "time"[Bearbeiten]

Mit input type="time" können Sie eine Uhrzeit abfragen.

  • HTML5
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Uhrzeiteingabe mit type="time" ansehen …
<label>
    Geben Sie bitte die Uhrzeit ein:
    <input type="time" name="uhrzeit">
</label>

Die Gestaltung des Eingabefeldes und die Auswahl der Zeit unterscheidet sich von Browser zu Browser.

Weblinks[Bearbeiten]