HTML Time Input: 24-Hour Values, min, max, step, and Seconds

HTML input type="time" accepts a time of day. Even if the interface displays AM/PM, the value is generally a 24-hour string such as 09:30, or 13:10:20 when seconds are included. min/max set bounds, and step sets intervals in seconds.

Distinguish display format from value

The input UI varies by operating system, browser, and user language. Do not expect every dropdown or picker to look alike. Put a valid string such as 13:30 in the initial value, not localized display text such as 1:30 PM. Set the initial value with the value attribute and read the current user selection through input.value.

A time value has no date or time zone. It cannot tell you whether 9 a.m. means Seoul or another location. For a booking that identifies an actual instant, collect the date and reference time zone too and interpret them consistently on the server. For a duration such as 90 minutes, choose a suitable format such as a numeric minute count instead of reusing a time-of-day control.

Set bounds and intervals

Intervals use a valid min as the preferred base, otherwise a valid HTML value attribute, or midnight if neither exists. For min="09:00" step="900", 09:00, 09:15, and 09:30 are valid, but 09:10 does not fit. This does not determine available booking slots or closed days; implement service rules separately.

Complete example: 15-minute intervals and seconds

Save this code as time.html and open it in a browser. No server is needed to check validation and submitted values. The second input explicitly uses step="1" to allow seconds.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Time ranges and second-level input</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 16px 0 6px; }
    input { max-width: 100%; box-sizing: border-box; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Select a time</h1>
  <form id="demo">
    <label for="meeting">Meeting time (09:00–18:00, 15-minute steps)</label>
    <input id="meeting" name="meeting" type="time"
      min="09:00" max="18:00" step="900" value="09:30" required>
    <label for="checkpoint">Checkpoint time (13:00–15:00, one-second steps)</label>
    <input id="checkpoint" name="checkpoint" type="time"
      min="13:00:00" max="15:00:00" step="1" value="13:10:20" required>
    <p><button type="submit">Show submitted values</button>
      <button type="reset">Reset</button></p>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('input', () => { result.textContent = ''; });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Submit initially: meeting is 09:30 and checkpoint is 13:10:20. The output is in 24-hour format even if the UI uses AM/PM.
2. Set the meeting time to 08:45 to fail range validation. 09:10 is within the range but fails the 15-minute step. 09:45 submits successfully.
3. Clear the meeting time completely and submit to check required validation. Restore a valid time, then change the seconds in the second input to compare second-level output.
4. Change only checkpoint’s step="1" to step="60" and reopen the file. Initial 13:10:20 is 20 seconds off the one-minute steps from 13:00:00 and is invalid. Restore step to 1 afterward.
5. Reset restores meeting to 09:30 and checkpoint to 13:10:20.

Ranges across midnight and server validation

Time inputs can express a range across midnight. For example, min="22:00" max="02:00" means 10 p.m. through midnight to 2 a.m. It is not an interval containing actual dates, so it does not automatically select the next day’s date. Check support for this validation in your target browsers and implement the same rules on the server.

Do not substitute the browser’s picker or validation messages for server validation. The server must check the received string’s format, range, and step and combine it with the required date, time zone, and booking availability. %3A in a GET URL is an encoded colon; parsing the form value normally yields a string such as 09:30.

If you also need a date, see date input values and range settings. The MDN time input reference explains time formats and attributes.