Clase 2 de HTML: Formularios Básicos con Input y Button | 9no4 EBI ANEP
Planificación y post de clase sobre formularios básicos en HTML para estudiantes de 9no 4 de EBI en Uruguay (ANEP).
- Etiquetas estudiadas: <form>, <label>, <input>, <button>.
- Criterio de evidencia: Titulo personalizado con el nombre del alumno en <title> y campos especificos en el formulario.
- Herramienta práctica: Plataforma Educode en html.servicioti.com.uy.
- Modalidad de entrega: Exportación de archivo .html y subida a CREA (Actividad 2).
CURSO 9NO EBI - ANEP | INFORMÁTICA
Clase 2: Introducción a Formularios en HTML
Grupo: 9no 4 | Fecha: Viernes 21 de Agosto de 2026
✍️ Parte 1: Teórico para el Cuaderno
📝 ¡ATENCIÓN ESTUDIANTES! Copien en sus cuadernos de forma clara el siguiente marco teórico antes de ir a las computadoras.
TÍTULO: Formularios en HTML (Ingreso de Datos)
Un formulario en una página web es un conjunto de elementos interactivos que permiten al usuario ingresar e interactuar con datos (por ejemplo: iniciar sesión, registrarse o responder una encuesta).
SUBTÍTULO: Las 4 Etiquetas Fundamentales
- <form>...</form>: Contenedor principal que agrupa los campos y botones del formulario.
- <label>...</label>: Etiqueta descriptiva que indica al usuario qué dato debe ingresar.
- <input type="text">: Casilla de entrada de texto donde el usuario escribe sus datos.
- <button>...</button>: Botón interactivo para enviar o procesar el formulario.
Ejemplo de Estructura de Formulario Básico:
<form>
<label>Nombre:</label>
<input type="text">
<button>Enviar</button>
</form>
<label>Nombre:</label>
<input type="text">
<button>Enviar</button>
</form>
💻 Parte 2: Actividad Práctica en Computadora
Deberán programar una página web individual usando el editor en línea Educode. Para demostrar que realizaron el trabajo de forma personal, deben cumplir obligatoriamente los siguientes requisitos de evaluación:
📌 Requisitos Obligatorios de Evidencia (Criterios de Evaluación):
- 1. Identificación Personal: La etiqueta
<title>(dentro de<head>) debe incluir tu Nombre, Apellido y Grupo. Ejemplo:<title>Formulario de Juan Perez - 9no 4</title>. - 2. Campo Adicional de Desafío: Debes agregar un segundo campo que le pida al usuario su "Red Social Favorita" o su "Materia Preferida", usando su respectiva etiqueta
<label>e<input>. - 3. Botón Personalizado: El botón debe decir "Guardar Registro".
1
Ingresar a la plataforma de programación:
🚀 Abrir Plataforma Educode (html.servicioti.com.uy)
🚀 Abrir Plataforma Educode (html.servicioti.com.uy)
2
Copiar el siguiente código base e incompletarlo/completarlo según los requisitos solicitados:
Plantilla de Trabajo (Completa los espacios indicados):
<!DOCTYPE html>
<html>
<head>
<!-- REQUISITO 1: Escribe tu Nombre, Apellido y Grupo en el title -->
<title>Formulario de [TU NOMBRE Y APELLIDO] - 9no 4</title>
</head>
<body>
<h1>Registro de Estudiante - 9no 4</h1>
<form>
<!-- Campo 1: Nombre Completo -->
<label>Nombre Completo:</label>
<input type="text">
<br><br>
<!-- REQUISITO 2 (DESAFÍO): Agrega aqui las etiquetas label e input para Red Social Favorita -->
<!-- ESCRIBE AQUÍ TU SEGUNDO CAMPO -->
<br><br>
<!-- REQUISITO 3: Agrega el boton con el texto Guardar Registro -->
<!-- ESCRIBE AQUÍ TU BOTÓN -->
</form>
</body>
</html>
<html>
<head>
<!-- REQUISITO 1: Escribe tu Nombre, Apellido y Grupo en el title -->
<title>Formulario de [TU NOMBRE Y APELLIDO] - 9no 4</title>
</head>
<body>
<h1>Registro de Estudiante - 9no 4</h1>
<form>
<!-- Campo 1: Nombre Completo -->
<label>Nombre Completo:</label>
<input type="text">
<br><br>
<!-- REQUISITO 2 (DESAFÍO): Agrega aqui las etiquetas label e input para Red Social Favorita -->
<!-- ESCRIBE AQUÍ TU SEGUNDO CAMPO -->
<br><br>
<!-- REQUISITO 3: Agrega el boton con el texto Guardar Registro -->
<!-- ESCRIBE AQUÍ TU BOTÓN -->
</form>
</body>
</html>
3
¡Exportar Archivo! Verifica que el formulario funcione en la vista previa a la derecha de Educode. Luego presiona el botón "Exportar" en la plataforma para descargar a tu equipo el archivo con extensión
.html.
4
Subida a CREA: Ingresa a la plataforma CREA, busca la tarea "Actividad 2" y sube el archivo
.html exportado.
Desarrollado por Andrés Franchi Ugartemendía | www.servicioti.com.uy
.jpg)
.jpg)
