Año 2024 Guías de Trabajo – Informática Grado: Segundo Año
Fecha: 14 al 18 Octubre
Tema: CSS (hojas de estilo en cascada)
Objetivo: Identificar y Comprender los conceptos para realizar una página WEB básica y funcional, haciendo
uso de la computadora y los comandos necesario utilizando Visual Studio Code.
Manos a la Obra
Crea un formulario de encuesta
Objetivo: Construye una aplicación que sea funcionalmente similar a https://survey-
form.freecodecamp.rocks.
Lo que la página debe contener es lo siguiente:
1. Debes tener un título de página en un elemento h1 con un id de title.
2. Debes tener una corta explicación en el elemento p con un id de description.
3. Debes tener un elemento form con un id de survey-form.
4. Dentro del elemento form, debe ser required (requerido) ingresar tu nombre en un campo
de input que tenga un id de name y un type de text.
5. Dentro del elemento form required (requerido) ingresar tu nombre en un campo de input que tenga
un id de email.
6. Si ingresas un email que no tenga el formato correcto, verás un error de validación HTML5.
7. Dentro del formulario, puedes ingresar un número en un campo de input que tenga un id de number.
8. La entrada de números no debe aceptar caracteres no numéricos, ya sea impidiendo que los escribas o
mostrando un error de validación HTML5 (dependiendo del navegador).
9. Si ingresas un número que esté fuera del rango de números permitido, que es definido por los
atributos min y max, verás un error de validación de HTML5.
10. Para los campos de entrada de nombre, email y número, puedes ver los correspondientes
elementos label en el formulario, que describen el propósito de cada campo con los siguientes
id: id="name-label", id="email-label" y id="number-label".
11. Para los campos de entrada de nombre, email y número, podrás ver un texto provisional que da una
descripción o instrucciones para cada campo.
Año 2024 Guías de Trabajo – Informática Grado: Segundo Año
12. Dentro del elemento form, debes tener un elemento desplegable select con un id de dropdown con al
menos dos opciones para elegir.
13. Dentro del elemento form, puedes seleccionar una opción de un grupo de al menos dos botones de
radio que son agrupado utilizando el atributo name.
14. Dentro del elemento form, puedes seleccionar varios campos en una serie de casillas de verificación,
cada una debe tener un atributo value.
15. Dentro del elemento form, se te presenta un textarea para comentarios adicionales.
16. Dentro del elemento form, se te presenta un botón con un id de submit para enviar todas las entradas.
Nota: Asegurate de agregar <link rel="stylesheet" href="styles.css"> en tu HTML para enlazar tu hoja de estilos
y aplicar tu CSS
