HTML datetime-local 입력 유형이란?
HTML에서는 <input type="datetime-local">을 사용하여 날짜와 시간을 한 번에 입력받을 수 있습니다. 이 입력 유형을 활용하면 사용자가 원하는 날짜와 시간을 직접 선택할 수 있으며, 입력 필드를 클릭하면 날짜·시간 선택기(date-time picker) 팝업이 자동으로 나타나 편리하게 값을 지정할 수 있습니다.
참고로 이 필드의 값은 YYYY-MM-DDThh:mm 형식(예: 2024-06-15T14:30)으로 서버에 전송되며, 표준 HTML5 스펙에 포함되어 있어 별도의 자바스크립트 라이브러리 없이도 간편하게 구현할 수 있다는 장점이 있습니다.
datetime-local 기본 예제 코드
아래 예제는 학생 정보를 입력받는 폼에서 시험 날짜와 시간을 선택하는 기능을 구현한 코드입니다.
<!DOCTYPE html> <html> <head> <title>HTML input datetime</title> </head> <body> <form action = "" method = "get"> Details:<br><br> Student Name<br><input type = "name" name = "sname"><br> Exam Date and Time<br><input type = "datetime-local" name = "datetime"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
코드 설명
위 코드에서 핵심 부분은 <input type="datetime-local" name="datetime">입니다. 이 요소가 브라우저에서 날짜와 시간을 선택할 수 있는 입력 필드로 렌더링됩니다.
- type="datetime-local": 현지 시간대 기준으로 날짜와 시간을 함께 선택하는 입력 필드를 생성합니다.
- name="datetime": 폼 제출 시 선택된 값이 전달될 파라미터 이름을 지정합니다.
사용자가 해당 입력 필드를 클릭하면 달력과 시간 선택 UI가 포함된 팝업이 표시되어, 마우스 클릭만으로 정확한 날짜와 시간을 손쉽게 입력할 수 있습니다. 이러한 방식은 시험 응시 신청, 예약 시스템, 일정 등록 등 날짜와 시간 정보가 필요한 다양한 웹 폼에서 유용하게 활용됩니다.