GRADO 10 DISEÑO FORMULARIOS BASICOS

 

INSTITUCION EDUCATIVA TECNICA AGROPECUARIA – PALERMO

GUÍA DE APRENDIZAJE PRÁCTICA: DISEÑO DE FORMULARIOS WEB BÁSICOS (HTML)

Área: Tecnología e Informática | Grados: 10.º  Duración: 2 Horas (120 min)

Modalidad: Trabajo Local / Sin Conexión a Internet (Ahorro de tinta de impresión)

Estudiante: ________________________________________ Curso: _________ Fecha: ___________

1. CONCEPTO Y FUNDAMENTO TEÓRICO

¿Qué es un Formulario Web?

Un formulario web es una sección de una página HTML diseñada para recolectar datos ingresados por el usuario (como nombres, correos, contraseñas, opciones o comentarios) y permitir interactuar con una aplicación o guardar información.

Estructura General y Etiquetas Principales:

• La etiqueta <form>: Delimita el inicio y el fin del formulario.
• Atributo action="": Indica a dónde se enviarán los datos (en trabajo local se deja vacío action="" o #).
• Atributo method="GET" o "POST": Define la forma en que se transmiten los datos.
• La etiqueta <label>: Define el texto visible asociado a un campo de entrada.
• La etiqueta <input>: Crea un campo interactivo para el usuario. Su comportamiento cambia según el atributo type:
• type="text": Campo de texto corto de una sola línea.
• type="email": Campo validado para direcciones de correo electrónico.
• type="password": Campo de contraseña (oculta los caracteres con puntos).
• type="number": Campo numérico.
• type="radio": Botones de selección única entre varias opciones.
• type="checkbox": Casillas de verificación de selección múltiple.
• type="submit": Botón para enviar los datos del formulario.
• type="reset": Botón para limpiar todos los campos.
• La etiqueta <select> y <option>: Crea una lista desplegable de opciones.
• La etiqueta <textarea>: Crea un área de texto multilínea para comentarios o mensajes largos.

2. CONFIGURACIÓN DEL ENTORNO DE TRABAJO (SIN INTERNET)

Para desarrollar este taller NO se requiere conexión a Internet. Únicamente usaremos el computador de la siguiente manera:

1. Abra el editor de texto básico instalado en el equipo (Bloc de notas, Notepad++ o VS Code).
2. Cree un nuevo archivo y guárdelo en el Escritorio con el nombre: formulario.html (Asegúrese de seleccionar Todos los archivos en el tipo de archivo si usa Bloc de Notas).
3. Para probar su trabajo, haga doble clic sobre el archivo formulario.html para abrirlo en el navegador web (Google Chrome, Microsoft Edge o Firefox) en modo fuera de línea.

3. EJEMPLO GUIADO Y CÓDIGO DE REFERENCIA

Copie el siguiente código básico en su editor de texto para analizar su estructura:

HTML

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <title>Formulario de Registro</title>

</head>

<body>

 

    <h2>Formulario de Inscripción Escolar</h2>

 

    <form action="#" method="GET">

       

        <!-- Campo para Nombre -->

        <label for="nombre">Nombre Completo:</label><br>

        <input type="text" id="nombre" name="nombre" placeholder="Ej. Juan Pérez" required><br><br>

 

        <!-- Campo para Correo -->

        <label for="correo">Correo Electrónico:</label><br>

        <input type="email" id="correo" name="correo" placeholder="correo@ejemplo.com" required><br><br>

 

        <!-- Campo para Contraseña -->

        <label for="clave">Contraseña:</label><br>

        <input type="password" id="clave" name="clave" required><br><br>

 

        <!-- Lista Desplegable -->

        <label for="grado">Seleccione su Grado:</label><br>

        <select id="grado" name="grado">

            <option value="10">Décimo (10°)</option>

            <option value="11">Undécimo (11°)</option>

        </select><br><br>

 

        <!-- Casilla de Selección (Checkbox) -->

        <input type="checkbox" id="terminos" name="terminos" required>

        <label for="terminos">Acepto el reglamento institucional</label><br><br>

 

        <!-- Botones de Acción -->

        <input type="submit" value="Guardar e Inscribir">

        <input type="reset" value="Limpiar Campos">

 

    </form>

 

</body>

</html>

4. ACTIVIDAD PRÁCTICA E INVESTIGACIÓN (TALLER EN EL CUADERNO/EQUIPO)

Responda las siguientes preguntas y desarrolle los ejercicios prácticos en su estación de trabajo:

Parte A: Análisis del Código HTML

1. ¿Para qué sirve el atributo placeholder en la etiqueta <input>?

Respuesta: __________________________________________________________________________________

2. ¿Qué función cumple el atributo required dentro de un campo de entrada?

Respuesta: __________________________________________________________________________________

3. ¿Cuál es la diferencia visual y funcional entre un <input type="radio"> y un <input type="checkbox">?

Respuesta: __________________________________________________________________________________

Parte B: Reto de Programación e Integración

Diseñe una nueva página HTML llamada encuesta.html en su computador que contenga un formulario completo para una Encuesta de Satisfacción Escolar con los siguientes elementos obligatorios:

1. Un título principal <h2> que diga "Encuesta de Satisfacción de la Sala de Informática".
2. Un campo de texto corto (text) para el Nombre del Estudiante.
3. Un grupo de botones de opción única (radio) para seleccionar la Jornada (Mañana o Tarde).
4. Una lista desplegable (select) para calificar el Estado de los Equipos (Excelente, Bueno, Aceptable, Deficiente).
5. Un área de texto multilínea (textarea) para escribir Sugerencias o Comentarios.
6. Un botón de envío (submit) que diga "Enviar Encuesta".