forms - input type image html
input type="text" vs input type="search" en HTML5 (11)
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 el estilo.
Una entrada de búsqueda en WebKit de forma predeterminada 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 está 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>
Sobre todo, proporciona un significado semántico al input type .
Actualizar:
Soy nuevo en HTML5 y comencé a trabajar con los nuevos campos de entrada de formularios de HTML5. Cuando estoy trabajando con campos de entrada de formularios, especialmente <input type="text" /> y <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" /> ?
Depende del punto de vista de los programadores, un programador puede determinar fácilmente el propósito de la entrada observando el tipo y es fácil para el estilo de CSS y para JavaScript o JQuery para verificar la regla en las entradas.
En algunos navegadores, también es compatible con los atributos "resultados" y "autoguardar" que proporciona una funcionalidad automática de "búsquedas recientes" con el icono de la lupa.
En este momento, no hay un gran acuerdo entre ellos, tal vez nunca lo habrá. Sin embargo, el objetivo es brindarles a los navegadores la posibilidad de hacer algo especial con él, si así lo desean.
Piense en <input type="number"> en teléfonos celulares, mostrando los números de los pads, o type="email" mostrando 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 interna, si así lo desean.
Por otro lado, ayuda a los desarrolladores actuales con css.
input[type=search]:after { content : url("magnifying-glass.gif"); }
En realidad, tenga mucho cuidado al asumir que no hace nada. Cuando vaya a las entradas de estilo con la búsqueda de tipo, tienen ciertos atributos que no se pueden cambiar. Intenta cambiar el borde en uno y lo encontrarás completamente imposible. Hay varios otros atributos de CSS no permitidos, mira Reference para todos los detalles.
También como lo menciona Jashwant existe 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, por lo que debe utilizarlo bajo su propio riesgo.
Hay una diferencia en la acción del navegador, cuando escribes algunas palabras y luego tecleas ESC en input type="search" en chrome / safari, se borrará el cuadro de entrada. pero en el escenario type="text" , las palabras no se borrarán. Así que tenga cuidado al elegir el tipo, especialmente cuando lo usa para autocompletar o buscar características relacionadas
La mayoría de las funcionalidades son las mismas, pero una diferencia que podemos ver con los navegadores es que la entrada de search es un poco diferente en SAFARI y CROMO. Agregan el ícono "x" en el lado derecho , pero es lo mismo para Firefox, IE , etc.
En resumen, no hay diferencia para Firefox, IE, Opera, solo para safari y cromo. Datos de pegado RAW La mayoría de las funcionalidades son las mismas, pero una diferencia que podemos ver con los navegadores es que la entrada de search es un poco diferente en SAFARI y CHROME. Agregan el ícono "x" en el lado derecho , pero es lo mismo para Firefox, IE , etc.
En resumen, no hay diferencia para Firefox, IE, Opera, solo para safari y cromo.
Pero tiene un mal efecto en tu elemento de entrada, si configuras
<input type="search">
Y en tu css estableces
input {background: url("images/search_bg.gif");}
No aparecerá en absoluto.
Punto de bonificación: input type="search " tiene la capacidad de usar el atributo onsearch (aunque he notado que esto NO funciona en el nuevo navegador Edge de Microsoft), lo que elimina la necesidad de escribir un onkeypress=if(key=13) { function() } personalizado onkeypress=if(key=13) { function() } cosa.
Visualmente / funcionalmente, 2 diferencias si el tipo de entrada es '' buscar '': -
- Obtienes un símbolo '' X '' al final del cuadro de entrada / búsqueda para borrar los textos en el cuadro
- Presionar la tecla '' Esc '' en el teclado también borra los textos
usando input type = "search" el teclado introduce el texto de la tecla show "search", lo que puede mejorar la experiencia del usuario. sin embargo, debe ajustar el estilo si usa este tipo.