Search

Búsqueda

Actualizado el 14/03/2024

Este componente se emplea para que el usuario pueda realizar búsquedas de contenido en el sitio web o en una vista.

<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form ulpgcds-form--search" action="">
     <div class="ulpgcds-form__item">
          <label for="form-busqueda">Búsqueda en el sitio</label>
          <input type="search"  id="form-busqueda" name="busqueda" value="" placeholder="Introduce el texto que necesitas buscar" />
     </div>
     <div class="ulpgcds-form--search__item--submit">
          <input type="submit" name="submit" value="Buscar">
     </div>
</form> 

Variantes

Búsqueda con fondo azul

<> Código
× Ocultar Código
  • HTML
  • JS
<form class="ulpgcds-form ulpgcds-form--search ulpgcds-form--search--reverse" action="">
     <div class="ulpgcds-form__item">
          <label for="form-busqueda-2">Búsqueda en el sitio</label>
          <input  id="form-busqueda-2" type="search" name="busqueda" value="" placeholder="Introduce el texto que necesitas buscar" />
     </div>
     <div class="ulpgcds-form--search__item--submit">
          <input type="submit" name="submit" value="Buscar">
     </div>
</form> 

Uso del componente

La barra de búsqueda tiene una estructura muy concreta que puede ser aplicada a múltiples vistas. Puede tratarse de la búsqueda general de contenido o emplearse para filtrar contenido dentro de una vista.

Estilos CSS

Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.

Selector CSSDescripción
form.ulpgcds-formActiva la visualización de los estilos básicos de los formularios
form.ulpgcds-form--searchModificador para el componente de búsqueda
form div.ulpgcds-form--search__item--submitModificación específica para el botón de envío del formulario de búsqueda
form.ulpgcds-form--search--reverseVersión del formulario de búsqueda en un fondo de color distinto de blanco
Estado del componente
Estable