1
00:00:07,120 --> 00:00:08,260
In this video.

2
00:00:08,260 --> 00:00:16,690
Let's talk about food set since forms are really important concept.

3
00:00:16,690 --> 00:00:22,210
That is why we are taking our time to know more about forms.

4
00:00:22,450 --> 00:00:32,409
But before talking about failed set, I forgot to mention one of the important attribute for the select

5
00:00:32,619 --> 00:00:36,430
and that is what we call selected attribute.

6
00:00:36,730 --> 00:00:45,820
As it stands right now, by default for the single, we have not just been selected by default and as

7
00:00:45,820 --> 00:00:52,900
you can see, this is what we have and you can see the checkmark when I click on that is being selected.

8
00:00:53,050 --> 00:01:01,030
But if I want any of this one to be selected, we are going to use an attribute called selected for

9
00:01:01,030 --> 00:01:01,800
this one.

10
00:01:01,810 --> 00:01:05,960
I won't express to be selected by default.

11
00:01:05,980 --> 00:01:14,170
And as you can see, Express has been selected and as you can see, we have the checkmark in front of

12
00:01:14,170 --> 00:01:14,830
X press.

13
00:01:14,830 --> 00:01:23,890
Just likewise the multiple select we can provide selected to any of these ones that we want to be selected

14
00:01:23,890 --> 00:01:25,330
by default.

15
00:01:25,390 --> 00:01:29,980
And as you can see, it has been selected by default.

16
00:01:30,010 --> 00:01:32,860
Now back to field set.

17
00:01:33,100 --> 00:01:43,300
Let's create the five first and I'll explain to you what is filled set and going to be dot HTML as always,

18
00:01:43,300 --> 00:01:48,520
scaffold and provide field set.

19
00:01:49,450 --> 00:01:53,650
And for the h one I'll provide.

20
00:01:55,380 --> 00:02:03,480
Field set and underlie eight and the command provide for set.

21
00:02:03,480 --> 00:02:05,110
And let's open it.

22
00:02:05,140 --> 00:02:06,060
All right.

23
00:02:06,060 --> 00:02:09,870
So guys, what is field set?

24
00:02:10,380 --> 00:02:19,680
Field set is used to group related form element together and provide a caption for the group.

25
00:02:19,950 --> 00:02:28,560
For example, we can use the field set to group together set of radio buttons or checkboxes.

26
00:02:28,770 --> 00:02:29,940
Before continue.

27
00:02:29,970 --> 00:02:33,330
Let me show you one thing that we can improve on.

28
00:02:33,330 --> 00:02:40,710
Let's get back to the input and for the input, let me open it here and let me show you.

29
00:02:40,980 --> 00:02:46,110
And that way you better understand field set in greater details.

30
00:02:46,110 --> 00:02:53,790
And looking at the radio button here, as you can see, it hasn't looks to be descriptive, but we can

31
00:02:53,790 --> 00:03:01,710
provide more data about what we want the user to provide by using a label and put everything inside

32
00:03:01,710 --> 00:03:02,250
div.

33
00:03:02,490 --> 00:03:11,580
But with full set, we are going to provide much information about what the red button does or checkbox

34
00:03:11,580 --> 00:03:12,150
does.

35
00:03:12,150 --> 00:03:15,690
So let's see how we are going to improve that.

36
00:03:15,690 --> 00:03:17,970
That way you better understand.

37
00:03:17,970 --> 00:03:19,620
So it goes like this.

38
00:03:19,620 --> 00:03:22,830
We bring in the field set.

39
00:03:24,010 --> 00:03:28,930
As that next step is, we bring in what is called legend.

40
00:03:29,290 --> 00:03:34,520
I'll provide select favorite color.

41
00:03:34,540 --> 00:03:37,630
So with this, save it and let's have a look.

42
00:03:37,630 --> 00:03:39,030
Let me remove this one.

43
00:03:39,040 --> 00:03:46,600
As you can see, we have this style, and I believe we have seen most of these styles, especially if

44
00:03:46,600 --> 00:03:49,240
you are familiar with material UI.

45
00:03:49,480 --> 00:03:49,930
All right.

46
00:03:49,930 --> 00:03:53,470
So let's go ahead and add the rest.

47
00:03:53,800 --> 00:04:01,840
The next field is going to be input and we are going to provide a type of radio.

48
00:04:02,440 --> 00:04:03,670
So let's see.

49
00:04:03,940 --> 00:04:11,260
As you can see, we have the radio here and let's provide label as.

50
00:04:11,410 --> 00:04:17,829
Let me remove the four attribute from here and I will say red.

51
00:04:18,010 --> 00:04:19,450
Now, let's see.

52
00:04:19,779 --> 00:04:21,459
This is what we have.

53
00:04:21,459 --> 00:04:22,750
We have red.

54
00:04:22,930 --> 00:04:26,140
And we can provide more attribute.

55
00:04:26,140 --> 00:04:30,340
For the meantime, let's ignore other attribute as that.

56
00:04:30,340 --> 00:04:36,370
And I can provide the other options as yellow.

57
00:04:37,070 --> 00:04:39,430
And let's see.

58
00:04:39,530 --> 00:04:40,150
Yeah.

59
00:04:40,160 --> 00:04:46,520
As you can see, we are grouping the related command together or data together.

60
00:04:46,730 --> 00:04:50,240
And let me call this one as blue.

61
00:04:51,380 --> 00:04:53,950
Has that changed the label, Oli?

62
00:04:54,250 --> 00:04:55,180
All right.

63
00:04:55,180 --> 00:04:58,990
So this is what you call the failed set.

64
00:04:59,020 --> 00:04:59,740
All right, guys.

65
00:04:59,740 --> 00:05:02,800
So let's continue in the next video.