HTML5의 입력 유형 = "텍스트"와 입력 유형 = "검색"

HTML5의 입력 유형 = "텍스트"와 입력 유형 = "검색"

---

HTML5의 새로운 양식 입력 필드로 작업하기 시작하면서 HTML5를 처음 사용합니다. 나는, 폼 입력 필드와 함께 일하고 있어요 때, 특히 <input type="text" />및 <input type="search" />IMO 사파리, 크롬, 파이어 폭스와 오페라를 포함한 모든 주요 브라우저에서 차이가 없었다. 또한 검색 필드는 일반 텍스트 필드처럼 작동합니다.

그렇다면 HTML5 input type="text"와 input type="search"HTML5 의 차이점은 무엇 입니까?

의 실제 목적은 <input type="search" />무엇입니까?

---

지금은 그들 사이에 큰 거래가 없습니다-아마도 없을 것입니다. 그러나 요점은 브라우저 제작자에게 원하는 경우 특별한 작업을 수행 할 수있는 기능을 제공하는 것입니다.

@, .com 및 나머지는 사용 가능한 <input type="number">휴대폰, 숫자 패드 또는 type="email"키보드의 특수 버전을 생각해보십시오 .

휴대폰에서 원하는 경우 검색을 통해 내부 검색 애플릿을 가져올 수 있습니다.

다른 한편으로, 그것은 CSS로 현재 개발자를 돕습니다.

input[type=search]:after { content : url("magnifying-glass.gif"); }

---

대부분의 브라우저에서는 전혀 작동하지 않습니다. 그냥 텍스트 입력처럼 동작합니다. 이것은 문제가되지 않습니다. 스펙은 특별한 것을 요구하지 않습니다. WebKit 브라우저는 주로 스타일을 적용하여 약간 다르게 처리합니다.

WebKit의 검색 입력에는 기본적으로 삽입 테두리, 둥근 모서리 및 엄격한 인쇄 제어 기능이 있습니다.

또한,

이것은 내가 아는 곳이나 문서에 나와 있지 않지만 입력에 결과 매개 변수를 추가하면 WebKit은 이전 결과를 보여주는 드롭 다운 화살표가있는 작은 돋보기를 적용합니다.

<input type=search results=5 name=s>

참고

무엇보다도, 그것은 의미 적 의미를 제공한다 input type.

최신 정보:

Chrome 51은 결과 속성에 대한 지원을 제거했습니다.

---

시각적 / 기능적으로, 입력 유형이 ' search '인 경우 2 개의 차이점 :-

1. 입력란의 텍스트를 지우려면 입력 / 검색 상자 끝에 ' X '기호가 표시됩니다.
2. 키보드에서 ' Esc '키를 누르면 텍스트가 지워집니다.

---

일부 브라우저에서는 돋보기 아이콘으로 "최근 검색"기능을 자동으로 제공하는 "결과"및 "자동 저장"속성도 지원합니다.

더 많은 정보

---

실제로 아무것도하지 않는다고 가정 할 때 매우주의하십시오. 유형 검색을 사용하여 스타일 입력으로 이동하면 변경할 수없는 특정 속성이 있습니다. 하나의 테두리를 변경하려고하면 상당히 불가능한 것을 알 수 있습니다. 허용되지 않는 다른 CSS 속성이 몇 가지 있습니다 . 자세한 내용은 이 속성을 확인 하십시오.

또한 Jashwant에서 언급했듯이 결과 속성이 있지만 autosave 속성도 포함하지 않으면 잘 작동하지 않습니다. 드롭 다운은 대부분의 브라우저에서 작동하지 않지만 자신의 위험에 따라 사용하십시오.

---

브라우저에 차이가 있습니다. 일부 단어를 입력 한 다음 type="search"chrome / safari 입력 에 ESC 키를 입력 하면 입력 상자가 지워집니다. 그러나 type="text"시나리오에서는 단어가 명확하지 않습니다. 따라서 자동 완성 또는 검색 관련 기능에 사용할 때 특히 유형을 신중하게 선택하십시오.

---

보너스 포인트 : input type="search"에는 onsearch속성 을 사용할 수있는 기능이 있습니다 (하지만 Microsoft의 새로운 Edge 브라우저에서는이 기능이 작동하지 않음을 알았지 만) onkeypress=if(key=13) { function() }.

---

input type = "search"를 사용하면 keybord enterkey의 텍스트가 "search"로 표시되므로 사용자 경험이 향상 될 수 있습니다. 그러나이 유형을 사용하는 경우 스타일을 조정해야합니다.

---

It depends on the programmers point of view, a programmer can easily determine the purpose of the input by looking on the type and it's easy for CSS styling and for JavaScript or JQuery to verify rule in the inputs.

---

But it has a bad affect on yout input element, if you set

<input type="search">

And in your css you set

input {background: url("images/search_bg.gif");}

It wont showup at all.

참고URL : https://stackoverflow.com/questions/11589770/input-type-text-vs-input-type-search-in-html5