Crear un formulario de inscripción accesible es un proyecto práctico de frontend para quienes conocen los fundamentos de formularios HTML, CSS y JavaScript. Crearás una página de inscripción para un pequeño taller artesanal donde los visitantes puedan elegir una sesión, completar el formulario con el teclado y recibir la confirmación de un servidor real.
Los laboratorios guiados comienzan utilizando un ejemplo funcional con el teclado y después desarrollan la distribución del formulario, sus mensajes de estado y el envío asíncrono. Un desafío independiente aplica las mismas técnicas a otras sesiones y relaciones entre campos. Cada laboratorio empieza con sus propios archivos y datos preparados.
Lo que aprenderás
Al completar el curso, podrás:
- relacionar etiquetas visibles, instrucciones, restricciones de entrada y mensajes de error para que los visitantes sepan qué introducir y cómo corregir un problema;
- crear un formulario adaptable con un orden de lectura claro, un foco de teclado visible y mensajes que no dependan solo del color;
- enviar datos con
fetchyasync/await, mostrar cuándo hay una solicitud pendiente y evitar repetir la acción de envío mientras se espera; - mostrar un ID de confirmación emitido por el servidor solo cuando se acepte la inscripción y distinguir entre el rechazo de un campo, una sesión sin plazas y un fallo temporal del servicio;
- conservar la información introducida tras un rechazo o fallo, recuperarse del fallo temporal enseñado y mantener intactas las inscripciones existentes.
A quién va dirigido este curso
Este curso está dirigido a quienes quieren combinar ejercicios web individuales para crear una experiencia completa de inscripción en talleres.
Requisitos previos: Fundamentos de formularios HTML y distribución con CSS, además de objetos, funciones y eventos de JavaScript. También debes conocer la selección básica de elementos del DOM. Debes saber abrir y guardar archivos del proyecto. Los laboratorios guiados presentan la semántica de los formularios, la validación, el código asíncrono, las respuestas HTTP y la gestión de estados necesarios antes del desafío. No necesitas React.
Entorno de aprendizaje: LabEx proporciona un entorno de programación preparado en el navegador, una vista previa de la página y una API y base de datos locales funcionales. Las identidades y los datos de contacto de práctica son sintéticos. Editarás el frontend; las etiquetas del sitio y la salida de ejecución permanecen en inglés.
Preguntas frecuentes
¿Escribiré código?
Sí. Completarás HTML, CSS y JavaScript en un proyecto preparado y después utilizarás el formulario mediante interacciones reales en el navegador, incluida la entrada por teclado, el envío, el rechazo y la recuperación.
¿Crearé el backend o sus controles de seguridad?
No. La API y la base de datos ya están preparadas. Harás que el frontend refleje lo que el servidor aceptó. La validación del navegador y un botón de envío desactivado no implementan la seguridad del backend ni garantizan un manejo seguro de solicitudes simultáneas en producción.
¿Completar el curso certifica la accesibilidad?
No. Practicarás comportamientos concretos de etiquetado, teclado, foco y mensajes. Una evaluación completa de accesibilidad abarca más que estos ejercicios.
