HTML input type="time"

The <input type="time"> element allows users to easily enter a specific time such as "09:30" through an input field. It presents the user with a text box with small arrows to increase or decrease the value currently shown. This value can include the hours, minutes and optionally the seconds.

The HTML input type "time" allows users to enter hours and minutes in either 12-hour or 24-hour format, depending on their system settings. This input type is supported by Chrome and Opera and these browsers have a device that allows the user to increase and reduce the currently chosen component. Additionally, some versions provide a button labeled "X" which allows users to clear any value that has been entered.

Here are some examples of HTML code using the input type time:

<label for="event-time">Event Time:</label>
<input type="time" id="event-time" name="event-time">
<label for="reminder-time">Reminder Time:</label>
<input type="time" id="reminder-time" name="reminder-time" value="09:00">
<label for="booking-time">Booking Time:</label>
<input type="time" id="booking-time" name="booking-time" min="08:00" max="17:00">

This code creates an input field for selecting a time, labeled "Booking Time", with minimum and maximum values set to 8:00 AM and 5:00 PM, respectively. This ensures that the user cannot select a time outside of this range.