날짜입력 검색 결과
1 개의 검색 결과가 있습니다.
HTML , CSS

HTML input 태그 date 타입 날짜(달력) 입력 max 속성을 통한 연도 4자리 제한

날짜 정보를 입력받는 화면에서 input 태그에 type을 date 로 사용하여 구현하는 경우가 있는데 입력 창에서 연도 값을 타이핑 하다 보면 6자리 까지 입력이 되는 것을 확인할 수 있다. 물론 데이터를 넘기기 전에 자바스크립트를 통해 유효성 체크를 별도로 할 수 있지만 입력 자체를 4자리로 제한 하는 것이 깔끔할 수 있겠다는 생각이 든다. 그럴 경우 간단하게 태그의 속성 값으로 제어할 수 있을 듯 하다. input 태그에 max 속성을 주는데, 값을 위 이미지 처럼 설정 해주면 연도는 4자리를 넘어가게 되면 다음 월 입력 칸으로 넘어가게 된다 이후 입력 값에 대해서는 자바스크립트를 통해 유효성을 체크한 뒤 DB와 통신하면 될 것 같다.

2022. 7. 10. 13:30