Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Checkboxes and radio buttons are used to allow a user to select from the set of options. Checkboxes are either on or off; radio buttons are mutually exclusive controls. Let's take a look at these elements. Make a working copy of checkboxes.html, and I'm going to name this checkboxes-working.html. Open this in my text editor, and scroll down here to the form. You'll notice at the top we're using the same forms.css and forms.js we're using throughout this chapter.
And here's our form. You'll notice we have input again, the same input tag getting overloaded again. This time it's type= "checkbox" and type= "radio". Let's go ahead and open this in a browser so you can see what it looks like. I'm going to open this in Firefox. This feature is been around since the very beginning of HTML forms, and so it works pretty much the same in every browser. And if I click the Big Red Button you see my checkboxes on, off, on, and radio button is selected number two of those.
So let's take a look at the HTML for this. You notice that my checkbox is very simple--input type="checkbox", name= and then the name for the individual checkbox option. There is an optional checked attribute, which means it a little default to its checked state. You see I've got that on two of them. So if we look in the browser here, we see two of these are checked by default, and they show up as on in the results. And one of them has auto focus, and so you notice when I load this that that one is a little bit highlighted. And I don't even need to click it; I can just press the spacebar on my keyboard and press the Tab key to navigate between them and press Enter to submit, and there we have that.
The radio buttons are a little bit different. You'll notice that it's still the input tag, type="radio". You notice that all the three of these have the same name. That's how they get grouped together, because they're mutually exclusive. If I press one of them the other one's get unpressed. Only one of them in a group can be pressed at a time, and the way they're grouped is by having the same name. And then the each have different values, so that we can tell in our results which one is the one that got pressed. And you notice that I can use the same checked attribute to say which one is the default. When I reload this page, it will always go back to the second one.
So that's checkboxes and radio buttons. Checkboxes and radio buttons are common features and have been around since the beginning of the forms interface. This feature is supported by all browsers that support forms.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98219 Viewers
61 Video lessons · 85533 Viewers
71 Video lessons · 69482 Viewers
56 Video lessons · 101818 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.