Codigo HTML para incorporar barras de búsqueda

9

Hoy te dejamos una lista con distintos formularios de búsqueda y el respectivo codigo HTML para que pueda implementar esta útil característica a tu pagina web.

La barra de búsqueda es uno de los elementos más requeridos en una pagina web. Este simple componente contribuye efectivamente a mejorar la experiencia del usuario, haciendo la página más amigable y fácil de explorar. Sin mencionar que es sencillo implementarla en un proyecto.

Para hacer este proceso más sencillo, hemos decidido listarte algunos formularios de búsqueda que puedes utilizar. Si pinchas sobre la imagen podrás obtener el codigo HTML para incorporar dichos formularios a tu sitio web.

Fancy Search Box

fancy-search-box-codigo-html

El programador ha combinado dos estilos diferentes, dándole un aspecto en 3D. Puedes copiar el codigo HTML y agregarlo a tu proyecto.

Search bar animation

Codigo HTML de Search Bar Animation

La barra de búsqueda se puede expandir, dando más espacio a los usuarios para que escriban. El codigo HTML puede ser copiado e integrado en tu proyecto.

Super cool search input bar

Codigo HTML de Super Cool Search

La barra de búsqueda luce sencilla y limpia. Se han integrado elementos que le dan una cierta apariencia en 3D.

Cube animation

Codigo HTML de Cube Animation

Esta barra de búsqueda nos muestra una animación cada vez que pinchamos en el botón de búsqueda: se extiende la barra o se puede rotar y crecer para poder ingresar nuestras palabras de búsqueda. En la página hay una demo, desafortunadamente sólo funciona en Safari y Firefox.

Flexible Search box

Codigo HTML de Flexible Search Box

Esta caja de búsqueda, como su nombre indica, se puede adaptar a los distintos tamaños de pantalla.

Pulsating CSS3 Input Search Box

Codigo HTML Pulsating Search Box

Atrae la atención del usuario con una luz que se desprende del borde de la barra de búsqueda en cuanto pinchas sobre ella. Este efecto se desactiva cuando el usuario comienza a ingresar sus palabras de búsqueda.

 

Como hemos podido observar, hay diversos formularios de búsqueda, desde los más básicos hasta los que contienen animaciones y hacen la experiencia del usuario más interactiva y agradable cuando navega por algún sitio web.

Comparte este post.
Artículos Recomendados Para Tí:

9 Comments

  1. Elianne Eligon en

    Hola buenos días. Estoy intentando hacer una pagina web para mi pequeña Agencia de viajes y quiero colocar una barra de búsquedas que incluya varias opciones, que el cliente pueda seleccionar y al clickear el boton buscar le muestre los resultados.
    Por ejemplo:
    Que pueda seleccionar El destino de una lista desplegable, el mes en que desea viajar también de una lista desplegable, y escoger entre 2 opciones de ciudad de salida mediante botón de radio.

  2. Hermanos descargué una de las barras pero no se me muestra como en el ejemplo implementé su html css y javascript y no funciona css en carpeta style y lo demas en el html saludos

    • html, css y javascript deben ir en archivos por separado para que este mas ordenado y funcione mejor. Y el javascript que aparece es solo una anotacion, no funciona