Treehouse Code Adventures > Multi-Step Form

Multi-Step Form

A multi-step form that requires user input across three stages.

Created: 11/06/2023 by Brian Jensen

Skill level: beginner

Topics used: HTML CSS JavaScript

Estimated completion time: 1 Hour

The form aims to collect specific details about a user in three stages. The user will be asked to enter their name, phone number, and email address before being able to submit the form. The design is user-friendly, with intuitive navigation buttons and a progress bar.

HTML Basics

Learn HTML (HyperText Markup Language), the language common to every website. HTML describes the basic structure and content of a web page.

HTML Forms

Learn about all the most important form elements that web professionals use on a daily basis.

CSS Basics

Learn the basics of CSS, one of the core technologies for designing and building websites and applications.

CSS Flexbox Layout

Flexbox is a set of CSS properties that give you a flexible way to lay out content.

CSS Grid Layout

CSS Grid Layout provides a built-in, more efficient way of designing grid-based layouts in the browser.

JavaScript and the DOM

JavaScript lets you create interactive web pages which can respond to a user's actions. In this course, you'll learn how to bring web pages to life using the power of JavaScript.

Interacting with the DOM

Along with selecting DOM elements in JavaScript we can also write code that gives elements behavior. In this course we will first explore how to watch for interaction and respond using the method addEventListener.

0
To begin, click "Start Adventure" at the top of the page and then download your starter files.
1
Use CSS Flexbox or Grid to layout the elements on the page.
2
Use HTML 5 form validation or JavaScript to ensure the user enters the correct information before being able to hit "Next" or "Submit".
3
Use JavaScript to add event listeners to the navigation buttons.
4
Use JavaScript to update the progress bar.
5
Use JavaScript to toggle the visibility of the form steps, so that only one step is shown at a time.
6
Extra Challenge: Add friendly custom validation messages to the form inputs.