HTML <input> pattern 속성 – 정규 표현식 패턴으로 입력값 형식 설정

정의 및 사용 방법

pattern 속성은 사용자가 텍스트를 입력하는 <input> 태그의 일부 유형에서, 입력한 값이 일치해야 하는 패턴(pattern)인 정규 표현식을 지정합니다.

이 속성이 설정되면, 브라우저는 폼 제출 시 해당 요소에 입력된 텍스트가 지정된 패턴과 일치하는지 유효성 검사를 시행합니다.

pattern 속성으로 지정하는 정규 표현식(Regular expression)을 살펴보기 전에, 이 속성이 설정되면 폼 제출 시 해당 요소에 입력된 텍스트가 지정된 패턴과 일치하는지 유효성 검사를 시행한다는 사실을 먼저 '기본 예제'로 확인해보겠습니다.

기본 예제

다음 예제는 닉네임 입력 필드에서 영문 소문자만 입력하도록 pattern 속성을 설정한 기본 예제입니다.
사용자가 '확인' 버튼을 누르면, 브라우저는 해당 요소에 입력된 값이 pattern 속성으로 지정한 패턴(pattern)인 정규 표현식([a-z]+)과 일치하는지 유효성 검사를 시행합니다.

HTML

<form>
    <fieldset>
        <legend>영문 소문자 닉네임 입력</legend>
        <p>
            <label for="username">닉네임(*필수):</label>
            <input id="username" type="text" pattern="[a-z]+" required placeholder="영문 소문자만 입력...">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>

코드 부연설명
required 속성이 지정되면 해당 요소는 사용자가 사전에 반드시 값을 입력해야 하는 필수(required) 컨트롤 요소임을 나타냅니다. 이러한 특징으로 인해 pattern 속성은 보통 required 속성과 함께 사용됩니다.

실제 적용된 모습

오류 확인: 닉네임(*필수) 필드에 영문 소문자가 아닌 값이나 공백 상태에서, [제출] 버튼을 클릭해 보세요. 브라우저가 입력에 대한 오류 메시지를 표시하는 것을 확인합니다.
성공 확인: 닉네임(*필수) 필드에 영문 소문자만 입력 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

`pattern` 속성으로 지정하는 정규 표현식(Regular expression)

기본 예제에서 살펴본 것처럼, pattern 속성은 정규 표현식(Regular expression)으로 값을 지정합니다. pattern 속성의 패턴을 이해하려면 정규 표현식이 무엇인지 먼저 알아야 합니다.

하지만 너무 걱정하지 마세요! 정규 표현식은 숙련된 시니어 개발자들도 모든 정규 표현식을 이해하거나 외우기보다는 필요할 때마다 문서를 찾아보며 사용하곤 합니다. 여기서는 정규 표현식이 어떻게 구성되는지 살펴보기 보다는 핵심 개념 파악을 목적으로 설명합니다.

정규 표현식(Regular expression)

정규 표현식(Regular expression)이란 텍스트가 특정한 규칙적인(Regular) 패턴을 가지고 있는지 확인하는 문법적인 코드(expression)입니다.

HTML의 pattern 속성뿐만 아니라, 자바스크립트 등과 같은 프로그래밍 언어에서도 텍스트가 특정 패턴에 맞는 문자인지를 신속하게 확인할 때 정규 표현식을 많이 사용합니다.

정규 표현식은 프로그래밍 언어처럼 방대하고 복잡한 문법이나 내용이 많지만, 그렇다고 해서 정규 표현식의 복잡한 원리를 모두 공부해야만 이 속성을 사용할 수 있는 것은 아닙니다. 이론적 원리보다는 활용 가능한 예제를 살펴보겠습니다. 정규 표현식의 상세 가이드는 MDN의 정규 표현식을 참조하세요.

샘플 예제

이제 정규 표현식의 이론적인 설명보다는, HTML의 pattern 속성에서 실제로 자주 사용되는 예제를 중심으로 살펴보겠습니다.

숫자만 입력 허용: pattern="[0-9]+"
영문만 입력 허용: pattern="[a-zA-Z]+"
한글만 입력 허용: pattern="[가-힣]+"

숫자만 입력 허용

입력한 값이 일치해야 하는 패턴이 숫자만일 경우에는 pattern="[0-9]+"로 지정합니다.

HTML

<form>
    <fieldset>
        <legend>숫자만 입력</legend>
        <p>
            <label for="number">숫자(*필수):</label>
            <input id="number" type="text" pattern="[0-9]+" required placeholder="숫자만 입력...">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>

