WEBVTT

0
00:05.580 --> 00:10.880
All right, I just want us to take a quick break. I want us to quickly recap radio buttons because

1
00:10.890 --> 00:12.290
it can be quite confusing.

2
00:12.750 --> 00:18.030
Just remember, a radio button is just a type of HTML input element.

3
00:18.630 --> 00:21.920
Remember the first two input elements we created were text fields.

4
00:22.380 --> 00:28.380
This is still an input element, but all we've done is we've changed the type property of the input

5
00:28.710 --> 00:31.670
to "radio" and that changes it to a radio button.

6
00:31.830 --> 00:35.680
And as we've seen, radio buttons are a little bit more complex

7
00:35.680 --> 00:38.460
than text inputs, because they work in groups.

8
00:39.180 --> 00:41.700
Let's just look at another example quickly

9
00:41.700 --> 00:46.020
on the screen. Let's say we wanted the user to tell us what their favorite pet was.

10
00:46.140 --> 00:48.400
You can only have one favorite pet, not two...

11
00:48.840 --> 00:51.610
so that's what we kind-of want to display to the user.

12
00:51.930 --> 00:55.670
We've already seen when it comes to radio buttons, it's good practice to wrap it in a wrapper.

13
00:56.040 --> 00:56.790
We usually do,

14
00:56.790 --> 01:02.370
so you don't have to do so, but we usually do so in the fieldset HTML element.

15
01:02.820 --> 01:06.220
That's the wrapper holding the entire radio selection.

16
01:06.840 --> 01:14.240
Next, we gave this whole group a name and we did so by wrapping that name in a legend element.

17
01:14.640 --> 01:16.440
That's what we just did now in our code.

18
01:16.560 --> 01:21.270
Remember, we asked the user, or we gave it a legend of allow push notifications?

19
01:21.510 --> 01:23.090
We're asking the user the question.

20
01:23.310 --> 01:30.060
We then have our two radio buttons, and that simply is just the input with its type attribute set to

21
01:30.060 --> 01:30.430
radio.

22
01:30.600 --> 01:31.400
That's all they are.

23
01:31.680 --> 01:34.330
And of course, in this example, we've got the cat 🐈 and the dog 🐶.

24
01:34.710 --> 01:38.970
Well, those are the labels we gave to each one of those radio types.

25
01:39.330 --> 01:40.630
Whew! Does that make sense?

26
01:41.100 --> 01:41.670
I hope so.

27
01:41.670 --> 01:45.020
And this is just a very high level picture of what we've just done.

28
01:45.060 --> 01:46.680
Yes, we used a different example...

29
01:46.680 --> 01:50.920
but just understand where all these little pieces fit in because it can be quite daunting.

30
01:51.150 --> 01:55.140
So this was a very quickly lecture, a quick recap on radio buttons.

31
01:55.650 --> 01:58.610
But right now we still haven't styled them, have we?

32
01:58.710 --> 02:00.260
They still look rather ugly 😝.

33
02:00.540 --> 02:02.040
So let's go back to our editor now...

34
02:02.040 --> 02:05.940
let's go to our CSS file, let's style up these radio buttons and then let's move on.