tipo de entrada = "texto" vs tipo de entrada = "pesquisa" em HTML5

Eu sou novo no HTML5, pois comecei a trabalhar com os novos campos de entrada de formulário do HTML5. Quando estou trabalhando com campos de entrada de formulário, especialmente <input type="text" />e <input type="search" />IMO não havia nenhuma diferença em todos os principais navegadores, incluindo o Safari, Chrome, Firefox e Opera. E o campo de pesquisa também se comporta como um campo de texto comum.

Então, qual é a diferença entre input type="text"e input type="search"no HTML5?

Qual é o verdadeiro objetivo <input type="search" />?

No momento, não há um grande acordo entre eles - talvez nunca exista. No entanto, o objetivo é dar aos fabricantes de navegadores a capacidade de fazer algo especial com ele, se quiserem.

Pense <input type="number">em telefones celulares, exibindo blocos de números ou type="email"uma versão especial do teclado, com @ e .com e o restante disponível.

Em um telefone celular, a pesquisa poderia exibir um applet de pesquisa interno, se eles quisessem.

Por outro lado, ajuda os desenvolvedores atuais com css.

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

Não faz absolutamente nada na maioria dos navegadores. Apenas se comporta como uma entrada de texto. Isto não é um problema. A especificação não exige que ele faça nada de especial. No entanto, os navegadores WebKit o tratam de maneira um pouco diferente, principalmente com o estilo.

Uma entrada de pesquisa no WebKit, por padrão, possui uma borda interna, cantos arredondados e um rígido controle tipográfico.

Além disso,

Isso não está documentado em nenhum lugar que eu conheça nem na especificação, mas se você adicionar um parâmetro de resultados na entrada, o WebKit aplicará uma pequena lupa com uma seta suspensa mostrando os resultados anteriores.

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

Referência

Acima de tudo, fornece um significado semântico para o input type.

Atualizar:

O Chrome 51 removeu o suporte para o atributo results:

Visualmente / funcionalmente, 2 diferenças se o tipo de entrada for ' search ': -

1. Você recebe um símbolo ' X ' no final da caixa de entrada / pesquisa para limpar os textos na caixa
2. Pressionar a tecla ' Esc ' no teclado também limpa os textos

Em alguns navegadores, ele também suporta os atributos "resultados" e "gravação automática", que fornecem a funcionalidade automática de "pesquisas recentes" com o ícone de lupa.

Mais informações

Na verdade, tenha muito cuidado ao supor que não faz nada. Quando você vai para estilizar entradas com a pesquisa de tipo, elas possuem certos atributos que não podem ser alterados. Tente mudar a borda de uma e você achará isso impossível. Existem vários outros atributos CSS não permitidos, confira isso para todos os detalhes.

Também como mencionado por Jashwant, há o atributo result, embora ele não funcione muito bem, a menos que você inclua também o atributo autosave. A lista suspensa não funcionará na maioria dos navegadores, portanto, use por sua própria conta e risco.

Há uma diferença de ação do navegador. Quando você digita algumas palavras e digita ESC na entrada type="search"no chrome / safari, a caixa de entrada é limpa. mas, no type="text"cenário, as palavras não serão apagadas. Portanto, tenha cuidado ao escolher o tipo, especialmente quando você o usa para preenchimento automático ou recurso relacionado à pesquisa

Ponto de bônus: input type="search"tem a capacidade de usar o onsearchatributo (embora eu tenha notado que isso NÃO funciona no novo Edge Browser da Microsofts), o que elimina a necessidade de escrever onkeypress=if(key=13) { function() }algo personalizado .

usando input type = "search", o texto da tecla enter do teclado mostra "search", o que pode melhorar a experiência do usuário. no entanto, você deve ajustar o estilo se estiver usando esse tipo.

Depende do ponto de vista dos programadores, um programador pode determinar facilmente o objetivo da entrada observando o tipo e é fácil para o estilo CSS e para JavaScript ou JQuery verificar a regra nas entradas.

Mas isso afeta negativamente o elemento de entrada, se você definir

<input type="search">

E no seu CSS você define

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

Não vai aparecer.