HtmlHow-ToBeginner · 3 min read

How to Create Time Input in HTML: Simple Guide

Use the <input type="time"> element in HTML to create a time input field. This lets users pick a time using a browser-supported time picker or enter it manually in HH:MM format.

📐

Syntax

The basic syntax for a time input in HTML is using the <input> element with type="time". You can add attributes like name, id, value (default time), min, and max to control the input.

type="time": Defines the input as a time picker.
name: Identifies the input in forms.
value: Sets a default time in 24-hour format (HH:MM).
min and max: Set the allowed time range.

html

<input type="time" name="appointment" id="appointment" value="13:30" min="09:00" max="18:00">

Output

A time input field showing 13:30 as default, allowing times between 09:00 and 18:00.

💻

Example

This example shows a simple form with a time input where users can select a time for an appointment. The default time is set to 14:00.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time Input Example</title>
</head>
<body>
  <form>
    <label for="meeting-time">Choose a meeting time:</label>
    <input type="time" id="meeting-time" name="meeting-time" value="14:00">
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Output

A webpage with a label and a time input field set to 14:00, plus a submit button.

⚠️

Common Pitfalls

Some common mistakes when using type="time" include:

Not using the 24-hour format (HH:MM) for the value, min, and max attributes.
Expecting the time input to work the same in all browsers; some older browsers may not support it fully.
Not providing a fallback or label for accessibility.

Always test your time input on different browsers and provide clear labels.

html

<!-- Wrong: Using 12-hour format -->
<input type="time" value="2:30 PM">

<!-- Right: Using 24-hour format -->
<input type="time" value="14:30">

Output

Two time input fields: the first may not work correctly due to 12-hour format, the second works correctly with 24-hour format.

📊

Quick Reference

Attribute	Description	Example
type	Defines input as time picker
value	Sets default time in HH:MM
min	Minimum allowed time
max	Maximum allowed time
name	Name for form data
id	Unique identifier

✅

Key Takeaways

Use to create a time picker input in HTML.

Set default, minimum, and maximum times using 24-hour format (HH:MM).

Always include a label for accessibility and usability.

Test time inputs across browsers as support may vary.

Avoid 12-hour format in attributes; use 24-hour format instead.