Time Input

<input type="time"> gives users a native time picker — the clock-based counterpart to type="date".

Syntax

<input type="time" name="appointment-time" min="09:00" max="18:00">

Basic Example

<label for="slot">Preferred Demo Class Time</label>
<input type="time" id="slot" name="slot">

Browser output: a field showing hours and minutes (often with an AM/PM selector depending on locale), with an icon opening a native time-selection UI.

How It Works

Like type="date", the submitted value always uses a fixed, unambiguous format regardless of the visible display: HH:MM in 24-hour time (e.g. 14:30 for 2:30 PM).

Important Attributes

Real-World Example

<label for="demo-time">Preferred Demo Class Time</label>
<input type="time" id="demo-time" name="demo-time" min="09:00" max="20:00">

Restricting demo class bookings to CodingNow's actual live-class hours — the picker itself won't let users select outside that window.

Common Mistakes

• Writing min/max in 12-hour format ("9:00 AM") instead of the required 24-hour HH:MM
• Not accounting for time zones — a plain time input has no concept of which time zone the value refers to; that context has to be handled separately if it matters

Best Practices

• Always write min/max in 24-hour HH:MM format
• If time zone matters to your application, communicate it clearly in the surrounding label/text, since the input itself carries no such information

Accessibility Considerations

Native and keyboard-navigable out of the box, same as type="date" — a real advantage over most custom-built time pickers.

SEO Considerations

No direct ranking effect.

Browser & Modern HTML Notes

Exact picker UI (a scroll wheel, a dropdown, a text-entry format) varies by browser and operating system, just like type="date".

Mini Practice

1. Build a time field restricted to a 9 AM–6 PM booking window.
2. Convert "2:30 PM" to the correct 24-hour format needed for a time input's value.

Related HTML Notes

• date-input
• min-max