Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Although you can insert radio buttons individually the most efficient way to place radio buttons in your forms is by using Dreamweaver's Radio Groups. Radio buttons by their very nature are grouped together and only allow one choice, by using radio groups, you can skip the process of having to group the radio buttons together yourself as well as the pain of having to add them one at a time. So, to illustrate that I'm going to scroll down into my form again and this time I'm going to find this Tour Group Placeholder section, I'm going to highlight that delete the text and then I'm going to type in, Would you like to schedule a campus tour? So, this is indeed a yes or no answer and checkboxes would work or a single checkbox would certainly work here, but I want to give them the option of saying yes or no.
Okay, so I'm going to go down to the Tour Group Choices and highlight that and delete it, delete the text inside of it and then going up to my Form Objects. Again I can see that I have this checkbox group here and then on the right-hand side of the radio button individual radio button I also have the Radio Group, so if you want to grouping of those items you can go ahead and select one of those. So, I'm going to go ahead and choose Radio Group and when I select that I have to give the group a name. The overall group that I want here is tour, so that's let's me know whether somebody said yes or no to the tour.
Now the radio buttons let me explain what this is going to be. The label is what you're going to see beside the radio button, the values is what's going to be sent into the form if that particular radio button is selected, so you can have as many of these as you want we really only need two. For the first label, I'm going to type in yes, the value is going to be yes. The second label is going to be not at this time and the value for that will be no. Now I can also lay this out using line breaks or table I can't really think of a compelling reason these days to these tables, so I'm going to use line breaks and click OK at least not for layout.
Okay, so there is yes and not at this time. Now, one of the things that you might want to do is go ahead and choose a default radio button in terms of which one is default within the group, you want to be very careful about that, you may have heard the term dark pattern before. Dark pattern is where you force your user into doing something that you wouldn't normally do. For example, if I want the initial state of yes to be checked that's almost like saying hey, if somebody forgets, yeah, I want to schedule tour. So, the nice thing to do here would be just leave that unchecked and then do the, not at this time and check that and give them the option to check yes.
So, you want to be very careful about how you treat the initially selected radio button within a group, because that can actually cause a negative user experience. Now, one of the things that you'll notice that we didn't do when we inserted these radio buttons on the page was type in a tab index. Unfortunately when we do the groupings like this whether it's a checkbox grouping or radio button grouping, we don't have the option of doing a tab index, so we're going to need to do that manually. So, what I'm going to do is I'm going to click each of these radio buttons, one at a time and then with the radio button selected, I'm just going to hit Ctrl+T or Command+T. Again that's bring up our old friend to quick tag editor and this allows us at the very end of this tag here to enter in tabindex and this one is going to have tab index of 110, oops we want to be careful don't hit Return too many times and then no is going to have a tabindex of 120, so now I'm going to go ahead and save that.
Now if I switch to Live view and test this out, you can see that only one radio button can be selected at a time, so choosing one will deselect the next one and that's a really good thing, you should always test those out. If you ever have a time where you can select more then one of those that basically means that they're not grouped together properly, so you need to check your code or reinsert the radio button group. All right, so we're almost finished with our form. Next step we're going to give users a way to submit the form by adding a submit button.
Get unlimited access to all courses for just $25/month.Become a member