Este proyecto es un formulario de encuesta estático, desarrollado con HTML para la estructura y CSS para el diseño. El objetivo principal es mostrar cómo se puede crear un formulario completo y funcional usando solo estos dos lenguajes.
¡Puedes ver la página web en funcionamiento a través de este enlace de GitHub Pages! https://magicdev-rc.github.io/mi-formulario/
El proyecto se compone de dos archivos principales que trabajan en conjunto para crear la página web.
index.html: Este archivo contiene toda la estructura del formulario, incluyendo los campos de entrada, las etiquetas y los botones.formularioEstilos.css: Este archivo se encarga de dar estilo y formato al formulario, definiendo la paleta de colores, la tipografía y la disposición de los elementos.
El formulario utiliza una variedad de elementos HTML para recolectar información de los usuarios:
- Encabezados (
<h1>y<p>): Se utilizan para el título y la descripción del formulario. - Contenedor (
<form>): El elemento principal que agrupa todos los campos del formulario. - Agrupadores (
<fieldset>y<legend>): Se emplean para organizar campos relacionados, como las opciones de radio y de verificación. - Entradas (
<label>y<input>): Se utilizan diferentes tipos deinputpara recolectar el nombre (type="text"), correo (type="email"), número (type="number"), opciones de radio (type="radio"), casillas de verificación (type="checkbox") y el botón de envío (type="submit"). - Campos de Texto Largos (
<textarea>): Para permitir a los usuarios escribir comentarios o sugerencias. - Menú Desplegable (
<select>y<option>): Para crear una lista de opciones predefinidas que el usuario puede elegir.
Para darle estilo al formulario, se emplearon las siguientes propiedades CSS:
- Diseño y Apariencia:
widthyheight: Se utilizan para controlar el ancho y la altura de los elementos, como el<body>y losdiv.marginypadding: Para crear espacio externo e interno, lo que ayuda a centrar el formulario y separar los elementos.border-radius: Para dar esquinas redondeadas a los elementos y mejorar la estética.opacity: Para hacer que el contenedor del formulario sea ligeramente transparente.
- Tipografía y Colores:
background-colorycolor: Para definir los colores de fondo y de texto.font-family,font-size, yfont-weight: Para controlar la fuente, el tamaño y el grosor del texto.
- Selectores Especiales:
#id: Para aplicar estilos a elementos específicos comotitleydescription..class: Para seleccionar grupos de elementos con la misma clase, como los campos de entrada.input[type="submit"]: Un selector de atributo para aplicar estilos de forma específica al botón de envío.:hover: Un seudo-selector para crear un efecto al pasar el cursor sobre el botón de envío.
Para ver la página web, puedes visitar el enlace de GitHub Pages o descargar el repositorio y abrir el archivo index.html en tu navegador.