WEBVTT

0
00:00.850 --> 00:05.920
I hope you're as excited as I am, I hope you're having a lot of fun in this course so far. And we are only 

1
00:05.920 --> 00:06.680
just getting started.

2
00:06.700 --> 00:08.050
I mean, look at what we've already done.

3
00:08.050 --> 00:13.930
We're starting to construct our form, and we've created two text input fields, haven't we?

4
00:14.110 --> 00:15.550
For the name and the email.

5
00:15.880 --> 00:18.070
And yes, we've got some basic validation here.

6
00:18.460 --> 00:23.440
If you don't type a valid email, we've seen that we've using the invalid pseudo-class.

7
00:23.440 --> 00:25.770
We're going to get into this in a lot more detail later.

8
00:25.990 --> 00:27.070
But what do we want to do now?

9
00:27.130 --> 00:30.550
Well, now I want us to introduce radio buttons.

10
00:30.580 --> 00:31.570
How do we do that?

11
00:31.810 --> 00:32.940
Well, it's very simple.

12
00:32.960 --> 00:40.510
All we do is we take our input element, and we change its "type" property to "radio". And this will change

13
00:40.510 --> 00:42.090
it to radio button.

14
00:42.490 --> 00:48.790
No radio buttons are a little bit more complex than these text elements, because they work in groups.

15
00:48.790 --> 00:53.690
It allows the user to only select one item within that entire group.

16
00:54.730 --> 00:55.720
So what does this mean?

17
00:56.050 --> 01:01.900
Well, this means we need a way to group, firstly, all those radio buttons.

18
01:02.650 --> 01:06.370
We need to label every single button in that group.

19
01:06.880 --> 01:09.220
And we also need a way to name the entire group.

20
01:09.460 --> 01:11.080
In order to do that, we need a few things.

21
01:11.080 --> 01:16.930
One is, it's always good practice to wrap your entire radio group into an oval wrapper,

22
01:17.170 --> 01:20.330
and we usually do this with the <fieldset> element.

23
01:20.920 --> 01:22.960
Again, we're going to get into a lot more detail later.

24
01:22.960 --> 01:23.530
So don't worry.

25
01:23.860 --> 01:30.100
The second thing we usually do, is we usually label this group with the <label> element within the <fieldset>

26
01:30.100 --> 01:30.520
element.

27
01:30.920 --> 01:32.290
I'm going to show you how that works shortly.

28
01:32.290 --> 01:32.860
Don't panic.

29
01:33.190 --> 01:38.080
And then thirdly, what we need to do is we need to make sure that all the radio buttons are kind of

30
01:38.080 --> 01:39.010
in a group.

31
01:39.010 --> 01:44.620
And we do that by using the same "name" attribute for every single radio button in that group.

32
01:44.960 --> 01:45.490
Okay, then,

33
01:45.490 --> 01:48.970
but how do we distinguish between the different values then, if everything's kind of the same?

34
01:49.300 --> 01:55.540
Well, very simply, we just use different "value" attributes for every single selection type, or every

35
01:55.540 --> 01:56.920
single radio button.

36
01:57.280 --> 02:00.380
I know, it sounds like a lot to take in, but don't worry, that's what I'm here for.

37
02:00.520 --> 02:02.680
Let's start building 👷‍♀️ our radio button.

38
02:05.420 --> 02:05.710
(background music)

39
02:08.700 --> 02:16.090
(background music)

40
02:18.220 --> 02:19.860
(yep, still background music) 

41
02:23.260 --> 02:25.310
(music fades down)