HTML에서는 <input type="month">를 사용하여 월 입력 유형을 구현할 수 있습니다. 이 입력 유형을 활용하면 사용자가 연도와 월을 손쉽게 선택할 수 있으며, 해당 필드에 포커스를 맞추면 날짜 선택기(date picker) 팝업이 자동으로 나타나 편리한 입력 경험을 제공합니다.
브라우저 호환성 안내
주의: 월 입력 유형은 Firefox와 Internet Explorer에서는 지원되지 않습니다. Google Chrome 등 일부 브라우저에서만 정상적으로 작동하므로, 프로젝트에 적용하기 전에 대상 브라우저의 지원 여부를 반드시 확인해야 합니다.
사용 예제
아래 코드를 실행하면 HTML에서 월 입력 유형을 어떻게 사용하는지 직접 확인할 수 있습니다. 이 예제에서는 학생 이름과 함께 출생 연도 및 월을 입력받는 간단한 폼을 구현했습니다.
<!DOCTYPE html> <html> <head> <title>HTML input month</title> </head> <body> <form action = "" method = "get"> Details:<br><br> Student Name<br><input type="name" name="sname"><br> Month and Year of Birth<br><input type="month" name="bmonth"><br> <input type="submit" value="Submit"> </form> </body> </html>
위 예제에서 <input type="month"> 필드를 클릭하면 월과 연도를 선택할 수 있는 팝업이 표시됩니다. 선택된 값은 YYYY-MM 형식(예: 2022-03)으로 서버에 전송되므로, 생년월일이나 유효기간처럼 연월 정보가 필요한 경우에 매우 유용합니다.