Formulario de Varios Pasos
Formulario de Varios Pasos
Un formulario de varios pasos que requiere entrada del usuario en tres etapas.
Creado: 11/06/2023 por Brian Jensen
Nivel de habilidad: principiante
Temas utilizados:
Tiempo estimado de finalización: 1 Hora
El formulario tiene como objetivo recopilar detalles específicos sobre un usuario en tres etapas. Se le pedirá al usuario que ingrese su nombre, número de teléfono y dirección de correo electrónico antes de poder enviar el formulario. El diseño es fácil de usar, con botones de navegación intuitivos y una barra de progreso.
Conceptos Básicos de HTML
Aprende HTML (Lenguaje de Marcas de Hipertexto), el idioma común de todos los sitios web. HTML describe la estructura básica y el contenido de una página web.
Formularios HTML
Aprende sobre todos los elementos de formulario más importantes que los profesionales web utilizan a diario.
Conceptos Básicos de CSS
Aprende los conceptos básicos de CSS, una de las tecnologías principales para diseñar y construir sitios web y aplicaciones.
Diseño de Diseño CSS Flexbox
Flexbox es un conjunto de propiedades de CSS que te proporciona una forma flexible de diseñar contenido.
Diseño de Cuadrícula CSS
CSS Grid Layout proporciona una forma integrada y más eficiente de diseñar diseños basados en cuadrículas en el navegador.
JavaScript y el DOM
JavaScript te permite crear páginas web interactivas que pueden responder a las acciones del usuario. En este curso, aprenderás a dar vida a las páginas web usando el poder de JavaScript.
Interactuando con el DOM
Junto con la selección de elementos DOM en JavaScript, también podemos escribir código que les dé comportamiento a los elementos. En este curso, primero exploraremos cómo observar la interacción y responder usando el método addEventListener.
-
0
Para comenzar, haz clic en Comienza la Aventura en la parte superior de la página y luego descarga tus archivos de inicio.
-
1
Usa CSS Flexbox o Grid para diseñar los elementos en la página.
-
2
Usa validación de formularios HTML 5 o JavaScript para asegurar que el usuario ingrese la información correcta antes de poder hacer clic en "Siguiente" o "Enviar".
-
3
Usa JavaScript para agregar detectores de eventos a los botones de navegación.
-
4
Usa JavaScript para actualizar la barra de progreso.
-
5
Usa JavaScript para cambiar la visibilidad de los pasos del formulario, de modo que solo se muestre un paso a la vez.
-
6
Desafío Extra: Agrega mensajes de validación personalizados y amigables a las entradas del formulario.