정의 및 사용 방법
<input>
태그의 type="time"
은 사용자가 시간을 쉽게 입력할 수 있도록 시간 선택 인터페이스를 제공하는 입력 필드를 나타냅니다.
이 필드는 유효성 검사 기능을 통해 잘못된 시간 형식이나 불가능한 시간 입력(예: '12시 반', '오후 3시')을 방지합니다.
기본 예제
<label for="user-time">시간 선택</label>
<input type="time" id="user-time">
시간 선택 인터페이스는 브라우저와 운영 체제에 따라 다르게 표시될 수 있습니다. 하지만, 기능은 동일합니다.
입력되는 시간 형식은 어떻게 되나요?
HH:mm
또는 step
속성을 사용해서 HH:mm:ss
<input type="time">
에 입력되는 시간 형식은 0이 붙은 24시간 형식으로 HH:mm
입니다.
그리고 추가적으로 초(seconds) 단위까지 입력하고 싶다면 step
속성을 사용하여 HH:mm:ss
형식으로 확장할 수 있습니다.
이는 시(Hour), 분(Minute), 초(Seconds)을 의미하며, 국제 표준 ISO 8601에 따라 날짜를 일관되게 표현합니다.
기본 형식
HH:mm
으로 0이 붙은 24시간 형식의 시:분. 예를 들어 09:30
, 15:45
와 같이 입력됩니다.
다음은 value
속성을 사용하여 기본값으로 표시할 시간을 HH:mm
형식으로 설정한 예시입니다.
<input type="time" value="09:30">
위 예제에서 시간은 "오전 09시: 30분"을 의미하며, 이 형식이 표준화되어 있어 지역에 상관없이 시간을 동일하게 표현할 수 있습니다.
초까지 포함하려면
step
속성을 이용하면 초 단위까지 입력할 수 있는 HH:mm:ss
형식을 구현할 수 있습니다. 예를 들어, 09:30:45
, 15:45:00
과 같이 입력할 수 있습니다. 자세한 설명은 입력 필드에 초(seconds)까지 입력하고 싶다면을 참고하세요.
관련 속성 사용하기
속성 | 설명 |
---|---|
step |
사용자가 입력 가능한 시간(초 단위) 간격을 지정합니다. |
value |
사용자가 아무런 입력을 하지 않을 때 처음 표시되는 시간을 지정합니다. |
min |
사용자가 선택할 수 있는 가장 첫 번째 시간을 지정합니다. |
max |
사용자가 선택할 수 있는 가장 마지막 시간을 지정합니다. |
readonly |
사용자가 컨트롤을 변경 혹은 편집할 수 없게 만듭니다. |
step
속성
사용자가 입력 가능한 시간(초 단위) 간격을 지정합니다.
사용자가 정해진 초 단위 간격에 따라 시간을 선택하도록 제한할 수 있습니다. 지정하면 사용자는 간격에 맞는 시간만 선택할 수 있습니다.
기본값 및 옵션
- 숫자(1 초 간격은
1
, 2 초 간격은2
, 3 초 간격은3
...) 또는any
를 지정할 수 있습니다. - 기본값:
60
(60 초 간격으로 선택 가능) any
: 날짜를 선택할 때 간격에 대한 제한이 없어집니다. 단순히step
속성을 생략하는 것과 동일한 결과를 가져옵니다.any
값을 사용하는 것보다는 코드의 간결성을 위해step
속성을 생략하는 편이 좋습니다.
입력 필드에 초(seconds)까지 입력하고 싶다면
<input type="time">
에 입력되는 시간 형식은 0이 붙은 24시간 형식으로 HH:mm
입니다.
그리고 추가적으로 초(seconds) 단위까지 입력하고 싶다면 step
값을 60으로 나누었을 때 나머지가 발생하도록 하세요. step
값이 60이면 1 분에 해당합니다. step
값이 60의 배수이면 분 단위까지만 입력 받는 형식(HH:mm
)이 되며, step
값을 60으로 나누었을 때 나머지가 발생하면 초 단위까지 입력할 수 있는 HH:mm:ss
형식이 됩니다. 예를 들어, 09:30:45
, 15:45:00
과 같이 입력할 수 있습니다.
step="60"
,step="120"
: 초 단위 없이 분 단위(HH:mm
) 까지만 허용.step="1"
,step="30"
: 초 단위 입력 가능, 형식은HH:mm:ss
.
예제를 통해 살펴보겠습니다.
<label for="user-time-1">분 단위까지 선택</label>
<input type="time" id="user-time-1" step="120"> <!-- 120은 60의 배수 -->
<hr>
<label for="user-time-2">초 단위까지 선택</label>
<input type="time" id="user-time-2" step="1"> <!-- 1은 60으로 나누었을 때 나머지가 발생 -->
사용 Tip
- 초 단위 입력이 필요하지 않으면
step
값을 60의 배수로 설정하세요. - 초 단위 입력이 필요하면
step
값을 60으로 나누었을 때 나머지가 발생하도록 설정하세요.
value
속성
기본값을 설정합니다.
사용자가 아무런 입력을 하지 않을 때 처음 표시되는 시간을 지정합니다.
시간은 분 단위까지만 설정하려면 HH:mm
형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss
형식으로 입력합니다.
예제를 통해 살펴보겠습니다.
<label for="user-time-1">분 단위까지 설정</label>
<input type="time" id="user-time-1" value="09:30">
<hr>
<label for="user-time-2">초 단위까지 설정</label>
<input type="time" id="user-time-2" step="1" value="09:30:15">
min
속성
선택할 수 있는 허용 가능한 최소 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 첫 번째 시간을 지정합니다.
시간은 분 단위까지만 설정하려면 HH:mm
형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss
형식으로 입력합니다.
주의할 점
기본적으로, 브라우저에서 <input type="time">
은 min
속성에 대한 유효성 검사 기능을 제공하지 않습니다.
즉, 사용자는 min
속성으로 지정한 최소 시간보다 이전의 시간을 입력할 수 있습니다.
다음의 예제로 확인해 보세요.
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" min="09:30" value="09:45">
이 속성대로라면 사용자는 09:30 이전의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 유효성 검사는 자동으로 적용되지 않기 때문에 09:15
와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.
만약 min
속성에 설정된 값을 실제로 검증하고 싶다면, 자바스크립트를 사용하여 입력 값의 유효성 검사를 처리해야 합니다. 중요한 입력이라면 반드시 서버측 언어에서 입력값에 대한 유효성 검사를 추가로 진행해야 합니다.
max
속성
선택할 수 있는 허용 가능한 최대 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 시간을 지정합니다.
시간은 분 단위까지만 설정하려면 HH:mm
형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss
형식으로 입력합니다.
주의할 점
기본적으로, 브라우저에서 <input type="time">
은 max
속성에 대한 유효성 검사 기능을 제공하지 않습니다.
즉, 사용자는 max
속성으로 지정한 최대 시간보다 이후의 시간을 입력할 수 있습니다.
다음의 예제로 확인해 보세요.
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" max="10:00" value="09:45">
이 속성대로라면 사용자는 10:00시 이후의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 유효성 검사는 자동으로 적용되지 않기 때문에 11:15
와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.
만약 max
속성에 설정된 값을 실제로 검증하고 싶다면, 자바스크립트를 사용하여 입력 값의 유효성 검사를 처리해야 합니다. 중요한 입력이라면 반드시 서버측 언어에서 입력값에 대한 유효성 검사를 추가로 진행해야 합니다.
readonly
속성
readonly
속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.
주로 value
속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.
하지만, 이 속성은 value
를 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.
<input type="time" value="09:45" readonly>
이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!
접근성 고려 사항
<input type="time">
을 사용할 때에는 <label>
을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
<input type="time">
|
20 | 12 | 57 | 14.1 |
명세서
명세서 사양 | |
---|---|
<input type="time">
|
HTML Standard #time-state-(type=time) |