실제 적용된 모습

오류 확인: 숫자(*필수) 필드에 숫자가 아닌 값이나 공백 상태에서, [제출] 버튼을 클릭해 보세요. 브라우저가 입력에 대한 오류 메시지를 표시하는 것을 확인합니다.
성공 확인: 숫자(*필수) 필드에 숫자만 입력 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

영문만 입력 허용

입력한 값이 일치해야 하는 패턴이 영문만일 경우에는 pattern="[a-zA-Z]+"로 지정합니다.

HTML

<form>
    <fieldset>
        <legend>영문만 입력</legend>
        <p>
            <label for="english">영문(*필수):</label>
            <input id="english" type="text" pattern="[a-zA-Z]+" required placeholder="영문만 입력...">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>

실제 적용된 모습

오류 확인: 영문(*필수) 필드에 영문이 아닌 값이나 공백 상태에서, [제출] 버튼을 클릭해 보세요. 브라우저가 입력에 대한 오류 메시지를 표시하는 것을 확인합니다.
성공 확인: 영문(*필수) 필드에 영문만 입력 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

한글만 입력 허용

입력한 값이 일치해야 하는 패턴이 한글만일 경우에는 pattern="[가-힣]+"로 지정합니다.

HTML

<form>
    <fieldset>
        <legend>한글만 입력</legend>
        <p>
            <label for="korean">한글(*필수):</label>
            <input id="korean" type="text" pattern="[가-힣]+" required placeholder="한글만 입력...">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>

실제 적용된 모습

오류 확인: 한글(*필수) 필드에 한글이 아닌 값이나 공백 상태에서, [제출] 버튼을 클릭해 보세요. 브라우저가 입력에 대한 오류 메시지를 표시하는 것을 확인합니다.
성공 확인: 한글(*필수) 필드에 한글만 입력 후, 다시 [제출] 버튼을 클릭하면 오류 없이 폼이 제출되는 것을 확인합니다.

고려할 점

이메일(<input type="email">)이나 웹사이트 주소(<input type="url">)와 같은 패턴 형식은 이미 <input>에서 전용 유형이 제공되는 경우에는, pattern 속성보다는 해당 입력 유형을 지정하는 것이 바람직합니다. 이는 향상된 웹 콘텐츠 접근성을 제공하는 데 초점을 둔 사용 방식입니다. 단, 이메일 형식이나 url 검사를 정밀하게 설정하기 위해서는 해당 유형에 pattern 속성으로 정밀한 패턴을 추가할 수 있습니다.

`pattern` 속성 사용이 가능한 `<input>` 유형

pattern 속성은 <input> 태그의 모든 입력 유형에서 사용할 수 있는 것은 아닙니다. 사용자가 직접 텍스트를 입력하는 다음의 유형들에서만 적용됩니다.

주의하세요!
숫자 입력 유형(<input type="number">)에는 pattern 속성이 적용되지 않습니다. 이 유형은 브라우저가 숫자 형식을 자체적으로 검증하기 때문입니다.

접근성 고려 사항

pattern 속성의 사용에 있어서는, 시각적인 사용성뿐만 아니라 스크린 리더 사용자를 위한 접근성도 함께 고려할 필요가 있습니다.

pattern 속성은 텍스트 입력값의 형식을 검증하기 위한 규칙을 정의하지만, 이 규칙의 의미가 사용자에게 자동으로 전달되지는 않습니다. 따라서 시각 장애가 없는 사용자에게는, 해당 컨트롤 요소가 특정 형식의 값만을 입력받는다는 사실을 레이블이나 안내 문구를 통해 시각적으로 제공하는 것이 필요합니다. 이러한 안내는 placeholder 속성으로 제공할 수도 있습니다.

하지만 입력 필드에 대한 안내를 placeholder 속성에만 의존할 경우, 포커스 시 안내 문구가 사라지거나 스크린 리더 환경에서 충분히 전달되지 않을 수 있습니다.

접근성을 고려한다면, 입력값의 형식을 사람이 이해할 수 있는 문장으로 설명하고 이를 aria-label 속성을 통해 명확히 제공하는 것이 바람직합니다.

HTML

<form>
    <fieldset>
        <legend>한글만 입력</legend>
        <p>
            <label for="korean">한글(*필수):</label>
            <input
                id="korean"
                type="text"
                pattern="[가-힣]+"
                required
                placeholder="한글만 입력..."
                aria-label="한글만 입력">
        </p>
        <p>
            <button type="submit">확인</button>
        </p>
    </fieldset>
</form>