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