HTML <input> 패턴 속성
예시
세 글자(숫자 또는 특수 문자 없음)만 포함할 수 있는 입력 필드가 있는 HTML 양식:
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
속성 은 양식 제출 시 요소 값을 검사 pattern하는 정규식을 지정합니다 .
<input>
참고: 속성 은 pattern텍스트, 날짜, 검색, URL, 전화, 이메일 및 비밀번호 입력 유형과 함께 작동합니다.
팁: 전역 title속성을 사용하여 사용자에게 도움이 되는 패턴을 설명합니다.
팁: JavaScript 자습서에서 정규식 에 대해 자세히 알아보세요 .
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
통사론
<input pattern="regexp">
속성 값
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
더 많은 예
예시
8자 이상의 문자를 포함해야 하는 type="password"인 <input> 요소:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
예시
하나 이상의 숫자와 하나의 대문자 및 소문자로 구성된 8자 이상의 문자를 포함해야 하는 type="password"인 <input> 요소:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
예시
다음 순서로 있어야 하는 type="email"인 <input> 요소: characters @ characters . 도메인 (문자 다음에 @ 기호, 추가 문자, "."
후 "." 기호, a에서 z까지 최소 2글자 추가:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
예시
다음 문자를 포함할 수 없는 type="search"인 <input> 요소: ' 또는 "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
예시
http:// 또는 https://로 시작하고 그 뒤에 최소 하나의 문자가 와야 하는 type="url"이 있는 <input> 요소:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
❮ HTML <입력> 태그