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
  • Leer
  • Edge
  • Opera
  • Safari

Details: caniuse.com

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

Bei mobilen Geräten wird ein Datumsfeld oder sogar der Kalender direkt geöffnet.

type = "datetime-local"[Bearbeiten]

Mit input type="datetime-local" können Sie eine Datumseingabe mit einer Zeitangabe ohne Zeitzone kombinieren.

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

Details: caniuse.com

Beispiel: Datumseingabe mit type="datetime-local"
<label>
    Geben Sie Ihr Geburtsdatum und -Zeit ein: 
    <input type="datetime-local" name="geburtsdatum" placeholder="1999-12-24T06:39:57">
</label>


Beachten Sie: input type="datetime", mit dem eine Datumseingabe mit einer Zeitangabe (+ Zeitzone) kombiniert wurde, ist mittlerweile wieder obsolet, da es von den Browserherstellern nicht implementiert wurde.

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"
<label>
    Geben Sie bitte Jahr und Woche ein: 
    <input type="week" name="JahrKW" placeholder="1999-w51">
</label>

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 Jahreszahl mit Monatsangabe kombinieren.

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

Details: caniuse.com

Beispiel: Datumseingabe mit type="month"
<label>
    Geben Sie Jahr (vierstellig) und Monat (zweistellig) ein: 
    <input type="month" placeholder="2014-05">
</label>


type = "time"[Bearbeiten]

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

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

Details: caniuse.com

Beispiel: Uhrzeiteingabe mit type="time"
<label>
    Geben Sie bitte die gewünschte Uhrzeit ein: 
    <input type="time" name="UhrZeit" placeholder="23:59:59">
</label>

Bei mobilen Geräten wird das Nummernfeld eingeblendet.

Weblinks[Bearbeiten]