pattern 속성 (input)

정의

pattern 속성은 컨트롤의 값이 통과해야 할 정규 표현식을 명시하며 multiple 속성이 사용된 경우 콘트롤의 값을 확인합니다.

input 요소에 pattern 속성을 사용 하였다면, 반드시 title 속성을 사용해서 패턴에 대한 설명을 제공해야 합니다. 사용자 에이전트는 title 속성의 내용을 활용해서, 패턴이 일치하지 않을 경우 사용자에게 알려줄 수 있습니다. 예를 들면 툴팁, 보조 기술을 사용해서 해당 콘트롤에 포커스를 이동하는 등의 활용이 가능합니다.

속성 값

이 속성의 값은 자바스크립트 정규 표현식과 일치해야 합니다. [ECMA]

이 속성에 올바른 값이 사용되었다면, 사용된 숫자는 요소에서 허용되는 최대 길이가 됩니다. 속성이 생략되었거나 그 값을 파싱하는 과정에서 에러가 있다면, 허용하는 값의 길이 제한은 없는 것입니다.

예제

예제1

<p><label>휴대전화 번호: <input type="tel" name="mobile" maxlength="11" pattern="[0-9]{10}[0-9]?" title="'-'를 뺀 휴대전화 번호 10~11자리를 입력해주세요."></label></p>
Safari 5 에서 실행결과

[예제1]의 경우 사용자 에이전트로 하여금 다음과 같은 알림창을 보이게 할 수 있습니다.

pattern 속성을 사용시 title 속성은 반드시 그 패턴을 설명해야 합니다. 사용자가 컨트롤에 기입하는 것을 도와줄 수 있다면, 추가적인 정보를 작성해도 됩니다. 만약 title 속성에 설명이 아닌 경우 보조 기술의 활용이 어려울 것입니다.

예제2

<p><label>휴대전화 번호: <input type="tel" name="mobile" maxlength="11" pattern="[0-9]{10}[0-9]?" title="휴대전호 번호"></label></p>

[예제2]와 같이 title 속성을 컨트롤의 캡션만 포함한다면, 패턴에 맞지 않을 시 보조 기술은

“입력하신 텍스트는 폼에서 요구하는 패턴과 맞지 않습니다. 휴대전화 번호”

이 정도 밖에 말할 수 없을 것입니다. 이는 그다지 유용하지 않을 것입니다.

예제3

<p><label>휴대전화 번호: <input type="tel" name="mobile" maxlength="11" pattern="[0-9]{10}[0-9]?" title="잘 못 입력하셨습니다. '-'를 뺀 휴대전화 번호 10~11자리를 입력해주세요."></label></p>

사용자 에이전트는, 에러가 아닌 상황에서도, title 속성의 내용을 보여줄 가능성이 있습니다. (마우스 오버로 인한 툴팁) 따라서, [예제3]과 같이 저자들은 이러한 상황에서 노출될 title 속성의 내용이 에러를 암시하는 것처럼 보이게 하지 말아야 합니다.

참조

기준 명세를 바탕으로 명세 번역과 레퍼런스 제작이 이루어졌습니다. 최근 내용은 최신 명세를 확인해 주세요.

 
html5/attribute/pattern_input.txt · 마지막 수정: 2013/11/19 13:35 (외부 편집기)
이 레퍼런스는 클리어보스가 제작/운영하고 있으며, 다음의 라이센스를 따릅니다 :CC 저작자표시-비영리-동일조건변경허락 2.0
Recent changes RSS feed World Wide Web Consortium Driven by DokuWiki