Formulario de registro en línea
Este proyecto es el tercer proyecto para el curso de desarrollo de Frontend de Team Treehouse.
En este proyecto, creará un formulario de registro receptivo y amigable para dispositivos móviles utilizando una amplia variedad de tipos y atributos de entrada HTML. Usando los archivos de maqueta suministrados, creará una versión móvil y de escritorio del formulario utilizando consultas de medios y un enfoque "móvil primero".
El enlace en vivo para este proyecto se puede encontrar aquí
Captura de pantalla
Instrucciones
- Construya el diseño utilizando el primer diseño móvil :
- Asegúrese de que el archivo HTML incluya la metaetelera de la vista en el jefe del documento, consulte Configuración de la ventana gráfica para comprender por qué y cómo agregar esta etiqueta.
- Mire la maqueta proporcionada (mobile-form.png) y agregue el mismo contenido a su archivo index.html.
- Cree la estructura de formulario: solo use una etiqueta
<form> . La etiqueta <form> debe contener todos los elementos de formulario. Agregue un fieldset y legend para cada una de las siguientes secciones:
- Sección de "Información de contacto" de la página y
- La sección "Boletín" de la página
- Asegúrese de incluir los siguientes tipos de campo de formulario:
- entrada de texto
- entrada de correo electrónico
- entrada telefónica
- Seleccionar menú
- casillas
- botones de radio
- textea
- Botón de envío
- Los campos de formulario deben incluir los siguientes atributos:
-
input : debe incluir atributos id , type y name . -
select y textarea : debe incluir atributos id y name .
- Agregue etiquetas a cada elemento de formulario utilizando la etiqueta HTML
<label> . El texto dentro de las etiquetas debe coincidir con los nombres de los campos de formulario en las maquetas.
- Asegúrese de emparejar correctamente cada elemento
<label> con su control de formulario correspondiente a través del atributo for . Vea el enlace de arriba para un ejemplo. Y no te olvides del elemento TextAREA. Eso también necesita una etiqueta de funcionamiento.
- Use el atributo
placeholder del campo de entrada para agregar el texto "requerido" a:
- el campo de nombre completo
- el campo de la dirección de correo electrónico
- Una vez que tenga todo en su lugar para el diseño móvil, use una consulta de medios para agregar un punto de interrupción para ajustar el diseño de pantallas de mesa y escritorio más amplias.
- Haga coincidir el diseño, ya que debe verse en una tableta o escritorio que tenga 768px de ancho con la maqueta de escritorio-form.png.
- Use un enfoque móvil primero escribiendo sus consultas de medios utilizando la propiedad
min-width en su CSS.
- Una vez que todos sus puntos de interrupción están en su lugar, verifique que su diseño coincida con ambas maquetas.
- Verifique que la posición de texto de la etiqueta coincida con ambas maquetas:
- Móvil : el texto debe estar por encima del campo Formulario.
- Desktop : el texto debe estar al lado izquierdo del campo Formulario.
Use una fuente de Google para el texto
Agregar :focus en el formulario para cuando un usuario hace clic o pica en un campo de texto.
Asegúrese de verificar que su código sea válido ejecutándolo a través de un validador HTML y CSS.
- Los enlaces a los validadores se pueden encontrar en los recursos del proyecto. Esto lo ayudará a detectar cualquier error que pueda estar en su código.
- Hay algunas excepciones que no necesita solucionar:
- No se preocupe por ninguna advertencia, solo necesitamos que verifique cualquier error que pueda estar allí.
- Si el validador de CSS indica que se usan Calc, prefijos de proveedores o pseudo-elementos/pseudo-clases, estos errores deben ignorarse.
- Si HTML Validator indica que el uso de Pipe ('|') en Google Font Links/URLS, este error también se puede ignorar.
