Radio Button

[00:00:00]
>> Jen Kramer: Now we get on to some ones that are a little bit more different. So we've done a whole bunch of different input types here. They've all been variations on a blank, right? So we've had plain old texts, we had phone numbers, we had e-mail, we had dates, we had numbers.

[00:00:16]
Those are all basically a field that looks like this, little box that looks like this. Okay, so now, we're gonna move on to some other types of possibilities here. And so, in this particular case, there's only four kinds of UFOs that can do this abduction, only four choices.

[00:00:34]
Sorry, you can either have your classic old UFO, a Star Wars style imperial cruiser, a Battle Galactica style viper, or a Borg style cube. Those are your only choices. I'm sorry, that's all we've got right now. And since this abduction is happening, you're only gonna pick one of these, right?

[00:00:53]
You can't pick like multiples, you have to pick only one. So a great way to do this is something called a radio button. And you've seen these on forms before. They're the little round guys. You get a group of them and you can only pick one of those in the group, right?

[00:01:08]
So if I pick the first one, and then I change my mind and I pick this one down here, this one unselects and this one selects instead. You've seen this in action? Okay, so we're gonna go ahead and code some of these radio buttons.
>> Jen Kramer: So we're actually not gonna wind up using this list at all.

[00:01:29]
And so, I'm actually just gonna delete some of these tags here, and just
>> Jen Kramer: Set it up like that.
>> Jen Kramer: And I'm gonna leave my paragraph here with my question what type of UFO do you prefer.
>> Jen Kramer: And I'll show you why in just a moment. So what I'm going to say here is, once again, this is still an input type.

[00:01:59]
This time it's radio. That's our type. This goes back to the old radios from 50 odd years ago where you had the little buttons that you could press and things would change. That's where the name radio button comes from. We'll give it a name of UFO type, okay?

[00:02:22]
>> Jen Kramer: And we'll give it a value of classic.
>> Jen Kramer: And I'm just gonna show you this much right now. So normally, the radio buttons are to the left, right? You have the button and then you have the text that comes after it. You've seen these on forms before, right?

[00:02:43]
Radio button, text, radio button, text, radio button, text. So the way I've coded it here, you see that? That's gonna be my radio button followed by the text after it, right? Let's just do that much so far. If you go ahead and save that.
>> Jen Kramer: And refresh your web page, you'll see you have, there's your button, and you can select it.

[00:03:05]
You probably can't unselect it, but you can select it. Now, right now, take a look at the clickable area. You can click that radio button right there on the button. But if I come over the text over here, I can't click the text, can I?
>> Jen Kramer: And select that radio button.

[00:03:23]
I have to click very precisely right on that button. Wouldn't it be nice if that whole thing was clickable? That would actually be much better. And so, our label tag is gonna come in handy for that. And that's the purpose this label tag is gonna serve. But since the words that describe that radio button are right next to this, we're gonna apply our label button in a slightly different way.

[00:03:47]
All we have to do is just say label before that radio button. And then, slash label after that radio button.
>> Jen Kramer: So we just make sort of a unit there, okay? So label tag right before, you close it right after. And you don't need to use the for in that case.

[00:04:10]
You actually don't need an ID in this case, either, for the purposes of HTML. And once again, there might be something with JavaScript that you want an ID for. But for what we're doing here, we don't actually need that. So let's code one more of these, and then I'm gonna let you code the last two on your own.

[00:04:29]
So let's go on ahead and do our Star Wars style imperial cruiser.
>> Jen Kramer: So basically, we're gonna go ahead and take our radio button once again. That same radio button code. We're gonna have a label for it.
>> Jen Kramer: And we're gonna drop in our radio button code right before the Star Wars style cruiser.

[00:05:00]
>> Jen Kramer: And we're gonna put in our slash label after it.
>> Jen Kramer: Now, in terms of this code for the Star Wars radio button, okay, it's still an input type of radio. The name is actually going to be exactly the same, okay? That's how we associate all of these radio buttons together, they get exactly the same name, okay?

[00:05:26]
>> Jen Kramer: But the value is gonna change.
>> Jen Kramer: And we'll change that to, what did I call it, Star Wars?
>> Jen Kramer: So now, if you go ahead and save that, and take a look at the web page,
>> Jen Kramer: We have two radio buttons to choose from. And you should be able to select only one of them, right?

[00:06:00]
And you should be able to click on the text as well. So, I don't have to click on the actual button, I can also click on the text. And that will select my button.