HTML에서는 <input type="time">을 사용하여 시간 입력 필드를 만들 수 있습니다. 이 입력 유형을 활용하면 사용자가 직접 시간을 손쉽게 선택할 수 있으며, 입력 필드를 클릭하면 시간 선택기(time picker) 팝업이 자동으로 나타납니다.
참고: input type="time"은 Firefox 및 Internet Explorer에서는 지원되지 않으며, Google Chrome에서 정상적으로 작동합니다.
기본 사용 예제
다음 코드를 실행해 보면 HTML에서 시간 입력 유형을 실제로 어떻게 사용하는지 확인할 수 있습니다. 학생 이름과 함께 시험 응시 시간을 입력받는 간단한 폼입니다.
<!DOCTYPE html> <html> <head> <title>HTML input time</title> </head> <body> <form action = "" method = "get"> Details:<br><br> Student Name<br><input type="name" name="sname"><br> Exam Time<br><input type="time" name="etime"><br> <input type="submit" value="Submit"> </form> </body> </html>
활용 가능한 주요 속성
시간 입력 필드는 다음과 같은 속성을 함께 사용하여 더욱 세밀하게 제어할 수 있습니다.
- min / max: 선택 가능한 시간의 최솟값과 최댓값을 지정합니다. 예를 들어
min="09:00" max="18:00"으로 설정하면 오전 9시부터 오후 6시 사이만 선택할 수 있습니다. - step: 시간 선택 간격을 초 단위로 지정합니다. 기본값은 60초(1분)이며,
step="900"으로 설정하면 15분 단위로만 선택됩니다. - value: 초기 표시되는 기본 시간을 지정합니다. 예:
value="14:30" - required: 폼 제출 시 시간 입력이 반드시 필요하도록 설정합니다.
이처럼 <input type="time">을 사용하면 별도의 JavaScript 없이도 브라우저가 기본으로 제공하는 시간 선택 UI를 활용할 수 있어 개발 편의성과 사용자 경험이 모두 향상됩니다.