Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Checkboxes and radio buttons are very similar form elements that have really just one important difference. Checkboxes allow for multiple choices and although you can group them together, if you want to, you're not required to. Dreamweaver also gives us a choice in inserting single checkboxes or if we want to insert a group of checkboxes. To make it a little bit easier to add our tab indexes accessibility option and since we don't have a long list of checkboxes, we're going to insert our checkboxes one at a time. So again I'm on the Request page. This time from the 10_08 folder, and I'm just going to scroll down in my form until I see the Financial Group Placeholder.
I'm going to highlight that, I'm going to replace this text with the text that reads if you would like information regarding our financial aid programs please check the one(s) that apply to you: So in this case this isn't a label. It is text that is introducing what the checkboxes are, but it's not necessarily a label itself. Now if I go down into the Financial Group choices placeholder, I can delete that and I can begin to put my checkboxes on the page.
So if I go up to my Form objects I can find Checkboxes right here. You can see Dreamweaver groups checkboxes and radio buttons together, because they're so similar. So I'm going to go ahead and click my first checkbox. The ID for this one is going to be in just i-n and it's all, and the Label for that is going to be New York Resident. Of course, I'm the ones who's coming up with those IDs. Again if you're designing the front end of a form that somebody else is processing they'll probably tell you what values you need, otherwise you're going to choose those values and they need to make sense to you so that when a form data is submitted you know what you're looking at.
In this case, again I'm going to go and attach the label tag using the for attribute. Notice that the default position for this is after the form item, I'm going to accept both of those defaults and for the Tab Index I'm going to type in 70. Now after each of these checkboxes I want a line break and the easiest way to get that in Dreamweaver is to click right after the label, hold down your Shift key, and hit Enter or Return. This is going to give you a soft return or a line break. You can see my cursor is down there on the next line. That's going to result in these guys being grouped within the same list item rather than being all in separate list items.
So again I'm going to go up insert another checkbox. This one is going to be fsa. The Label for this will be Federal Student Aid and the Tab Index will be 80. Again, I'll hit my right arrow key and then Shift+Enter or Shift+Return. I have another checkbox. This one is going to scholarship. The Label for this one will be Scholarship Programs and the Tab Index for that is going to be 90.
Once again I'm gong to hit my right arrow key, Shift+Enter or Shift+Return and I've got one more checkbox I need to do. The ID for this one is going to be loans, the Label for this one is going to be Student Loan Programs, and the Tab Index for that one will be 100. So I am going to go ahead and click OK on that, I'll save our file, and I'm going to render this in Live View so that I can scroll down and again the nice thing about checkboxes is I can select multiples. So if somebody was interested in all four programs they're allowed to make those choices.
Now even though that these are grouped together in a single list item tag I haven't really done anything other than that to group them together. Sometimes you will actually use checkbox groups or you'll use a group ID to group all these guys together, but we didn't need anything quite that complex. While we now have checkboxes for each of our financial aid choices, they don't look very good. As a matter of fact the whole form doesn't look that great, but we will be styling them shortly I promise you. Now for the moment focus on the fact that checkboxes allow a little bit more flexibility than radio buttons and they really should be used anywhere where you can choose more than one answer.
Now they're also very helpful when the question is a simple yes or no, because you can put a single checkbox and give the user the option of checking it or not. This is actually a common way to have people sign up for newsletters or online offers.
Get unlimited access to all courses for just $25/month.Become a member
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.