infoDescripción del ejemplo
Formulario que permite al usuario seleccionar el tamaño de un producto (pequeño, mediano, grande) utilizando botones de radio agrupados con fieldset y legend.
starsVentajas de esta estructura
accessibility
Mejora la accesibilidad para lectores de pantalla
group_work
Agrupa semánticamente opciones relacionadas
touch_app
Facilita la selección de una única opción
style
Permite estilizar el grupo como un conjunto
codeCódigo HTML
<form action="/procesar" method="post">
<fieldset>
<legend>Tamaño del producto</legend>
<div class="radio-option">
<input type="radio" id="small" name="size" value="small" checked>
<label for="small">Pequeño</label>
</div>
<div class="radio-option">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Mediano</label>
</div>
<div class="radio-option">
<input type="radio" id="large" name="size" value="large">
<label for="large">Grande</label>
</div>
</fieldset>
</form>
<fieldset>
<legend>Tamaño del producto</legend>
<div class="radio-option">
<input type="radio" id="small" name="size" value="small" checked>
<label for="small">Pequeño</label>
</div>
<div class="radio-option">
<input type="radio" id="medium" name="size" value="medium">
<label for="medium">Mediano</label>
</div>
<div class="radio-option">
<input type="radio" id="large" name="size" value="large">
<label for="large">Grande</label>
</div>
</fieldset>
</form>