Ejercicio propuesto: Bebida y hamburguesa

assignmentDescripción del ejercicio

Crea una página web para elegir el tamaño tanto de una bebida como de una hamburguesa, ambas opciones dentro de un fieldset diferente con el legend correspondiente.

checklistRequisitos

looks_one

Crear un fieldset para la bebida con su legend

looks_two

Crear un fieldset para la hamburguesa con su legend

looks_3

Incluir tres tamaños para cada producto: pequeño, mediano y grande

looks_4

Usar botones de radio para cada opción de tamaño

looks_5

Asegurar que cada opción tenga su label correspondiente

codeSolución propuesta

<form action="/procesar-pedido" method="post">
  <fieldset>
    <legend>Tamaño de la bebida</legend>
    <div class="radio-option">
      <input type="radio" id="drink-small" name="drink-size" value="small">
      <label for="drink-small">Pequeño</label>
    </div>
    <div class="radio-option">
      <input type="radio" id="drink-medium" name="drink-size" value="medium" checked>
      <label for="drink-medium">Mediano</label>
    </div>
    <div class="radio-option">
      <input type="radio" id="drink-large" name="drink-size" value="large">
      <label for="drink-large">Grande</label>
    </div>
  </fieldset>
  <fieldset>
    <legend>Tamaño de la hamburguesa</legend>
    <div class="radio-option">
      <input type="radio" id="burger-small" name="burger-size" value="small">
      <label for="burger-small">Pequeño</label>
    </div>
    <div class="radio-option">
      <input type="radio" id="burger-medium" name="burger-size" value="medium" checked>
      <label for="burger-medium">Mediano</label>
    </div>
    <div class="radio-option">
      <input type="radio" id="burger-large" name="burger-size" value="large">
      <label for="burger-large">Grande</label>
    </div>
  </fieldset>
</form>

visibilityVista previa

Tamaño de la bebida
Tamaño de la hamburguesa