인풋박스 입력시 자동으로 생기는 초기화버튼(X)을 바꿔보자

1. 인풋 박스 타입 설정

검색 필드(input type="search")는 텍스트 필드(input type="text")와 기능적으로는 똑같지만

브라우저에 의해 다르게 표현될 수 있으며,

인풋 타입을 검색 필드로 설정할경우 반드시 name속성을 지정해 주어야 한다.

name 속성이 설정되어 있지 않으면 서버로 제출되지 않는다.

<input type="text" id="" class="" placeholder="검색어를 입력하세요" title="통합검색">
<input type="search" id="" class="" name="total_search" title="검색">

 

2. 구현

See the Pen search_form by Yongkyu, Lee (@Yongkyu) on CodePen.

 

3. 설명

인터넷 익스플로어(IE)브라우저에서는 기본적으로 입력시 초기화할 수 있는 버튼(X)이 제공된다.

이 버튼은 기능과 모양이 브라우저마다 다르기 때문에 기본적으로 제공되는 버튼을 숨기고

새로운 초기화 버튼을 만들어서 넣어주었다.

 

통합검색창 같이 검색어를 많이 입력하는 경우에만 사용할 것 같은 기능인데

로그인 폼이나 다른 데이터를 입력받는 폼에도 사용할지는 고민해봐야 할 부분....