filter_listFiltrado de resultados
Técnicas y elementos HTML para implementar filtros avanzados que permitan a los usuarios refinar sus búsquedas según criterios específicos.
buildTécnicas de filtrado
arrow_drop_down_circle
Listas desplegables
Para opciones predefinidas como tamaño, color o tipo
radio_button_checked
Botones de radio
Para seleccionar una única opción entre varias
check_box
Casillas de verificación
Para permitir múltiples selecciones simultáneas
date_range
Selectores de fecha
Para filtrar resultados por rangos temporales
codeEjemplo de filtros
<div class="filter-section">
<h4>Tamaño de imagen</h4>
<select name="imgsize">
<option value="">Cualquier tamaño</option>
<option value="large">Grandes</option>
<option value="medium">Medianas</option>
<option value="small">Pequeñas</option>
</select>
</div>
<div class="filter-section">
<h4>Tipo de imagen</h4>
<div class="filter-options">
<div class="filter-option">
<input type="radio" id="photo" name="imgtype" value="photo">
<label for="photo">Fotos</label>
</div>
<div class="filter-option">
<input type="radio" id="clipart" name="imgtype" value="clipart">
<label for="clipart">Dibujos</label>
</div>
</div>
</div>
<h4>Tamaño de imagen</h4>
<select name="imgsize">
<option value="">Cualquier tamaño</option>
<option value="large">Grandes</option>
<option value="medium">Medianas</option>
<option value="small">Pequeñas</option>
</select>
</div>
<div class="filter-section">
<h4>Tipo de imagen</h4>
<div class="filter-options">
<div class="filter-option">
<input type="radio" id="photo" name="imgtype" value="photo">
<label for="photo">Fotos</label>
</div>
<div class="filter-option">
<input type="radio" id="clipart" name="imgtype" value="clipart">
<label for="clipart">Dibujos</label>
</div>
</div>
</div>