HTML <input type="search">: 검색 텍스트 입력

search 유형의 <input> 요소는 사용자가 검색 질의를 입력할 수 있는 텍스트 입력 칸을 제공합니다. text 유형과 기능은 완전히 동일하지만, 사용자 에이전트마다 일부 화면 요소의 표시를 다르게 할 수 있습니다.

예를 들어 입력 칸의 끝에 지우기 버튼을 표시하는 경우도 있고, 모바일 기기 가상 키보드의 엔터 자리에 “검색”을 표시하는 경우도 있습니다.

<label for="keyword">검색어:</label>

<input id="keyword" name="q" type="search" />

label {
  display: block;
}

값

search 유형의 값은 문자열입니다. 값의 형식을 제한하려면 minlength, maxlength, pattern 특성 등을 사용하세요.

추가 특성

search 유형은 모든 <input> 요소가 공유하는 특성 외에도 아래의 특성을 추가로 지원합니다.

list

현재 문서 내에 존재하는 <datalist> 요소의 id 특성을 지정하면 사전 설정된 추천 입력값을 보여줄 수 있습니다. <datalist>에 정의됐지만 현재 <input> 유형과 호환되지 않는 값은 추천 목록에 포함되지 않습니다. 추천 목록은 추천 사항일 뿐이며 필수 사항이 아니므로 사용자는 목록을 무시하고 직접 값을 입력할 수 있습니다.

maxlength

입력 값의 유효한 최대 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 긴 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다. 기본 설정에서, 브라우저는 사용자가 입력하는 값의 길이를 이 특성의 값으로 제한합니다.

minlength

입력 값의 유효한 최소 문자 수(UTF-16 코드 유닛 기준)를 지정합니다. 0 이상의 정수만 지정할 수 있습니다. 유효하지 않은 값은 지정해도 최대 길이를 설정하지 않습니다.

이 값보다 짧은 길이의 텍스트를 받은 경우 <input>이 제약 검증을 통과하지 못합니다.

pattern

제약 검증을 만족하려면 입력 값이 일치해야 하는 정규표현식을 지정합니다. JavaScript RegExp가 인식할 수 있는 정규표현식이어야 합니다. 정규표현식을 컴파일할 때 u 플래그를 지정하므로 패턴은 항상 Unicode 코드 포인트의 시퀀스로 취급합니다. 정규표현식을 열고 닫는 슬래시는 생략해야 합니다.

유효하지 않은 값을 지정한 경우 무시합니다.

pattern 특성을 사용할 땐 가까운 곳에 기대 형식에 대한 설명 텍스트를 배치하세요. 또한 title 특성으로 추가 도움말을 제공할 수 있습니다. 대부분의 브라우저에서는 title의 내용을 툴팁으로 표시합니다.

접근성에서, 설명 텍스트는 필수 사항이고 툴팁은 보조 기능입니다.

아래의 입력 패턴에서 추가 설명과 예제를 확인하세요.

placeholder

사용자가 입력해야 하는 값을 간략하게 알려줄 텍스트를 지정합니다. 값이 개행 문자를 포함해서는 안됩니다. placeholder는 이 입력 칸의 설명을 제공하는 것이 아니라, 기대하는 데이터의 유형을 나타내야 합니다.

placeholder는 양식을 설명할 수 있는 다른 방법에 비해 적합하지 않으며 예상하지 못한 기술적 문제를 유발할 수 있습니다. <input>의 레이블 절을 참고하세요.

readonly

입력 칸을 읽기 전용으로 만들어 사용자가 편집할 수 없도록 하는 불리언 특성입니다. 하지만 JavaScript를 사용해 HTMLInputElement의 value 속성을 직접 설정하면 값을 바꿀 수 있습니다.

읽기 전용 입력 칸에는 사용자가 값을 입력할 수 없으므로, readonly를 추가한 요소에 required 특성을 추가하면 아무 효과도 없습니다.

유효성 검증

