assignmentDescripción del ejercicio
Crea un formulario de búsqueda de imágenes con listas desplegables para filtrar resultados por tamaño, color y tipo de imagen.
checklistRequisitos del formulario
search
Campo de texto para términos de búsqueda
photo_size_select_large
Lista desplegable para filtrar por tamaño
palette
Lista desplegable para filtrar por color
category
Lista desplegable para filtrar por tipo
format_list_numbered
Ordenamiento de resultados
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">
<label for="size">Tamaño:</label>
<select id="size" name="tbs">
<option value="">Cualquier tamaño</option>
<option value="isz:l">Grandes</option>
<option value="isz:m">Medianas</option>
<option value="isz:s">Pequeñas</option>
</select>
</div>
<div class="filter-section">
<label for="color">Color:</label>
<select id="color" name="ic">
<option value="color">A color</option>
<option value="gray">Blanco y negro</option>
<option value="trans">Transparente</option>
</select>
</div>
<button type="submit">Buscar imágenes</button>
</form>
<input type="text" name="q" placeholder="Busca imágenes..." required>
<input type="hidden" name="tbm" value="isch">
<div class="filter-section">
<label for="size">Tamaño:</label>
<select id="size" name="tbs">
<option value="">Cualquier tamaño</option>
<option value="isz:l">Grandes</option>
<option value="isz:m">Medianas</option>
<option value="isz:s">Pequeñas</option>
</select>
</div>
<div class="filter-section">
<label for="color">Color:</label>
<select id="color" name="ic">
<option value="color">A color</option>
<option value="gray">Blanco y negro</option>
<option value="trans">Transparente</option>
</select>
</div>
<button type="submit">Buscar imágenes</button>
</form>
lightbulbConsejos para el ejercicio
- check_circleUsa atributos de validación para campos obligatorios
- check_circleOrganiza los filtros en secciones lógicas
- check_circleAñade JavaScript para mejorar la experiencia
- check_circleAsegúrate de que el formulario sea accesible