Ejercicio propuesto: Formulario de pago completo

assignmentDescripción del ejercicio

Crea un formulario de pago completo aplicando todos los conceptos aprendidos sobre estructuración de formularios HTML avanzados.

checklistRequisitos del formulario

person

Sección de información personal con tratamiento, nombre y email

location_on

Sección de dirección de envío con todos los campos necesarios

credit_card

Sección de información de pago con tipo de tarjeta y datos

security

Validación de campos obligatorios con atributos HTML5

style

Uso de fieldset y legend para cada sección

format_align_left

Estructura clara con elementos HTML semánticos

codeEstructura base del formulario

<form action="/procesar-pago" method="post">
  <h2>Formulario de Pago</h2>
  <p>Los campos obligatorios se han marcado con <strong>*</strong>.</p>

  <!-- Sección de información personal -->
  <fieldset>
    <legend>Información personal</legend>
    <!-- Campos del formulario aquí -->
  </fieldset>

  <!-- Sección de dirección de envío -->
  <fieldset>
    <legend>Dirección de envío</legend>
    <!-- Campos del formulario aquí -->
  </fieldset>

  <!-- Sección de información de pago -->
  <fieldset>
    <legend>Información de pago</legend>
    <!-- Campos del formulario aquí -->
  </fieldset>

  <button type="submit">Procesar pago</button>
</form>

lightbulbConsejos para el ejercicio

  • check_circleUsa atributos de validación HTML5 como required, pattern, min, max
  • check_circleAgrupa campos relacionados dentro de cada fieldset
  • check_circleAsocia cada label con su input mediante el atributo for
  • check_circleUtiliza el tipo de input apropiado para cada dato (email, tel, number)