<input type="search">

<input> 태그의 type="search"는 한 줄 검색어 입력 필드를 나타냅니다.
이 필드는 기본 한 줄 텍스트 필드 유형인 type="text"와 매우 유사하지만, 검색어를 입력한다는 의미를 명시적으로 제공한다는 점에서 차이가 있습니다.

동적인 가상 키패드가 있는 일부 디바이스(예를 들어, 모바일 디바이스)에서는 검색 아이콘을 표시합니다.
브라우저에 따라 필드를 지우는 데 사용할 수 있는 삭제 아이콘을 포함할 수 있습니다.

HTML 
<form method="get" action="/search" role="search">
    <label for="user-search">사이트 내 검색</label>
    <input
        type="search"
        id="user-search"
        name="query"
        aria-label="사이트 내용을 통해 검색">
    <button type="submit">검색</button>
</form>
브라우저에서 표시된 모습

관련 속성 사용하기

<input type="search">의 관련된 속성에 대해 알아보겠습니다.

placeholder 속성

placeholder 속성은 값이 설정되지 않은 경우 컨트롤에 표시되는 텍스트를 지정합니다.
이 값은 컨트롤에 입력해야 하는 예상 데이터 유형에 대해 사용자에게 간단한 힌트를 제공해야 합니다.

HTML 
<form method="get" action="/search" role="search">
    <label for="user-search">사이트 내 검색</label>
    <input
        type="search"
        id="user-search"
        name="query"
        placeholder="찾는 검색어를 입력하세요."
        aria-label="사이트 내용을 통해 검색">
    <button type="submit">검색</button>
</form>
브라우저에서 표시된 모습

이 밖에도 사용할 수 있는 관련 속성들이 다양하게 있습니다.
HTML <input> 태그의 여러 가지 속성들을 참조하세요!

접근성 고려사항

검색 양식에 있어서 접근성은 꽤나 중요합니다.
검색 양식의 목적은 일반적으로 배치 때문에 눈에 보이는 사용자에게 꽤 분명하기 때문에 검색 필드에 레이블(이름표)을 제공하지 않는 것이 일반적인 설계 관행처럼 생각할 수 있습니다.

그러나 이것은 웹 접근성을 위한 스크린 리더 사용자들에게 혼란을 줄 수 있습니다. 왜냐하면 스크린 리더 사용자에게는 무엇에 대한 검색 입력인지를 언어적으로 파악할 수 없기 때문입니다. 특히 placeholder 속성으로 해당 컨트롤의 레이블(이름표)을 대신하는 경우가 해당합니다.

하지만, placeholder 속성은 해당 컨트롤의 레이블(이름표)을 대신할 수 없습니다.
컨트롤의 레이블(이름표)은 <label>을 사용해야 합니다. 콘텐츠에 예기치 않은 기술적 문제를 일으킬 수 있습니다.

HTML 컨트롤의 레이블(이름표)는 placeholder가 <label>를 대신할 수 없습니다. 
<form method="get" action="/search">
    <input type="search" name="query" placeholder="사이트 내 검색">
    <button type="submit">검색</button>
</form>
브라우저에서 표시된 모습

자세한 사항은 <input> 태그의 접근성 고려사항을 참조하세요.

role과 aria-label 속성 사용하기

검색 양식에 접근성 향상을 위해서는 role과 aria-label 속성 사용하는 것입니다.
예제를 통해 살펴보겠습니다.

HTML 
<form method="get" action="/search" role="search"> <!-- role 속성 사용 -->
    <label for="user-search">사이트 내 검색</label>
    <input
        type="search"
        id="user-search"
        name="query"
        placeholder="찾는 검색어를 입력하세요."
        aria-label="사이트 내용을 통해 검색"> <!-- aria-label 속성 사용 -->
    <button type="submit">검색</button>
</form>

<form> 요소에 role 속성의 값을 search로 지정하면 스크린 리더가 양식이 검색 양식임을 알리게 합니다.

이것이 충분하지 않다면 <input> 자체에 aria-label 속성을 추가로 사용할 수 있습니다. 이것은 스크린 리더가 읽을 설명적인 텍스트 레이블이어야 도움이 됩니다.

이 두 가지 role과 aria-label 속성을 고려해서 사용하면 시각적인 차이는 없지만 스크린 리더 사용자에게는 훨씬 더 많은 정보를 사용할 수 있어서 접근성 향상에 도움이 됩니다.

브라우저 호환성

input type 속성의 search 값에 대한 브라우저 호환성과 관련 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<input type="search"> 5 12 4 10.6
placeholder 3 12 4 4

명세서

input type 속성의 search 값에 대한 명세서 사양
명세서 사양
<input type="search"> HTML Standard
#text-(type=text)-state-and-search-state-(type=search)

참고문헌

같이 보기