I'm having tons of fun.
I hope you are, too.
I wanted to now talk about a few other form features that are not as obvious as some of the ones we've
already looked at, but they can still be very useful and I just thought it'd be worth giving them a
brief mention.
So back to the classroom.
Back to the drawing board.
What do I want to talk about?
Well, I want to talk about two interesting form controls.
The first of these is the progress bar.
What is this all about?
Well, as per the standard defined by the W3C, progress bar elements represent the completion progress
of a task.
And all this means is that they are great when you want to show the user that something is happening,
especially when that something can take a long time, like downloading a file or watching a video,
for example.
Don't worry, I'm going to be showing you examples shortly.
How do we set up a progress bar?
Very easily.
They must have a start tag and an end tag. And it's kind of weird
it has a start and an end tag because it looks like a replaced element.
If we put in rich HTML, you can't see it! But it's still useful and it's still good to have an opening
and closing tag because it helps with fallback content.
In other words, the content inside the progress element is a fallback for browsers that don't support
the element and for screen readers to vocalize it.
And you know that we can put a lot of global attributes on all of these form controls.
But the progress bar has two very important ones and they are max,
and the value attribute. The max attribute indicates how much task needs to be done before it can be
considered as complete.
If you don't specify a max attribute, what do you think it would be?
Well, the default value will be one, so the range will be from 0 to 1.
That's if you don't include a max at all.
What does the value attribute do?
Well, that's right.
It kind of tells you what the value is of that progress bar at any given time.
In other words, it indicates the current status of the progress bar.
So it makes sense that the value has to be either greater than or equal to zero, but it always has
to be less than or equal to ... that's right, to the max attribute, or 1 if the max attribute is not present.
Let me hop over to Visual Studio Code and let me show you how this progress element works.
There are a few other nuances I also want to tell you about.