From the course: Building Great Forms with HTML and CSS

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Using the stepper component

Using the stepper component

From the course: Building Great Forms with HTML and CSS

Start my 1-month free trial

Using the stepper component

“

- [Instructor] As you can see, our form works fine and it looks good, but let's consider another design pattern that may be easier for our trusty end user. Instead of using select boxes for the number of adults and children, let's consider using a stepper component instead. A stepper component is going to allow your users to increase or decrease the amount of passengers by clicking on the plus and minus buttons that we have right here. It's really giving the same information to the form, but it's just a different way of collecting this information. There's nothing wrong with what we had styled originally, but I think it's important to explore different options because these may work better in certain situations. Let's jump into our HTML and CSS files and see how we can code this up. We're going to start off by making some modifications to our HTML. If you scroll down, you'll see that I've added comments. This time we're…

Contents