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. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com