정의 및 사용 방법

<input> 태그의 type="time"은 사용자가 시간을 쉽게 입력할 수 있도록 시간 선택 인터페이스를 제공하는 입력 필드를 나타냅니다.

브라우저는 일반적으로 시간 선택 인터페이스를 제공하므로, 사용자가 시간을 쉽게 입력하거나 선택할 수 있습니다.

기본 예제

HTML 
<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 형식으로 설정한 예시입니다.

HTML 
<input type="time" value="09:30">
실제 적용된 모습

위 예제에서 시간은 "오전 09시: 30분"을 의미하며, 이 형식이 표준화되어 있어 지역에 상관없이 시간을 동일하게 표현할 수 있습니다.

초까지 포함하려면

step 속성을 이용하면 초 단위까지 입력할 수 있는 HH:mm:ss 형식을 구현할 수 있습니다. 예를 들어, 09:30:45, 15:45:00과 같이 입력할 수 있습니다. 자세한 설명은 입력 필드에 초(seconds)까지 입력하고 싶다면을 참고하세요.

관련 속성 사용하기

<input type="time">의 관련된 속성에 대해 알아보겠습니다.

step 속성은 사용자가 입력 가능한 시간 간격을 지정합니다. 0보다 큰 정수 또는 값의 간격(step)에 제한이 없음을 의미하는 any를 사용할 수 있습니다.
이 속성으로 지정하는 값이 시간 간격으로 작용합니다. 예를 들어, step="1"은 1초 간격으로 날짜를 조정하며, step="60"으로 설정하면 60초, 즉 1분 간격으로 시간을 선택할 수 있습니다. 아무것도 지정하지 않으면 기본값인 step="60"이 적용됩니다.

브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 시간이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

다음은 step="120"이 지정된 예제입니다.

HTML 
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" value="09:30" step="120">

<input type="time">에서 step="1"은 1초 단위 간격을 의미합니다. 따라서 step="120"은 120초(2분) 단위 간격을 의미하지만, 실제 브라우저의 인터페이스에서는 2분 단위로 정확히 선택할 수 없을 수도 있습니다.

브라우저에서 실제 표시된 모습

대부분의 브라우저는 step 값을 60으로 나누었을 때 나머지가 발생(정수가 아닌 소수 포함)하면 초 단위로, 나머지가 없으면 분 단위로 간격을 제공합니다. 즉, step 값이 60의 배수일 경우 1분 단위로만, 그 외의 경우 1초 단위로만 간격이 설정됩니다. 하지만, 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 값이 지정된 간격과 일치하는지 유효성 검사를 시행합니다.

선택된 시간이 지정된 간격과 일치하는지 브라우저가 유효성 검사에 시행하는 step 속성의 간격 기준(Step Base)은 다음과 같습니다.
min 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. value 속성이 존재하고 그 값에 오류가 없는 경우 그 값을 기준으로 맞춰진 step 속성 값의 간격이 조정됩니다. 단, 유효한 min이 설정되어 있다면 min 속성의 값을 기준으로 간격이 조정됩니다. min과 value 속성이 모두 없다면 현재 상태(State)에 맞춰 간격이 조정됩니다.

HTML 
<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으로 나누었을 때 나머지가 발생 -->
실제 적용된 모습
  • 초 단위 입력이 필요하지 않으면 step 값을 60의 배수로 설정하세요.
  • 초 단위 입력이 필요하면 step 값을 60으로 나누었을 때 나머지가 발생하도록 설정하세요.

value 속성

value 속성은 기본값을 설정합니다.
사용자가 아무런 입력을 하지 않을 때 처음 표시되는 시간을 지정합니다.

시간은 분 단위까지만 설정하려면 HH:mm 형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss 형식으로 입력합니다.

예제를 통해 살펴보겠습니다.

HTML 
<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 속성

min 속성은 선택할 수 있는 허용 가능한 최소 시간을 설정합니다.
즉, 이 값은 사용자가 선택할 수 있는 가장 첫 번째 시간을 지정합니다.

