search

정의 및 사용

search type은 사이트 검색이나 구글 검색같은 검색 필드에 사용되며, 일반 텍스트 필드처럼 동작한다. 필드에 글자를 입력하면 자동으로 “x” 버튼이 오른쪽에 나타나며 현재는 Chrome과 Safari에서만 지원된다.

브라우저 지원

IE6  지원안함IE7  지원안함IE8  지원안함Chrome 지원Firefox 지원Opera 지원Safari 지원안함

현재 파이어폭스 4.0 이상, 오페라 11.0 이상, 크롬 10.0 이상 에서만 지원한다.

구문

속성 값 설명
설명
name ..
disabled 비활성화 시키기 – 해당 요소를 사용하지 않게 제어할 수 있다. disabled 값을 적으면 마우스 클릭이나 탭키가 작동되지 않는다.
form [NEW]
autocomplete [NEW] 자동완성기능 제어 – 이전에 입력했던 내용을 힌트로 보여준다. autocomplete 기능이 생기면서 웹에서도 자동완성기능을 제어할 수 있다.
autofocus [NEW] 입력 필드에 커서 표시하기 – 페이지가 로딩되면 바로 커서가 표시되어 편리하게 이용할 수 있다. 그러나 placeholder기능과 중복되서 사용할 수는 없다.
list [NEW]
maxlength ..
pattern [NEW]
readonly ..
required [NEW] 필수입력필드 체크 속성- 서버로 폼을 전송하기 전에 필수 내용들이 모두 채워졌는지를 검사한다.
size ..
placeholder [NEW] 힌트 표시하기 속성 – 적당한 예시 내용을 표시하고 있다가 사용자가 입력을 하면 사라진다. 만약 autofocus 속성을 사용하였다면 placeholder 의 내용은 보여지지 않는다.
value 기본값

예제

버그 및 이슈

  • html5의 input type 속성은 현재에도 계속 각 브라우저 벤더들이 업데이트를 하고 있으므로, 주기적으로 업데이트 내용을 확인해야 한다.
  • 현재 애플 공식사이트(http://www.apple.com) 메인 검색바에 html5의 search type이 적용되어 있어 텍스트를 입력하면 오른쪽에 “x”버튼이 자동으로 생성되는 것을 쉽게 확인해볼 수 있다.

목록 으로

댓글