Reto práctico: formulario de contacto accesible

Ejercicio integrador: construye un formulario de contacto completo con agrupación, validación nativa y etiquetas accesibles. Puedes ver la solución para comparar.

En este reto aplicarás formularios: label, input con tipos adecuados, required, fieldset y legend.

El objetivo es un formulario de contacto con nombre, email, asunto y mensaje, bien etiquetado y con validación nativa donde tenga sentido.

Intenta hacerlo tú primero; después compara con la solución de referencia.

  • Construye un formulario de contacto accesible y válido.
  • Crea un documento HTML que contenga un formulario de contacto con: título de la página (h1), un fieldset que agrupe los datos personales (nombre y email) con su legend; otro fieldset o sección para asunto (texto) y mensaje (textarea); botón de envío. Todos los campos deben tener label asociado (for/id o envolviendo el control). El nombre y el email deben ser obligatorios (required); el email debe ser type="email". No hace falta JavaScript ni acción de envío real.
  • Fieldset + legend para agrupar «Datos personales» (nombre, email).
  • Label para cada control; email con type="email" y required.
  • Campo asunto y textarea para mensaje, con sus labels.

Enunciado del reto

Construye un formulario de contacto accesible y válido.

Crea un documento HTML que contenga un formulario de contacto con: título de la página (h1), un fieldset que agrupe los datos personales (nombre y email) con su legend; otro fieldset o sección para asunto (texto) y mensaje (textarea); botón de envío. Todos los campos deben tener label asociado (for/id o envolviendo el control). El nombre y el email deben ser obligatorios (required); el email debe ser type="email". No hace falta JavaScript ni acción de envío real.

  • Fieldset + legend para agrupar «Datos personales» (nombre, email).
  • Label para cada control; email con type="email" y required.
  • Campo asunto y textarea para mensaje, con sus labels.
  • Botón type="submit".

Solución de referencia

Una posible solución para comparar con la tuya.

La solución incluye documentación básica (doctype, lang, charset), un título y el formulario con dos fieldset, labels correctos y validación nativa. Puedes revisarla para ver cómo se usan legend, for/id y required.

HTML
25

Reto práctico: formulario de contacto accesible

Ejercicio integrador: construye un formulario de contacto completo con agrupación, validación nativa y etiquetas accesibles. Puedes ver la solución para comparar.

Código del tema: <form> · <fieldset>

📘 Teoría

Enunciado del reto

Construye un formulario de contacto accesible y válido.

Crea un documento HTML que contenga un formulario de contacto con: título de la página (h1), un fieldset que agrupe los datos personales (nombre y email) con su legend; otro fieldset o sección para asunto (texto) y mensaje (textarea); botón de envío. Todos los campos deben tener label asociado (for/id o envolviendo el control). El nombre y el email deben ser obligatorios (required); el email debe ser type="email". No hace falta JavaScript ni acción de envío real.

  • Fieldset + legend para agrupar «Datos personales» (nombre, email).
  • Label para cada control; email con type="email" y required.
  • Campo asunto y textarea para mensaje, con sus labels.
  • Botón type="submit".

Solución de referencia

Una posible solución para comparar con la tuya.

La solución incluye documentación básica (doctype, lang, charset), un título y el formulario con dos fieldset, labels correctos y validación nativa. Puedes revisarla para ver cómo se usan legend, for/id y required.

🧪 Aprende probando

Ejemplo Tu solución Escribe aquí tu formulario de contacto. Luego compara con la solución de referencia.
Ejemplo Solución de referencia (puedes ver el código) Formulario de contacto completo con agrupación y validación nativa. Úsala para comparar con tu código.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre HTML.

Test de HTML

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .