HTML에서는 pattern 속성을 사용하여 <input> 요소의 입력값이 특정 정규식(regular expression)과 일치하는지 검증할 수 있습니다. 이 속성은 폼 제출 시 브라우저가 자동으로 유효성을 검사하도록 해주며, 별도의 JavaScript 코드 없이 간단하게 입력 형식을 강제할 수 있습니다.
pattern 속성의 기본 문법
<input type="text" pattern="정규식" title="안내 메시지">
pattern 속성과 함께 title 속성을 지정하면, 사용자가 잘못된 값을 입력했을 때 브라우저가 표시하는 오류 메시지에 해당 설명이 함께 나타나 사용자 경험이 향상됩니다.
예제 코드
아래 예제에서는 국가 코드 입력란에 pattern 속성을 적용하여, 반드시 알파벳 3글자(예: KOR, USA)만 입력되도록 설정했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML pattern 속성 예제</title>
</head>
<body>
<form action = "" method = "get" novalidate>
학생 이름<br><input type = "name" name = "sname"><br>
순위<br><input type = "number" name = "rank"><br>
국가 코드<br><input type = "text" name = "ccode" pattern="[A-Za-z]{3}" title = "country code"><br>
<input type = "submit" value = "Submit">
</form>
</body>
</html>코드 설명
- pattern="[A-Za-z]{3}": 영문 대소문자(A~Z, a~z)로 구성된 정확히 3글자만 허용합니다.
- title="country code": 유효성 검사 실패 시 사용자에게 보여줄 안내 문구입니다.
- novalidate: 폼 전체의 기본 유효성 검사를 비활성화하는 속성입니다. 이 예제에서는 데모 목적으로 포함되어 있으며, 실제로 pattern 검증을 활성화하려면 제거하는 것이 좋습니다.
자주 사용하는 pattern 예시
- 전화번호(숫자만):
pattern="[0-9]{7,11}" - 영문 대문자 3글자 국가 코드:
pattern="[A-Z]{3}" - 5자리 우편번호:
pattern="[0-9]{5}" - 이메일 기본 형식:
type="email"사용 권장
이처럼 pattern 속성을 활용하면 HTML만으로도 클라이언트 측 입력값 검증을 손쉽게 구현할 수 있습니다.