Campos búsqueda en HTML5

25/Mar/2019 HTML5 , 4 Comentarios

Cuando estemos construyendo una página web es muy probable que definamos una sección de búsqueda, la cual contenga un formulario. En este artículo veremos cómo podemos crear campos búsqueda en HTML5 para darle una mayor semántica a dichos formularios.

Y es que desde que se incluyeron los nuevos tipos de input dentro la especificación HTML5 hemos dejado de definir todos los formularios mediante los famosos input de tipo «text». Y ahora disponemos de campos de texto que llevan asociadas múltiples semánticas para los campos y, algunos de ellos, validaciones asociadas.

Para los campos búsqueda en HTML5 disponemos del tipo «search». Así montar nuestro formulario de búsqueda será sencillo. Simplemente tendremos que escribir los siguiente para agregar un campo de formulario el cual esté preparado para que el usuario introduzca una búsqueda:

<input type="search" id="busqueda" name="q"/>

Como vemos simplemente hemos utilizado el atributo type para indicar su semántica de tipo «search».

El formulario completo preparado para realizar una búsqueda quedaría de la siguiente forma.

<form action="https://lineadecodigo.com/search" method="get">
  <label for="busqueda">¿Qué quieres buscar?</label>
  <input type="search" id="busqueda" name="q"/>
  <input type="submit" value="Buscar"/>
</form>

Los campos de tipo «search», a diferencia de otros campos de texto de formulario con semántica, no tiene una visualización especial dentro de los navegadores. Es por ello que se seguirá viendo como un campo de entrada de texto de un formulario. Si bien, cuando se inspeccione nuestras páginas por los buscadores web, estas podrán identificar dónde está el formulario de búsqueda.

Cómo se puede observar, montar campos búsqueda en HTML5. ¿Puede ser útil o es mejor mantener los campos de texto básicos de un formulario? Pues eso ya lo dejo al gusto del lector.

 

Vídeos sobre HTML5


4 comentarios en “Campos búsqueda en HTML5”

Víctor Cuervo

Salvador Marquez

Perdon escribi mal no me busca nada

Víctor Cuervo

Víctor Cuervo

Realmente lo que hace es ponerse con formato de búsqueda, pero por defecto no busca nada eso hay que añadirselo.

Saludos.

Víctor Cuervo

Salvador Marquez

No

¿Qué quieres buscar?

me busca nada en mi pagina

Víctor Cuervo

Borealos

¡Gracias por la info Víctor! Crear campos de búsqueda es algo que prácticamente todas las páginas necesitan tener, así que es de gran utilidad saber cómo incorporarlo. Un saludo!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.