시간은 분 단위까지만 설정하려면 HH:mm 형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss 형식으로 입력합니다.

HTML 
<input type="time" value="09:45" min="09:30">
실제 적용된 모습
주의할 점

브라우저에서 제공하는 기본 UI에서는, min로 지정된 시간 이전의 시간을 사용자가 선택할 수 없도록 자동으로 제한하는 기능을 지원하지 않는 경우가 있습니다.

다음의 예제로 확인해 보세요.

HTML 
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" value="09:45" min="09:30">

이 속성대로라면 사용자는 09:30 이전의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 유효성 검사는 자동으로 적용되지 않기 때문에 09:15와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

하지만 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 시간이 지정된 최대 시간 이전인지 아닌지 유효성 검사를 시행합니다.

max 속성

max 속성은 선택할 수 있는 허용 가능한 최대 시간을 설정합니다.
이 값은 사용자가 선택할 수 있는 가장 마지막 시간을 지정합니다.

시간은 분 단위까지만 설정하려면 HH:mm 형식으로 입력하고, 초 단위까지 설정하려면 HH:mm:ss 형식으로 입력합니다.

주의할 점

브라우저에서 제공하는 기본 UI에서는, max로 지정된 시간 이후의 시간을 사용자가 선택할 수 없도록 자동으로 제한하는 기능을 지원하지 않는 경우가 있습니다.

다음의 예제로 확인해 보세요.

HTML 
<label for="user-time">시간 선택</label>
<input type="time" id="user-time" value="09:45" max="10:00">

이 속성대로라면 사용자는 10:00시 이후의 시간을 선택하거나 입력할 수 없습니다. 그러나, 기본적으로 브라우저에서 유효성 검사는 자동으로 적용되지 않기 때문에 11:15와 같은 값도 입력할 수 있는 경우가 있을 수 있습니다.

실제 적용된 모습

하지만 브라우저는 폼 제출 시, 해당 요소에 입력되거나 선택된 시간이 지정된 최대 시간 이후인지 아닌지 유효성 검사를 시행합니다.

readonly 속성

readonly 속성은 컨트롤을 변경 혹은 편집할 수 없게 만듭니다.
이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

주로 value 속성과 함께 사용하여 사용자에게 입력되어 있거나 저장되어 있는 컨트롤의 값을 보여주되 편집할 수 없게 할 때 사용합니다.

하지만, 이 속성은 value 속성을 직접 설정하는 자바스크립트로는 여전히 변경할 수 있습니다.

HTML 
<input type="time" value="09:45" readonly>
실제 적용된 모습

required 속성

required 속성은 폼 제출 시 사용자가 사전에 반드시 시간을 선택해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이 속성은 부울 속성(boolean attribute)입니다. 값을 별도로 작성하지 않고 속성만 작성합니다.

HTML 
<form>
    <label for="user-time">시간 선택(*필수)</label>
    <input type="time" id="user-time" required> <!-- 필수 입력 필드로 지정 -->
    <button type="submit">제출</button>
</form>
브라우저에서 실제 표시된 모습 아무 시간도 선택하지 않고 '제출'버튼을 클릭해보세요!
브라우저가 필수 입력에 대한 오류 메시지를 표시하는 것을 확인할 수 있습니다.

name 속성

name 속성은 해당 요소의 이름을 나타냅니다.
name 속성이 지정되어 있으면, 그 값을 참조하여 폼 제출 시 전송되는 데이터의 이름으로 사용됩니다. 자바스크립트에서도 name 속성의 값을 참조하여 해당 요소의 form.elements API의 이름으로 사용됩니다.

접근성 고려 사항

<input type="time">을 사용할 때에는 <label>을 함께 사용해야 합니다.
자세한 사항은 <input> 태그의 접근성 고려 사항을 참조하세요.

브라우저 호환성

input type 속성의 time 값에 대한 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="time"> 20 12 57 14.1

명세서

input type 속성의 time 값에 대한 명세서 사양
명세서 사양
<input type="time"> HTML Standard
#time-state-(type=time)

참고문헌

같이 보기