How to add a radio button round button with dot in middle to HTML form website

Hi there, we're going to make a Radio button. It's this, like weird little dot thing that you can click one, but you can't click both of them the same time. It's an OR, one or the other, it's an input of radio, there it is there. There's a few little quirks to make it work. So let's jump in now and learn how to do it in VS code. 

Let's put our Radio button. Like the rest of them we're going to put it inside just our wrapper, so it's on its own line. And inside of this we will do our input of Radio. Nice simple one. Radio, radio, radio. Already has some quirks to it though. So the name, this one's going to be, let's say. Contact, you saw at the beginning there, Contact Preference. So this is a generic for both options. The ID is specific for this particular little button. So let's call this one Phone. Let's save it and have a little look. 

We're missing bits, let's have a look. So we've got our Radio button, I click it. Problem with it is that if you only have one Radio button it can't be unclicked. It's what's called an OR button. So a check box is an AND, so if you have more than one check box-- let's quickly do that. Here's my check box, I have two of these. Space, space, space. Check boxes are cool, you can have, I want this and that, and that, bit of that. You can have them all, they're all ANDs, A-N-D, whereas a Radio button needs to be OR. I am this, or something else, so you need at least another one button in there. 

So got this one, I copy it, paste it, and the big thing you need, these need to be the same. The name needs to be the same, but the ID needs to be different to make them unique. They also need values so that when you get any emails, it's going to say-- let's put in value. It's going to say, email. So I'm going to do an email saying, Contact preference equals email, or depending what the user puts. Contact preference equals phone. That comes from this value here, so they both need it. So this one needs a value of--

What are we doing? Phone for this one. So we're almost there, now the big thing is, these need to be the same. Name and name, because they toggle, they're OR. This one or this one, you can't have them on. That's why they're called Radio buttons. You might not be too old to remember these styled ones. Radios used to-- even like maybe a little bit before my time, I was born in 1980. These were in some cars but, on their way out, but basically you picked a station, and if you picked another one, if you push that one in, this button popped out, was very mechanical. So that's why that kind of Radio button language kind of continues on. Pop this one in, this one has to pop out, so either this or that. 

You can have loads more of these as long as they use the same name. You need to give them different IDs otherwise you won't know what. Putting in hyphens here, I should use lowercase as well, but it's a stupid one, Dan, come on. 

One thing we're going to do to tidy it up is it needs labels, because it's like mystery buttons. So labels, we're going to put them just afterwards like we did our check box. We're going to put in label, label for, it needs to be the same as the ID. This is the label for the phone, and what is it going to say? It's going to say Phone. I should use lowercase, just, you don't have to, but later on if I'm trying to control this with some other code, you've got to be consistent with things because otherwise you'd be like, "Hey, what isn't it working?" It's because you randomly used uppercase, when you haven't for the rest of the course, because people don't see what's in this stuff. They see in between the label here, so you can use uppers and lowers. 

So the label again, for the button that's just above it, it's going to be for email, matches up. It's going to be email. All right, phone or email. Now in terms of, like a grander label, there's no, like master label. So what we're going to have to do is, just above it put in a P-tag that says, "How would you like to be contacted?" It's just a P-tag sitting above it to help explain this. My button's all jammed in there, doesn't go anywhere at the moment. And that is Radio buttons, our little OR, you, or you. 

Big thing to remember, the big takeaway, to set into your mind, is that these need to be the same. Let's actually check what, if you don't call them so. Say you call that something else, two. What ends up happening is you've got two things that can be turned on, and can't be turned off, ever, because there's no toggle. 

Oh, one more thing before we go. I actually finished the video, and I have to double back around, because about half an hour later I realized this happened. Can you see a little squiggly green line? That's coming from a plug-in that we've got running called HTML Hint. Basically if I click on it, kind of hover above it, it's got-- the email must be unique, the IDs need to be unique. So this ID, email is unique for this, like little group we made, because the other one's called Phone, but remember earlier on, we used the ID, email already. So it needs to be unique, you can kind of see this little warning down here, telling me it must be unique, telling me it's online. 95, and it's character 60, so 95, and the little squiggly line. So this could be called 'email2', as long as it's unique, and your label needs to match it as well. The value do not have to match up.
 
All right, save it, now we're finished with Radio buttons. Let's get on to the next one.