search 입력 칸은 text 유형과 마찬가지로 기본 유효성 검증을 포함하지 않습니다. 평범한 검색 창에서 입력 칸을 제한해야 하는 경우는 많지 않고, 대부분의 경우에는 사용자가 원하는 검색어라면 뭐든 입력 가능해야 하기 때문입니다. 하지만 이미 형식이 정해진 데이터에 대한 질의 등, 유효성 검증이 필요한 경우 maxlength, minlength, pattern 등을 사용해 입력 형식을 제한할 수 있습니다.

유효성 스타일

:valid와 :invalid 의사 클래스를 활용하면 사용자에게 입력 값이 유효한지 시각적으로 알려줄 때 유용합니다. 아래 예제들에서는 다음과 같은 스타일을 적용해서 유효한 값을 받으면 초록색 체크 표시를, 유효하지 않은 값을 받으면 빨간색 X 표시를 보여주겠습니다.

input:invalid + span::after {
  color: red;
  content: '✖';
  padding-left: 5px;
  position: absolute;
}

input:valid + span::after {
  color: green;
  content: '✓';
  padding-left: 5px;
  position: absolute;
}

위 스타일을 적용하면, <input> 요소 바로 다음에 배치된 <span> 요소에 체크나 X 표시를 합니다.

필수 값

required 특성을 지정하면 필수 입력 칸을 쉽게 만들 수 있습니다. 사용자는 반드시 이 칸을 채워야 양식을 제출할 수 있습니다.

<form>
  <div>
    <label for="uid">ID 검색: </label>
    <input id="uid" name="q" required type="search" />
    <span class="validity"></span>
  </div>
  <button>검색</button>
</form>

button {
  margin-top: 10px;
}

input:invalid + span::after {
  color: red;
  content: '✖';
  padding-left: 5px;
  position: absolute;
}

input:valid + span::after {
  color: green;
  content: '✓';
  padding-left: 5px;
  position: absolute;
}

입력 길이

minlength 특성으로 입력해야 할 값의 최소 길이를 지정할 수 있고, maxlength 특성으로는 입력할 수 있는 값의 최대 길이를 지정할 수 있습니다. 사용자는 반드시 이 길이 범위 내의 값을 입력해야 양식을 제출할 수 있습니다.

아래 예제에서는 최소 4자, 최대 8자의 값을 받아야 제출할 수 있습니다.

<form>
  <div>
    <label for="uid">ID 검색: </label>
    <input id="uid" maxlength="8" minlength="4" name="q" required type="search" />
    <span class="validity"></span>
  </div>
  <button>검색</button>
</form>

button {
  margin-top: 10px;
}

input:invalid + span::after {
  color: red;
  content: '✖';
  padding-left: 5px;
  position: absolute;
}

input:valid + span::after {
  color: green;
  content: '✓';
  padding-left: 5px;
  position: absolute;
}

입력 패턴

pattern 특성을 사용하면 입력 값이 반드시 따라야 할 정규표현식을 지정할 수 있습니다(정규표현식으로 검증하기를 참고하세요). 사용자는 반드시 이 정규표현식과 일치하는 값을 입력해야 양식을 제출할 수 있습니다.

아래 예제에서는 최소 4자, 최대 8자의 알파벳 소문자만으로 구성된 값을 받아야 제출할 수 있습니다.

<form>
  <div>
    <label for="uid">ID 검색: </label>
    <input id="uid" name="q" pattern="[a-z]{4,8}" required type="search" />
    <span class="validity"></span>
    <p>4글자 이상 8글자 이하의 알파벳 소문자만 입력할 수 있습니다.</p>
  </div>
  <button>검색</button>
</form>

button {
  margin-top: 10px;
}

p {
  color: gray;
  font-size: 0.8em;
  margin-bottom: 0;
}

input:invalid + span::after {
  color: red;
  content: '✖';
  padding-left: 5px;
  position: absolute;
}

input:valid + span::after {
  color: green;
  content: '✓';
  padding-left: 5px;
  position: absolute;
}

명세

• HTML Standard

브라우저 호환성

같이 보기

• 일반 텍스트 입력 칸: <input type="text">