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
just getting started.
I mean, look at what we've already done.
We're starting to construct our form, and we've created two text input fields, haven't we?
For the name and the email.
And yes, we've got some basic validation here.
If you don't type a valid email, we've seen that we've using the invalid pseudo-class.
We're going to get into this in a lot more detail later.
But what do we want to do now?
Well, now I want us to introduce radio buttons.
How do we do that?
Well, it's very simple.
All we do is we take our input element, and we change its "type" property to "radio". And this will change
it to radio button.
No radio buttons are a little bit more complex than these text elements, because they work in groups.
It allows the user to only select one item within that entire group.
So what does this mean?
Well, this means we need a way to group, firstly, all those radio buttons.
We need to label every single button in that group.
And we also need a way to name the entire group.
In order to do that, we need a few things.
One is, it's always good practice to wrap your entire radio group into an oval wrapper,
and we usually do this with the <fieldset> element.
Again, we're going to get into a lot more detail later.
So don't worry.
The second thing we usually do, is we usually label this group with the <label> element within the <fieldset>
element.
I'm going to show you how that works shortly.
Don't panic.
And then thirdly, what we need to do is we need to make sure that all the radio buttons are kind of
in a group.
And we do that by using the same "name" attribute for every single radio button in that group.
Okay, then,
but how do we distinguish between the different values then, if everything's kind of the same?
Well, very simply, we just use different "value" attributes for every single selection type, or every
single radio button.
I know, it sounds like a lot to take in, but don't worry, that's what I'm here for.
Let's start building 👷‍♀️ our radio button.
(background music)
(yep, still background music)
(music fades down)