HTML min 속성과 Firefox 호환성 문제
HTML의 <input type="number"> 요소에 사용되는 min 속성은 입력값의 최솟값을 제한하는 역할을 합니다. 그러나 과거 버전의 Firefox에서는 이 min 속성이 제대로 지원되지 않아, 폼 유효성 검사가 의도한 대로 작동하지 않는 문제가 있었습니다. 반면 Google Chrome에서는 min 속성이 정상적으로 작동했습니다.
min 속성 사용 예제
다음 예제는 1부터 10 사이의 숫자만 입력받도록 min과 max 속성을 함께 설정한 코드입니다.
<!DOCTYPE html> <html> <head> <title>HTML input number</title> </head> <body> <form action="" method="get"> 1부터 10 사이의 숫자를 입력하세요: <input type="number" name="num" min="1" max="10"><br> <input type="submit" value="제출"> </form> </body> </html>
브라우저 지원 현황
최신 버전의 Firefox를 포함한 주요 브라우저들은 현재 min 및 max 속성을 모두 지원합니다. 따라서 위 예제는 대부분의 최신 환경에서 정상적으로 동작합니다. 다만 구버전 Firefox에서는 화살표 버튼으로 범위 밖의 값을 입력하거나 직접 타이핑했을 때 유효성 검사가 무시될 수 있었습니다.
안정적인 유효성 검사를 위한 팁
- JavaScript 검증 추가: 브라우저별 동작 차이를 고려해, 제출 시점에 JavaScript로 입력값 범위를 한 번 더 확인하는 것이 안전합니다.
- 서버 측 검증 필수: 클라이언트 측 유효성 검사는 우회될 수 있으므로, 서버에서도 최종적으로 값의 범위를 검사해야 합니다.
- 최신 브라우저 유지: 사용자에게 최신 버전의 브라우저 사용을 권장하면 HTML5 기본 유효성 검사 기능을 온전히 활용할 수 있습니다.
결론적으로, min 속성 자체는 표준 HTML 기능이며 현재 Firefox에서도 작동합니다. 하지만 구형 브라우저나 특수한 환경까지 고려한다면, JavaScript와 서버 측 검증을 함께 구현하는 것이 가장 안정적인 방법입니다.