HTML <input> pattern 속성

HTML <input> 태그

정의와 사용법

pattern 속성은 정규 표현식을 정의하고, 양식을 제출할 때 <input> 요소의 값을 정규 표현식에 따라 확인합니다.

주의:pattern 속성은 다음 입력 유형에 적용됩니다:

  • text
  • date
  • search
  • url
  • tel
  • email
  • password

푸시:사용 전체적인 title 속성 이 패턴을 설명하여 사용자가 이해할 수 있도록 도와주세요.

푸시:우리의 JavaScript 강의 정규 표현식에 대해 더 많은 지식을 중국어로 배우세요.

예시

예제 1

다음은 세 글자만 포함할 수 있는 입력 필드를 포함한 HTML 양식입니다. (숫자나 특수 문자는 포함하지 않습니다):

<form action="/action_page.php">
  <label for="country_code">국가 코드：</label>
  <input type="text" id="country_code" name="country_code"}}
  pattern="[A-Za-z]{3}" title="3글자의 국가 코드"><br><br>
  <input type="submit">
</form>

직접 테스트해 보세요

예제 2

type 속성이 "password"인 <input> 요소는 최소 8개의 문자를 포함해야 합니다:

<form action="/action_page.php">
  <label for="pwd">비밀번호：</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="8개 이상의 문자">
  <input type="submit">
</form>

직접 테스트해 보세요

예제 3

type 속성이 "password"인 <input> 요소는 8개 이상의 문자를 포함해야 하며, 그 중에 숫자, 대문자, 소문자가 포함되어야 합니다:

<form action="/action_page.php">
  <label for="pwd">비밀번호：</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="최소 8개의 문자가 있어야 하며, 그 중에 숫자, 대문자, 소문자가 포함되어야 합니다">
  <input type="submit">
</form>

직접 테스트해 보세요

예제 4

type 속성이 "email"인 <input> 요소는 characters@characters.domain 순서로 입력해야 합니다.

문자와 @ 기호로 구성되며, 그 다음에 더 많은 문자가 오고, 그 다음에 "." 기호가 오며, "." 기호의 다음에 최소 두 글자의 a부터 z의 문자를 추가하세요:

<form action="/action_page.php">
  <label for="email">이메일：</label>
  <input type="email" id="email" name="email"
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
  <input type="submit">
</form>

직접 테스트해 보세요

예제 5

type 속성이 "search"인 <input> 요소는 다음 문자를 포함할 수 없습니다: ' 또는 " .

<form action="/action_page.php">
  <label for="search">Search:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="잘못된 입력">
  <input type="submit">
</form>

직접 테스트해 보세요

예제 6

type 속성이 "url"인 <input> 요소는 http:// 또는 https://으로 시작해야 하며, 그 다음에 적어도 한 문자가 오ρέπει:

<form action="/action_page.php">
  <label for="website">홈페이지:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="http:// 포함"
  <input type="submit">
</form>

직접 테스트해 보세요

문법

<input pattern="regexp">

속성 값

값 설명
regexp <input> 요소 값의 정규 표현식을 정의합니다.

브라우저 지원

표에서는 이 속성을 최초로 완전히 지원하는 브라우저 버전이 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
5.0 10.0 4.0 10.1 9.6

주석:pattern 속성은 HTML5에서 새로운 속성입니다.

HTML <input> 태그