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

132

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

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

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

forms html input

— 비진 파울 라지
소스

1

html5tutorial.info/html5-search.php

— Marc B

176

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

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

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

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

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

— Norguard
소스

12

유효한 두 포인트에 대해 +1, 1) internal search applet for mobile phone. 2) ability to make better presentation. 그러나, 나는 다른 목적이 없는지 확인하고 싶기 때문에 대답을 기다릴 생각입니다.)

— Vijin Paulraj

지금은 없습니다. 입력은 모두 현재 이름 일뿐입니다 (입력 [type = color]에 대한 부분적인 지원 만 있음). 브라우저는 고유 한 특수 처리 (type = number 또는 type = email 또는 type = range)를 구현했습니다. 다른 옵션은 없습니다. 브라우저에서 특수하게 처리했거나 그렇지 않습니다. 현재 대부분의 브라우저에서 type = search는 지원하지 않으며 아마도 그렇지 않을 수도 있습니다 (MAYBE를 제외하고 iTunes 또는 다른 앱의 검색 상자처럼 보이게 할 수는 없습니다). 현재 검색 창임을 알고 기능 / 프레젠테이션을 추가 할 수 있습니다.

— Norguard

39

한 가지 차이점은 검색 입력에서 [Esc]를 누르면 결과가 지워진다는 것입니다. 사용자가 자주 사용하는 경우 매우 편리합니다.

— Josh Habdas

@JoshH 그 입니다 슈퍼 편리합니다. 현재 어떤 브라우저 (및 버전)에 영향을 미치는지 알고 있습니까? 나는 1 년 반 전과 현재의 풍경이 지금과 매우 다르다는 것을 감안할 때 답을 업데이트하고 상록수의 현재 (/ 미래) 상태로 가져 올 것입니다.

— Norguard

2

교체 된 요소 에는 의사 요소를 사용하지 않는 것이 좋습니다 . 경우에 따라 작동하지만 표준 에 위배 됩니다.

— Paul Kozlovitch

29

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

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

또한,

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

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

참고

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

최신 정보:

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

— 재 스완 트
소스

24

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

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

— 가혹한 라즈
소스

이것은 가장 확실하게 모든 곳에서 발생하지 않습니다. 이것은 어떤 환경에서 관찰됩니까?

— Stéphane Gourichon

7

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

더 많은 정보

— 스콧 윌슨
소스

1

Chrome 51의 results속성에 대한 지원이 제거되었습니다 : developers.google.com/web/updates/2016/08/…

— Flimm

2

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

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

— 세이지 88
소스

1

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

— 이데아
소스

1

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

— 제임스 그 로브 스
소스

1

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

— 칭양 유
소스

0

프로그래머의 관점에 따라, 프로그래머는 유형을보고 입력의 목적을 쉽게 결정할 수 있으며 CSS 스타일링과 JavaScript 또는 JQuery가 입력의 규칙을 쉽게 확인할 수 있습니다.

— 필
소스

-1

그러나 설정하면 yout 입력 요소에 나쁜 영향을 미칩니다.

<input type="search">

그리고 당신의 CSS에서 당신은 설정

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

전혀 나타나지 않습니다.

— 강철
소스