WEBVTT

0
00:00.660 --> 00:05.490
Before we get into widgets, I want to talk about this fieldset element in a lot more detail because

1
00:05.490 --> 00:10.410
on a lot of complex forms, even the one that we looked at on Mailchimp, you're going to be seeing

2
00:10.410 --> 00:11.850
this element a lot.

3
00:11.880 --> 00:13.650
Well, firstly, what is the fieldset element?

4
00:13.650 --> 00:14.490
It's very simple.

5
00:14.490 --> 00:19.980
It's just a nice way to create groups of widgets that share the same purpose.

6
00:19.980 --> 00:26.790
So in other words, it's useful for styling and semantic purposes. And because it's used to kind of

7
00:26.790 --> 00:32.700
give you structure in your form, it helps you and others understand your entire form.

8
00:33.090 --> 00:38.550
And that's why usually it's very useful when we're dealing with very large, complex forms because it

9
00:38.550 --> 00:39.780
adds structure.

10
00:39.780 --> 00:41.670
But this is not all folks.

11
00:41.880 --> 00:49.800
The legend element is usually used with the fieldset element. And all it does, is it really adds a caption

12
00:49.800 --> 00:51.090
for the fieldset element.

13
00:51.090 --> 00:53.610
It adds a label. It adds a heading.

14
00:53.610 --> 01:00.730
So from my point of view, the fieldset and legend are one good pair.

15
01:00.760 --> 01:06.670
Awww... and the best part is that any content will fit well within this container.

16
01:06.670 --> 01:10.060
You don't only have to use it for form widgets.

17
01:10.060 --> 01:14.710
So just remember, by using the fieldset along with the legend element, you can make your forms more

18
01:14.710 --> 01:17.260
readable and easier to comprehend.

19
01:17.260 --> 01:22.270
And this can especially be useful on long forms containing many sections.

20
01:22.360 --> 01:23.380
"Okay, Clyde, I've got it.

21
01:23.380 --> 01:24.550
But how does it work?"

22
01:24.670 --> 01:26.050
Very, very simple.

23
01:26.050 --> 01:28.140
The basic tag is written like this.

24
01:28.150 --> 01:31.660
You've got your opening fieldset and your closing tag.

25
01:31.660 --> 01:35.770
And the legend tag, remember, is used with the fieldset

26
01:35.770 --> 01:36.400
very often.

27
01:36.400 --> 01:37.240
You don't have to,

28
01:37.240 --> 01:38.350
it's only optional.

29
01:38.350 --> 01:40.600
But if we want to use it, how do we?

30
01:40.630 --> 01:42.790
Well, the legend should be placed next.

31
01:42.790 --> 01:46.420
And of course, after the legend, you can place your other HTML elements.

32
01:46.450 --> 01:49.570
In our case, our form elements, our form widgets.

33
01:49.570 --> 01:50.830
So that's generally how it looks.

34
01:50.830 --> 01:56.500
Pretty simple. But what super duper interesting, and a lot of people don't know, is that fieldset does

35
01:56.500 --> 01:59.230
not have to be used only with forms.

36
01:59.410 --> 02:02.380
In fact, high level, I can think of three different places

37
02:02.380 --> 02:09.070
you can use it. You can use it to wrap content, you can use it to wrap images, and you can use it,

38
02:09.070 --> 02:11.410
of course, to wrap form widgets.

39
02:11.410 --> 02:13.750
So there we go, very high level.

40
02:13.750 --> 02:19.600
Let me hop over to the editor and let's see this in action, so you can kind of see what the fieldset and

41
02:19.780 --> 02:21.040
legend look like.