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.
