Saltar al contenido
Curso de HTML
Todos los cursos
Curso de HTML › Lección 5 › Ejercicio

Ejercicio: Formularios

  • ⏱ 35 minutos
  • 📶 Nivel: principiante

Objetivo

Construir un formulario de contacto accesible y con validación, usando los distintos tipos de campo de la lección.

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

💡 Pista 1: al hacer clic en el texto no pasa nada

Revisa que el for del <label> sea idéntico al id del <input>, mayúsculas incluidas.

💡 Pista 2: los radios me dejan marcar los dos

Los dos <input type="radio"> deben tener el mismo name, por ejemplo name="respuesta", y cada uno un value distinto.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

    ✅ Ver una solución de ejemplo

    Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

    contacto.html (dentro de body)
    <h1>Contacto</h1>
<form action="/enviar" method="post">
  <p>
    <label for="nombre">Nombre</label><br>
    <input type="text" id="nombre" name="nombre" required>
  </p>
  <p>
    <label for="correo">Correo</label><br>
    <input type="email" id="correo" name="correo" required>
  </p>
  <p>
    <label for="fecha">Fecha preferida</label><br>
    <input type="date" id="fecha" name="fecha">
  </p>
  <p>
    <label for="tel">Teléfono</label><br>
    <input type="tel" id="tel" name="telefono">
  </p>
  <p>
    <label for="motivo">Motivo</label><br>
    <select id="motivo" name="motivo">
      <option>Duda</option>
      <option>Sugerencia</option>
      <option>Otro</option>
    </select>
  </p>
  <fieldset>
    <legend>¿Cómo prefieres que te respondamos?</legend>
    <input type="radio" id="r-correo" name="respuesta" value="correo" checked>
    <label for="r-correo">Por correo</label>
    <input type="radio" id="r-tel" name="respuesta" value="telefono">
    <label for="r-tel">Por teléfono</label>
  </fieldset>
  <p>
    <label for="mensaje">Mensaje</label><br>
    <textarea id="mensaje" name="mensaje" rows="4" minlength="10" required></textarea>
  </p>
  <p>
    <input type="checkbox" id="acepto" name="acepto" required>
    <label for="acepto">Acepto el aviso de privacidad</label>
  </p>
  <button type="submit">Enviar mensaje</button>
  <button type="reset">Limpiar</button>
</form>

    💡 🏁 Reto extra (opcional)

    Agrega un <datalist> para sugerir opciones en un campo de texto (busca cómo funciona en MDN) y un campo type="range" para valorar tu satisfacción del 1 al 10.