HTML에서 검색 입력 필드를 만들려면 <input type="search">를 사용합니다. 이 입력 유형은 검색 전용 필드를 위한 것으로, 화면에는 일반 텍스트 입력창과 비슷하게 보이지만 브라우저에 따라 지우기(X) 버튼이 제공되는 등 검색에 최적화된 동작을 합니다.
검색 입력 유형은 웹사이트에 검색 바(search bar)를 추가할 때 가장 많이 활용됩니다. 시맨틱하게 검색 필드임을 나타낼 수 있어 스크린 리더 등 접근성 도구에서도 유용하게 인식됩니다.
기본 사용 예시
아래 코드를 실행하면 HTML에서 검색 입력 유형을 어떻게 사용하는지 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML input search</title> </head> <body> <form action = "" method = "get"> Search<br> <input type = "search" name = "search"><br> <input type = "submit" value = "Submit"> </form> </body> </html>
주요 특징
- 일반 텍스트 필드와 유사한 외형 — 대부분의 브라우저에서 text 타입과 비슷하게 렌더링되지만, WebKit 기반 브라우저(Chrome, Safari 등)에서는 입력 내용을 한 번에 지울 수 있는 취소 버튼이 자동으로 표시됩니다.
- name 속성 지정 — 폼을 제출하면 name 속성에 설정한 값(예: search)을 키로 하여 검색어가 서버로 전달됩니다.
- placeholder 활용 가능 — placeholder 속성을 추가하면 검색창에 안내 문구를 표시해 사용자 경험을 개선할 수 있습니다.
이처럼 <input type="search">는 간단한 마크업만으로 검색 기능에 적합한 입력 필드를 손쉽게 구현할 수 있는 방법입니다.