> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000. **Min, Max:** Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) **in (Deinem) Javascript keine Reaktion auf min oder max** - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.** Abhilfe schafft das Ausühren des Javascriptes "onsubmit". **Meine Meinung zum empfohlenen Vorgehen:** In Summa würde ich bei zwei Inputs für Integers bleiben, Doppelpunkt dazwischen notieren und "onkeypress" den Value des Minuten-Inputs prüfen, den Doppelpunkt ggf. löschen und das Feld wechseln wenn der Doppelpunkt eingegeben wurde oder zwei Ziffern drin stehen. Minimum und Maximum in Javascript und/oder serverseitig prüfen.

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000. **Min, Max:** Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) **in (Deinem) Javascript keine Reaktion auf min oder max** - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.** Abhilfe schafft das Ausühren des Javascriptes "onsubmit". In Summa würde ich bei zwei Inputs für Integers bleiben, Doppelpumkt dazwischen und "onkeypress" den Value des Minuten-Inputs prüfen, den Doppelpunkt ggf. löschen und das Feld wechseln wenn der da war oder zwei Ziffern drin stehen. Minimum und Maximum in Javascript und/oder serverseitig prüfen.

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000. **Min, Max:** Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) **in (Deinem) Javascript keine Reaktion auf min oder max** - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.** Abhilfe schafft das Ausühren des Javascriptes "onsubmit".

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000. **Min, Max:** Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) **in (Deinem) Javascript keine Reaktion auf min oder max** - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.**

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) **in Javascript keine Reaktion auf min oder max** - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.** [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000.

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) in Javascript keine Reaktion auf max - Ein Test mit einem zusätzlichen Button (type="submit") ergab: **der Wert wird dann beim Senden des Formulars (submit) überprüft.** [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg) Die Ausgaben sind offensichtlich in Sekunden*1000.

> ~~~html > <form> > <input type="time" name="t"> > <button type="button" id="b">Darstellen</button> > </form> > <ul> > </ul> > <script> > document.getElementById('b').addEventListener('click', function() { > let li = document.createElement('li'); > const t = this.form.t; > li.textContent = `${t.value} / ${t.valueAsNumber}`; > > document.getElementsByTagName('ul')[0].appendChild(li); > }); > </script> > ~~~ > > Auf meinem Rechner sieht das so aus: > > [](/images/72d0686c-e99b-11ed-8f58-b42e9947ef30.png) > > Die Anzeige AM/PM verdeutlicht, dass es Zeitstempel in `hh:mm` sind. Das Verhalten ändert sich **dramatisch**, wenn man man den Step setzt: ~~~HTML <input type="time" name="t" step=1 min=0 max="00:10:00" value="00:00:00"> ~~~ Allerdings habe ich dann sowohl in Chromium als auch im Firefox (beide unter Ubuntu) keine Reaktion auf max: Egal, ob ich "00:10:00", 600 oder 600000 notiere. [](/images/f144534e-e9a4-11ed-b1a8-b42e9947ef30.jpg)