Tu página escucha: formularios con label y validación mínima
Al terminar vas a poder:Diseñar un formulario con campos básicos (input text/email/number, textarea, button), cada uno con su label asociado por for↔id y validación mínima (required), cuidando la accesibilidad.
De mostrar a preguntar: la anatomía de un formulario
Tu formulario de contacto, campo por campo
Truco de IA: audita la accesibilidad que la IA promete
Auditoría en parejas, checklist y entrega
Lo que entregas
Formulario de contacto funcionando dentro de una section del main: cada campo con su label conectado por for↔id, required en los campos clave, y la validación comprobada en vivo en el navegador (el envío vacío se detiene; el envío completo pasa). El sitio queda completo y navegable con la tabla de la Clase A intacta, más la entrada de bitácora de IA de la auditoría al formulario generado.
Cómo se califica
- Formulario dentro de una section del main 15%
- cada campo con label asociado por for↔id exacto 25%
- tipos correctos (text/email/number/textarea) y button de envío 15%
- required comprobado en el navegador (envío vacío detenido) 20%
- auditoría del formulario de la IA registrada en bitácora (qué aceptó / qué rechazó y por qué) 15%
- entrega con nombre y carpeta correctos en Drive 10%.
Antes de irte: piensa en lo que hiciste
- ¿Por qué un label conectado con for↔id vale más que un texto suelto junto al campo?
- ¿Qué diferencia hay entre que la IA diga «accesible» y que tú lo compruebes en el navegador?
- ¿Qué campo de tu formulario decidiste dejar opcional y por qué? Transferencia: la próxima vez que llenes un formulario real —una inscripción de la escuela, un trámite en gob.mx— ¿qué señales de un formulario bien hecho vas a reconocer?
Resultado de aprendizaje
RAP 4.2 — Diseña formularios con campos básicos y validación mínima, cuidando la accesibilidad (labels). (RAP 4.1 —tablas— se trabajó en la Clase A.)