Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
This course introduces web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language used to create web pages. Author Bill Weinman explains what HTML is, how it's structured, and presents the major tags and features of the language. Discover how to format text and lists, add images and flow text around them, link to other pages and sites, embed audio and video, and create HTML forms. Additional tutorials cover the new elements in HTML5, the latest version of HTML, and prepare you to start working with Cascading Style Sheets (CSS).
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.
Find answers to the most frequently asked questions about HTML Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
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.