Ejercicio propuesto: Filtrando imágenes con botones de radio

assignmentDescripción del ejercicio

Crea un formulario de búsqueda de imágenes que utilice botones de radio para opciones de filtrado mutuamente excluyentes.

checklistRequisitos del formulario

search

Campo de texto para términos de búsqueda

photo_size_select_large

Botones de radio para filtrar por tamaño

palette

Botones de radio para filtrar por color

category

Botones de radio para filtrar por tipo

sort

Botones de radio para ordenamiento

settings

Parámetros ocultos para motor de búsqueda

codeEstructura del formulario

<form action="/buscar-imagenes" method="get">
  <input type="text" name="q" placeholder="Busca imágenes..." required>
  <input type="hidden" name="tbm" value="isch">

  <div class="filter-section">
    <h4>Tamaño de imagen</h4>
    <div class="filter-options">
      <div class="filter-option">
        <input type="radio" id="size-any" name="tbs" value="" checked>
        <label for="size-any">Cualquier tamaño</label>
      </div>
      <div class="filter-option">
        <input type="radio" id="size-large" name="tbs" value="isz:l">
        <label for="size-large">Grandes</label>
      </div>
    </div>
  </div>

  <div class="filter-section">
    <h4>Color</h4>
    <div class="filter-options">
      <div class="filter-option">
        <input type="radio" id="color" name="ic" value="color" checked>
        <label for="color">A color</label>
      </div>
      <div class="filter-option">
        <input type="radio" id="gray" name="ic" value="gray">
        <label for="gray">Blanco y negro</label>
      </div>
    </div>
  </div>

  <button type="submit">Buscar imágenes</button>
</form>

lightbulbConsejos para el ejercicio

  • check_circleAgrupa botones de radio con fieldset y legend
  • check_circleUsa el mismo atributo name para botones mutuamente excluyentes
  • check_circleMarca una opción como checked por defecto
  • check_circleAsegúrate de que el formulario sea accesible