input type = "text" vs input type = "search" en HTML5

Soy nuevo en HTML5 cuando comencé a trabajar con los nuevos campos de entrada de formulario de HTML5. Cuando estoy trabajando con campos de entrada de formulario, especialmente <input type="text" />e <input type="search" />IMO, no hubo ninguna diferencia en todos los principales navegadores, incluidos Safari, Chrome, Firefox y Opera. Y el campo de búsqueda también se comporta como un campo de texto normal.

Entonces, ¿cuál es la diferencia entre input type="text"y input type="search"en HTML5?

¿Cuál es el verdadero propósito de <input type="search" />?

En este momento, no hay un gran problema entre ellos, tal vez nunca lo habrá. Sin embargo, el objetivo es dar a los fabricantes de navegadores la capacidad de hacer algo especial con él, si así lo desean.

Piense <input type="number">en los teléfonos celulares, en las teclas numéricas o type="email"en una versión especial del teclado, con @ y .com y el resto disponible.

En un teléfono celular, la búsqueda podría mostrar un applet de búsqueda interno, si así lo desean.

Por otro lado, ayuda a los desarrolladores actuales con css.

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

No hace absolutamente nada en la mayoría de los navegadores. Simplemente se comporta como una entrada de texto. Esto no es un problema La especificación no requiere que haga nada especial. Sin embargo, los navegadores WebKit lo tratan un poco diferente, principalmente con estilo.

Por defecto, una entrada de búsqueda en WebKit tiene un borde insertado, esquinas redondeadas y un estricto control tipográfico.

También,

Esto no está documentado en ningún lugar que yo sepa ni en la especificación, pero si agrega un parámetro de resultados en la entrada, WebKit aplicará una pequeña lupa con una flecha desplegable que muestra los resultados anteriores.

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

Referencia

Sobre todo, proporciona un significado semántico a la input type.

Actualizar:

Chrome 51 eliminó la compatibilidad con el atributo de resultados:

Visualmente / funcionalmente, 2 diferencias si el tipo de entrada es ' buscar ': -

1. Obtienes una ' X símbolo ' al final del cuadro de entrada / búsqueda para borrar los textos en el cuadro
2. Al presionar la tecla ' Esc ' en el teclado también se borran los textos

En algunos navegadores, también es compatible con los atributos "resultados" y "autoguardado" que proporcionan la funcionalidad automática de "búsquedas recientes" con el icono de lupa.

Más información

En realidad, tenga mucho cuidado al asumir que no hace nada. Cuando va a entradas de estilo con la búsqueda de tipo, tienen ciertos atributos que no se pueden cambiar. Intente cambiar el borde en uno y lo encontrará bastante imposible. Hay varios otros atributos CSS no permitidos, mira esto para todos los detalles.

También, como mencionó Jashwant, está el atributo de resultado, aunque no funciona muy bien a menos que también incluya el atributo de autoguardado. Sin embargo, el menú desplegable no funcionará en la mayoría de los navegadores, así que úselo bajo su propio riesgo.

Hay una diferencia en la acción del navegador, cuando escribe algunas palabras y luego teclea ESC en la entrada type="search"en Chrome / Safari, el cuadro de entrada se borrará. pero en el type="text"escenario, las palabras no se borrarán. Por lo tanto, tenga cuidado al elegir el tipo, especialmente cuando lo utiliza para la función de autocompletar o búsqueda

Punto extra: input type="search"tiene la capacidad de usar el onsearchatributo (aunque he notado que esto NO funciona en el nuevo navegador Edge de Microsofts), lo que elimina la necesidad de escribir algo personalizado onkeypress=if(key=13) { function() }.

mediante input type = "search", haga que el texto de la tecla de acceso enterkey muestre "search", lo que puede mejorar la experiencia del usuario. sin embargo, debe ajustar el estilo si usa este tipo.

Depende del punto de vista de los programadores, un programador puede determinar fácilmente el propósito de la entrada al observar el tipo y es fácil para el estilo CSS y para JavaScript o JQuery verificar la regla en las entradas.

Pero tiene un efecto negativo en su elemento de entrada, si configura

<input type="search">

Y en tu css estableces

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

No aparecerá en absoluto.