HTML DOM의 입력 검색 패턴(Input Search pattern) 속성은 검색 유형(<input type="search">) 입력 필드의 pattern 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 사용자가 검색 필드에 입력한 값이 pattern 속성에 지정된 정규 표현식(regular expression)과 일치하는지 검사하여 폼 유효성 검증에 활용됩니다.
문법(Syntax)
패턴 속성을 설정하는 문법은 다음과 같습니다.
searchObject.pattern = regexp
여기서 regexp는 검색 필드의 입력값을 검사할 기준이 되는 정규 표현식입니다.
예제(Example)
다음은 입력 검색 패턴 속성의 실제 사용 예제입니다.
<!DOCTYPE html>
<html>
<body>
<h1>Input Search pattern property</h1>
<p>검색 필드에 입력되는 값은 숫자 3자리 또는 a부터 g 사이의 알파벳 6글자여야 합니다.</p>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" pattern="[0-9]{3}|[a-g]{6}"
title="숫자 3자리 또는 a-g 사이의 알파벳 6글자">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
function passPattern() {
var P = document.getElementById("SEARCH1").pattern;
document.getElementById("Sample").innerHTML ="pattern 속성 값은 "+ P;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
검색 필드에 pattern 속성에 지정된 정규 표현식과 일치하지 않는 텍스트를 입력한 경우입니다.
GET PATTERN 버튼을 클릭하면 현재 설정된 패턴 값을 확인할 수 있습니다.
정리
입력 검색 패턴 속성은 클라이언트 측에서 간단하게 입력값 형식을 강제할 수 있는 유용한 기능입니다. 정규 표현식을 활용해 특정 형식(예: 숫자 자릿수, 알파벳 범위 등)만 허용하도록 제한할 수 있으며, JavaScript로 해당 속성 값을 읽어와 동적으로 확인하는 것도 가능합니다.