Actividad Practica: Formularios - 9no3 Jueves 27 de Agosto

-

Desafío práctico autónomo y evaluado sobre formularios HTML y selección de opciones con radio buttons para estudiantes de 9no 3 de EBI en Uruguay (ANEP).

  • Objetivo: Comprender el funcionamiento de input type="radio" y el atributo name para agrupar opciones mutuamente excluyentes.
  • Herramientas a integrar: form, label, input (text, date, color, checkbox, radio), button, atributos placeholder, required, name y value.
  • Plataforma de desarrollo: Educode en html.servicioti.com.uy.
  • Modalidad de entrega: Exportación de archivo .html y subida a CREA (Actividad 3).
CURSO 9NO EBI - ANEP | INFORMÁTICA

Desafío HTML: Formularios y Botones de Opción (Radio)

Grupo: 9no 3 | Fecha: Jueves 27 de Agosto de 2026

💡 Parte 1: Explicación Clave - ¿Cómo funciona type="radio"?

🔈 ¿Qué es un Radio Button y para qué sirve?

El campo <input type="radio"> se utiliza cuando queremos que el usuario elija una sola opción de entre varias alternativas posibles (por ejemplo: Turno Matutino o Vespertino; Nivel Principiante, Intermedio o Avanzado).

📌 La regla de oro: El atributo name

Para que varias casillas circulares pertenezcan al mismo grupo y el navegador sepa que solo debe permitir marcar una, TODAS LAS OPCIONES DEL GRUPO DEBEN TENER EXACTAMENTE EL MISMO ATRIBUTO name.

Si colocas nombres distintos en el name, el navegador pensará que son preguntas separadas y dejará marcar todas a la vez, lo cual sería un error.

Ejemplo de código de un grupo de radio buttons bien agrupados:

<label>Selecciona tu Turno:</label><br>
<input type="radio" name="turno" value="matutino"> Matutino<br>
<input type="radio" name="turno" value="vespertino"> Vespertino<br>
<input type="radio" name="turno" value="nocturno"> Nocturno

Nota: Observa cómo las tres opciones comparten name="turno". El atributo value es el dato interno que se envía al servidor.

🧰 Parte 2: Tu Caja de Herramientas Completa

Repasa todas las herramientas que has aprendido antes de comenzar tu trabajo autónomo:

Estructura Global: <!DOCTYPE html>, <html>, <head>, <title>, <body>.
Contenedor y Botón: <form>, <label>, <button>.
Tipos de Entrada (type=""): text, date, color, checkbox, radio.
Atributos Obligatorios: placeholder="...", required, name="...", value="...".

🏅 Parte 3: Consigna del Desafío Autónomo (9no 3)

⚠️ ¡ATENCIÓN ESTUDIANTES DE 9NO 3! No hay plantilla copiable. Deberás escribir el código HTML desde una hoja en blanco en Educode, pensando la apertura y cierre de cada etiqueta.

📌 Requisitos Obligatorios a Cumplir (Criterios de Evaluación):

  • 1. Identificación en la Pestaña: La etiqueta <title> (dentro de <head>) debe ser estrictamente: Desafio HTML - [Tu Nombre] [Tu Apellido] - 9no 3.
  • 2. Título Principal Visible: Un encabezado <h1> acorde al tema elegible (Ejemplo: "Formulario de Inscripción", "Encuesta de Deportes", "Registro de Perfil").
  • 3. Campo Nombre Completo: Etiqueta <label> junto con un <input type="text"> que incluya placeholder y sea de llenado obligatorio (required).
  • 4. Campo de Fecha: Un campo usando type="date" para solicitar la fecha de nacimiento o de registro.
  • 5. Selector de Color: Un campo usando type="color" para seleccionar un color preferido.
  • 6. Grupo de Opciones Excluyentes (Radio Buttons): Crear una pregunta con al menos 3 opciones usando type="radio". Debes asegurarte de que las 3 opciones usen el mismo name para que solo se pueda elegir una a la vez.
  • 7. Casilla de Verificación: Un type="checkbox" con el texto "Acepto las condiciones" que sea obligatorio marcar (required).
  • 8. Botón de Envío: Un botón <button> con el texto "Enviar Formulario" o "Finalizar Registro".

💻 Parte 4: Pasos para Resolver y Entregar en CREA

1
Ingresar a Educode:
🚀 Abrir Educode (html.servicioti.com.uy)
2
Escribir todo el código HTML en el panel izquierdo. Recuerda colocar saltos de línea <br> para que cada campo se ubique ordenadamente uno debajo del otro.
3
Probar en la Vista Previa: Revisa que al hacer clic en los Radio Buttons solo quede seleccionada una opción. Si puedes marcar varias a la vez, revisa que el atributo name sea exacto en todos.
4
Exportar: Presiona el botón "Exportar" en la parte superior de Educode para descargar tu trabajo en formato .html a tu dispositivo.
5
Entrega en CREA: Ingresa a CREA, accede al curso de Informática de 9no 3, busca la tarea "Actividad 3 - Desafío Formulario y Radio Buttons" y adjunta tu archivo .html.
Desarrollado por Andrés Franchi Ugartemendía | www.servicioti.com.uy

Entradas populares de este blog