HTML에서 날짜/시간 입력 유형이란?
HTML에서 날짜와 시간을 함께 입력받으려면 <input type="datetime-local">을 사용합니다. 이 입력 유형을 적용하면 사용자가 직접 텍스트를 타이핑하지 않아도 달력과 시계 형태의 날짜·시간 선택기(Date Time Picker) 팝업에서 간편하게 값을 선택할 수 있습니다.
입력 필드를 클릭하면 자동으로 선택기 팝업이 나타나며, 연도, 월, 일뿐만 아니라 시간(시, 분)까지 한 번에 지정할 수 있어 예약, 일정 등록, 시험 응시 신청 같은 폼에서 특히 유용합니다.
브라우저 호환성 주의 사항
참고: 과거에는 type="datetime"이 Firefox와 Internet Explorer에서 지원되지 않았고 주로 Google Chrome에서만 정상적으로 동작했습니다. 현재는 datetime-local 유형이 Chrome, Edge, Safari, Opera 등 대부분의 최신 브라우저에서 널리 지원되지만, 구형 브라우저를 고려해야 하는 프로젝트라면 폴백(fallback) 처리를 함께 준비하는 것이 좋습니다.
사용 예제
다음 코드를 실행하면 HTML에서 날짜/시간 입력 유형을 어떻게 활용하는지 직접 확인할 수 있습니다. 학생 이름과 시험 일시를 입력받는 간단한 폼 예제입니다.
<!DOCTYPE html> <html> <head> <title>HTML input datetime</title> </head> <body> <form action = "" method = "get"> 상세 정보:<br><br> 학생 이름<br><input type="name" name="sname"><br> 시험 날짜 및 시간<br><input type="datetime-local" name="datetime"><br> <input type="submit" value="제출"> </form> </body> </html>
예제 설명
위 코드에서 핵심 부분은 <input type="datetime-local" name="datetime">입니다. 이 필드를 클릭하면 날짜와 시간을 동시에 선택할 수 있는 팝업이 열리고, 선택된 값은 YYYY-MM-DDThh:mm 형식으로 서버에 전송됩니다. 이름 입력 필드와 제출 버튼과 조합하여 하나의 완성된 폼을 구성하는 기본적인 구조를 보여줍니다.