What are radio buttons?
Well, of course, it's where we set the type of the input to
radio. And radio buttons are similar to checkboxes, but with an important distinction.
Radio buttons are grouped into a set, which only allows one radio button to be selected at any given
time.
This is different to checkboxes, right?
Because checkboxes allow us to turn single values on and off however many we want.
Remember that.
That's a very big distinguishing difference.
Cool.
So we know that radio buttons are generally defined in groups, but how do we define a group?
Well, that's easy.
If they share the same value for their "name" attribute, they will be in the same group.
So having the same value for their name attribute means that radio buttons will be tied together.
They will be considered to be in the same group of buttons.
And remember, the distinguishing feature of a radio button is that only ONE radio button in a group
can be selected at any given time.
And this means that when one of them is checked, all the others automatically get unchecked.
When the form is sent, only the value of the checked radio button is sent.
"And what happens, Clyde, if none of them are checked?"
Well, in that case, the whole pool of radio buttons is considered to be in an unknown state and no
value is sent with the form.
It's very intuitive. But once one of the radio buttons in the same named group of buttons is checked,
then it's kind of weird because it's not possible for the user to revert back.
In other words, it's not possible for the user to uncheck all of the buttons without resetting the
form.
Whew, I know I know.
We're going through a lot.
What else can I say about submitting a radio button?
Well, unlike a checkbox, the value attribute is very important for radio buttons.
Remember, with the checkbox, we weren't too concerned with the value attribute, were we?
We were more concerned whether it was toggled on or off. Radio buttons are very, very different.
And it's different because the selected option is sent to the server
who needs the value attribute to know which option was selected.
Because remember, the names of all the radio buttons in a group are the same.
The only distinguishing feature is the value attribute.
And that's why it's so important, right?
So let's look at this example where we set the type of radio and we've got a name here and we've assigned
the name to favFood. And if we omit the value attribute, the submitted form assigns the value of
"on" to the entire group.
So it's kind of weird, and it's meaningless.
favFood is going to be on, and if you have a few different radios within the group that's not going
to tell us anything, is it?
It's not going to tell us what the favorite food is,
it's just going to say that one of them was selected.
So this is exactly why the value attribute needs to be unique for each radio button within a group.
This is different to the name attribute. For a set of radio buttons that belong to the same group,
all of them should have the same value in the "name" attribute.
The next point I want to make is that all radio buttons in a group must be in the same document and
belong to the same form or belong to no form at all.
In other words, placing radio buttons in different forms or documents will break their grouping even
if they do have the same name value.
Let's quickly hop over to Visual Studio Code and have a quick look at coding up some radio buttons.
We've seen an example of using checkboxes.
Here's a quick one using a radio button.
We don't need an action because we're not going to be submitting this to a real server.
And let's create our form.
Let's wrap each widget within a paragraph tag, and here we're going to pretend we're doing a booking
sites for a hotel, maybe.
Who knows?
So here we go, select a room.
Let's just break it up here.
Let's have a label.
And we all know what this label does.
And I'm going to implicitly use this label, right, by wrapping our input within it.
So here we've got an input, and here I want a type of radio.
It's name can be roomType.
We don't need an ID, I'm not going to be styling this up with CSS.
This one can be budget, and we can say here we're trying to find a budget [for] one bedroom.
How's that?
Let me just zoom out a bit
so it's on one line.
Let's copy this label
three more times.
There we go.
We can have a budget type, a standard room type, and you guessed it, an executive room type.
This can be a standard
suite.
And this can be the penthouse.
Firstly, I want you to notice that the name attribute is the same and it has to be the same to group
all these radio buttons.
This is what's telling the browser that these are all part of the same group, and it will only allow
a user to select one.
And for example, when the user comes on to a site, let's say we want one of these to be checked by
default, the standard suite.
The next thing I want you to notice is that the value attributes have to be unique when it comes to
radio buttons.
They are vitally important because it tells us when it's submitted to the server, which item has been selected,
and that's why they have to be unique.
Then next, just to mix things up, let's have an input of type submit.
Well, you know what?
Let's do the better one.
And that is a button.
Well, actually, before I even do that, let's wrap our submit buttons in a paragraph.
Then all the styling looks the same here.
We can have a button with type submit and that can be
Book Now. And then we can have an input with type reset.
How's that, "Start again".
Let's save this.
Let's open it up with Live Server.
And how cool is this?
(sound effect: Yeah) Well, you know what,
I actually want to break these up.
It's a bit annoying having them right there so we can put a break, and a break.
There we go.
So we're selecting a room - budget, standard or penthouse.
And what's cool is that these are grouped now. The user can only toggle one at a time.
So let's now do Penthouse, click on Book Now.
We can see that the room type has been set to executive, it's sent to the server.
How awesome is that?
Of course, if the user has done a whole lot in the form and wants to start again, we've made it clear
that he's going to be starting again and that defaults back to the original form.
So just something different for you to look at. Now
you kind of know what radio buttons do, how they are grouped.
It's not that difficult, I told you.
Right.
And yeah, hope you're having a lot of fun.
So there we go
my dear students. We've done an incredible amount in a short space of time.
We've spoken about checkable items and in particular, we've spoken about checkboxes which allow you
to toggle something on and off, however many you want, and radio buttons. And radio buttons belonging
to the same group only allow you to select one in the group, no more than one.
And this concludes the lecture on checkable items.