Crea un formulario de inscripción para un evento con GitHub Copilot

Apunta los campos que necesita tu formulario

Abre una libreta —de papel, la del móvil o un archivo de texto— y escribe las preguntas que quieres hacer. La mayoría de inscripciones para eventos necesitan entre cuatro y seis campos como mucho: nombre completo, correo electrónico, número de acompañantes, necesidades de alimentación o accesibilidad, y un cuadro de comentarios libres. Mantenlo corto; cada caja extra reduce el número de personas que terminan el formulario. Si tu evento tiene varias sesiones o tipos de entrada, añade un solo campo de "sesión" con un pequeño conjunto de opciones en lugar de varias cajas separadas.

Siguiente paso ↓

Crea una carpeta y el archivo HTML

Crea una carpeta nueva para el proyecto —llámala EventForm y guárdala en el Escritorio o en Documentos. Dentro, crea un archivo de texto en blanco y renómbralo como signup.html. La terminación .html le dice a tu ordenador "esto es una página web". Cómo crear el archivo en blanco depende de tu sistema: en Windows, busca algo como clic derecho → Nuevo → Documento de texto y luego renómbralo; en Mac, abre TextEdit, elige algo como Archivo → Nuevo y luego Archivo → Guardar como con el formato en texto plano. La redacción exacta del menú cambia según la versión —busca lo que te permita crear un archivo de texto en blanco.

Abre signup.html en VS Code arrastrándolo sobre la ventana, o usa Archivo → Abrir carpeta para elegir la carpeta EventForm.

Siguiente paso ↓

Añade un esqueleto básico de HTML

Con el archivo vacío abierto, escribe un pequeño esqueleto dentro. Cada línea es una etiqueta —un marcador que le dice al navegador qué hay entre la versión de apertura y la de cierre. La etiqueta <title> da nombre a la pestaña del navegador, la etiqueta <body> contiene lo que ve quien visita la página, y <!-- … --> es un comentario —una nota invisible que el navegador ignora. Este esqueleto le da a Copilot un lugar claro para rellenar tu formulario, así que escríbelo con cuidado y exactamente como se muestra.

Siguiente paso ↓

Activa Copilot en VS Code

En VS Code, mira el icono de Copilot en la barra lateral izquierda (parece dos corchetes solapados o puede tener la etiqueta Copilot). Haz clic para abrir el panel de Copilot. Si no has iniciado sesión, aparecerá un aviso pidiéndote que entres con tu cuenta de GitHub —haz clic en el botón para conectarte; se abrirá una pestaña del navegador y confirmas con la cuenta de GitHub que tiene acceso a Copilot. Acepta los permisos que te pida el aviso.

Siguiente paso ↓

Pídele a Copilot que rellene el formulario

Coloca el cursor en la línea vacía dentro de las etiquetas <body> —la línea que dice <!-- el formulario va aquí -->. En esa línea, escribe un comentario corto en español describiendo el evento y cada campo de tu lista, más un botón de Enviar. Haz una pausa de unos dos segundos sin escribir. Copilot debería sugerirte un bloque de código en gris claro; pulsa la tecla Tab para aceptarlo, o haz clic en un botón Accept si aparece. Si la primera sugerencia no es lo que querías, bórrala, reformula tu comentario con palabras más claras y vuelve a pausar. El comentario en sí se queda invisible en el navegador —solo el código sugerido se vuelve visible para quien visita la página.

Siguiente paso ↓

Revisa lo que escribió Copilot

Lee el código línea por línea, despacio. No necesitas entender cada símbolo —solo comprueba que los nombres de los campos, las etiquetas junto a cada caja y el botón de enviar coinciden con lo que pediste. Si falta un campo, haz clic en una línea nueva vacía dentro del área del formulario, escribe otro comentario corto pidiéndolo, haz una pausa y acepta la nueva sugerencia. Si una etiqueta dice algo que no quieres, simplemente cambia las palabras entre comillas. Trata a la IA como una asistente servicial: te da un primer borrador rápido, pero tus ojos son la revisión final.

Siguiente paso ↓

Guarda y abre el formulario en tu navegador

Guarda el archivo con Ctrl+S en Windows o Cmd+S en Mac (o usa Archivo → Guardar). Ahora ve a tu carpeta EventForm y haz doble clic en signup.html. Se abrirá en tu navegador predeterminado y verás el formulario exactamente como lo vería quien lo visite. Haz clic en cada caja, escribe algo y prueba el botón de Enviar —pulsarlo todavía no enviará nada a ningún sitio, y eso es lo esperado, porque el formulario no está conectado a un servidor. Este paso es solo para confirmar que lo que ves en pantalla coincide con lo que pediste.