WEBVTT

0
00:00.410 --> 00:02.010
I'm having tons of fun.

1
00:02.030 --> 00:03.110
I hope you are, too.

2
00:03.320 --> 00:07.730
I wanted to now talk about a few other form features that are not as obvious as some of the ones we've

3
00:07.730 --> 00:12.800
already looked at, but they can still be very useful and I just thought it'd be worth giving them a

4
00:12.800 --> 00:14.030
brief mention.

5
00:14.030 --> 00:15.860
So back to the classroom.

6
00:15.860 --> 00:17.500
Back to the drawing board.

7
00:17.510 --> 00:18.860
What do I want to talk about?

8
00:18.860 --> 00:22.520
Well, I want to talk about two interesting form controls.

9
00:22.520 --> 00:26.090
The first of these is the progress bar.

10
00:26.090 --> 00:27.710
What is this all about?

11
00:27.740 --> 00:35.330
Well, as per the standard defined by the W3C, progress bar elements represent the completion progress

12
00:35.360 --> 00:36.260
of a task.

13
00:36.260 --> 00:42.830
And all this means is that they are great when you want to show the user that something is happening,

14
00:42.830 --> 00:48.680
especially when that something can take a long time, like downloading a file or watching a video,

15
00:48.680 --> 00:49.460
for example.

16
00:49.490 --> 00:52.660
Don't worry, I'm going to be showing you examples shortly.

17
00:52.670 --> 00:54.320
How do we set up a progress bar?

18
00:54.320 --> 00:55.220
Very easily.

19
00:55.220 --> 00:59.970
They must have a start tag and an end tag. And it's kind of weird

20
00:59.970 --> 01:03.780
it has a start and an end tag because it looks like a replaced element.

21
01:03.810 --> 01:11.670
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

22
01:11.670 --> 01:15.510
and closing tag because it helps with fallback content.

23
01:15.510 --> 01:22.320
In other words, the content inside the progress element is a fallback for browsers that don't support

24
01:22.320 --> 01:26.010
the element and for screen readers to vocalize it.

25
01:26.010 --> 01:30.630
And you know that we can put a lot of global attributes on all of these form controls.

26
01:30.630 --> 01:36.090
But the progress bar has two very important ones and they are max,

27
01:36.360 --> 01:45.180
and the value attribute. The max attribute indicates how much task needs to be done before it can be

28
01:45.180 --> 01:46.830
considered as complete.

29
01:46.830 --> 01:50.580
If you don't specify a max attribute, what do you think it would be?

30
01:51.030 --> 01:56.010
Well, the default value will be one, so the range will be from 0 to 1.

31
01:56.010 --> 01:58.410
That's if you don't include a max at all.

32
01:58.410 --> 02:00.120
What does the value attribute do?

33
02:00.150 --> 02:00.900
Well, that's right.

34
02:00.900 --> 02:05.550
It kind of tells you what the value is of that progress bar at any given time.

35
02:05.550 --> 02:09.210
In other words, it indicates the current status of the progress bar.

36
02:09.210 --> 02:15.240
So it makes sense that the value has to be either greater than or equal to zero, but it always has

37
02:15.240 --> 02:21.870
to be less than or equal to ... that's right, to the max attribute, or 1 if the max attribute is not present.

38
02:22.020 --> 02:27.360
Let me hop over to Visual Studio Code and let me show you how this progress element works.

39
02:27.360 --> 02:30.480
There are a few other nuances I also want to tell you about.