All right, I just want us to take a quick break. I want us to quickly recap radio buttons because
it can be quite confusing.
Just remember, a radio button is just a type of HTML input element.
Remember the first two input elements we created were text fields.
This is still an input element, but all we've done is we've changed the type property of the input
to "radio" and that changes it to a radio button.
And as we've seen, radio buttons are a little bit more complex
than text inputs, because they work in groups.
Let's just look at another example quickly
on the screen. Let's say we wanted the user to tell us what their favorite pet was.
You can only have one favorite pet, not two...
so that's what we kind-of want to display to the user.
We've already seen when it comes to radio buttons, it's good practice to wrap it in a wrapper.
We usually do,
so you don't have to do so, but we usually do so in the fieldset HTML element.
That's the wrapper holding the entire radio selection.
Next, we gave this whole group a name and we did so by wrapping that name in a legend element.
That's what we just did now in our code.
Remember, we asked the user, or we gave it a legend of allow push notifications?
We're asking the user the question.
We then have our two radio buttons, and that simply is just the input with its type attribute set to
radio.
That's all they are.
And of course, in this example, we've got the cat 🐈 and the dog 🐶.
Well, those are the labels we gave to each one of those radio types.
Whew! Does that make sense?
I hope so.
And this is just a very high level picture of what we've just done.
Yes, we used a different example...
but just understand where all these little pieces fit in because it can be quite daunting.
So this was a very quickly lecture, a quick recap on radio buttons.
But right now we still haven't styled them, have we?
They still look rather ugly 😝.
So let's go back to our editor now...
let's go to our CSS file, let's style up these radio buttons and then let's move on.