HTML5의 숫자(number) 입력 유형에서 min 속성은 Google Chrome에서는 정상적으로 작동하지만, Firefox에서는 지원되지 않아 의도한 대로 유효성 검사가 이루어지지 않는 문제가 있습니다.
문제 상황
<input type="number"> 요소에 min과 max 속성을 지정하면, 브라우저는 해당 범위를 벗어난 값이 입력될 때 폼 제출을 차단해야 합니다. 그러나 일부 Firefox 버전에서는 min 속성이 무시되어 최솟값보다 작은 숫자도 그대로 제출될 수 있습니다.
예제 코드
1부터 10 사이의 숫자만 입력받는 간단한 폼 예제입니다.
<!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 = "Submit">
</form>
</body>
</html>크로스 브라우저 대응 방법
브라우저마다 HTML5 유효성 검사 지원 수준이 다르기 때문에, 안정적인 서비스를 위해서는 다음과 같은 방법을 함께 사용하는 것이 좋습니다.
- JavaScript 유효성 검사 추가: 폼 제출 시 자바스크립트로 입력값이 min~max 범위 내에 있는지 직접 확인합니다.
- 서버 측 검증: 클라이언트 검증은 우회될 수 있으므로, 서버에서도 반드시 값의 범위를 검사해야 합니다.
- 최신 브라우저 유지: 최신 버전의 Firefox와 Chrome은 HTML5 폼 유효성 검사를 대부분 지원하므로, 브라우저를 항상 최신 상태로 유지하는 것이 중요합니다.
정리
HTML5의 숫자 입력 유형과 min/max 속성은 편리한 기능이지만, 브라우저 호환성 문제를 고려해야 합니다. Firefox에서 min 속성이 동작하지 않는 경우에는 자바스크립트 또는 서버 측 유효성 검사를 병행하여 사용자 경험과 데이터 신뢰성을 모두 확보하는 것이 바람직합니다.