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 for one choice. By using radio groups you 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 here I have the join.htm file open from the 12_09 Explorer's directory and I'm going to scroll down through my form and find the very last checkbox, which would be Taste of California, and then hit Return to create a paragraph just above that.
There I am going to type in 'How many Explore California tours have you been on?' All right, and I am going to hit Return to go down to the next line and that is where we are going to insert our radio group. So again instead of a label, that paragraph is going to act more as a sub-heading. All right, I am going to go up to my Insert panel, look at my Form objects, and I have two choices for radio buttons. I can insert a single radio button or I can insert a radio group. And that is what we are going to do. So you are going to go up and select the radio grouping icon, which is right beside the single radio button, and when you do that,you get a brand dialog box that comes up.
Now you'll notice that we did not see the Accessibility dialog box. That's one of the trade- offs for doing a radio group. We're going to have to go back in and manually add things like Tab Index. That's not that difficult and I am actually going to show you a technique is going to allow you to do that without having to go into Code View. Okay so we need to name this radio group and I am going to name it tours. So when the form is submitted, whatever choice somebody makes in from this group, the form data will say tours = whatever somebody has chosen. So that's why we're going ahead and giving this a name.
All right, our first label is going to be none and the value for that is going to be 0. So the label is what someone is going to see out beside the radio group. The value is what's going to be submitted with the form. In the case of our form, our values, we're just making them up, but if somebody is creating the form processing for you, you may want to make sure that whatever value you are adding there is sufficient for what they're doing or they may even have a set of values for you. All right on the next line, I am going to go ahead and type in 1-3. The value for that is going to be few.
Now to add more radio buttons, all I have to do is click the plus symbol up here and the next radio button is going to be 4-6. We're going to categorize those guys as strong customers, so the value for that is going to be strong, and then finally one more, and you may have to scroll to see it after you've added it. But that one is going to be 7 with the plus symbol beside it for the label and then the value for that is going to be heavy. So they would be a heavy user of the Explore California tours. Now when you place these on the page, Dreamweaver wants to know, should I go ahead and arrange them within a table, which is sort of the older way of doing it, or should I just go ahead and use line breaks? Now we're not actually going to use the structure that Dreamweaver is going to give us at all and the easiest structure to get rid of would be line breaks.
So we're going to go ahead and click OK and just place our radio buttons right up there on the page. So there you can see we have none, 1-3, 4-6, and 7-8, and I really should have been inconsistent there. So you are free to go in and change those labels and type in whatever you'd like at any point in time. Now I mentioned before that we need to do the tab indexing ourself. I want to show you a very quick and easy way to do that. If I select a radio button or really any object that I have on my page, and if I want to access the code of that particular object, all I have to do is bring up the Quick Tag Editor.
The Quick Tag Editor allows you to edit code from within Design View and can be a huge timesaver. To bring up the Quick Tag Editor, you use the hot key Ctrl+T or Command+T. That's going to bring up our Quick Tag Editor and you can see we're editing this particular tag. What I am going to do is add a tabindex to this and I am going to add a tabindex to the first one of 200. I need to do that for each of these. So in order I am going to select them, hit Ctrl+T or Command+T to bring up the Quick Tag Editor, and to add an attribute, the easiest way to do this, go to the very last attribute, place your cursor right beside the quotation mark, and hit Space.
You will see some code hinting come up. When I hit T, it will jump down to tabindex and then I can hit Return. It will finish it, add the equals, and place my cursor right inside the quotation marks. I can just type in 210 for the second one, hit Return, and I'm done. So please take advantage of code hinting while you are doing this because it's just going to speed up that process. It's also going to make sure that the syntax is correct. So I am going to do that for the next one and here I want to do a tabindex of 220, there we go. And we got one last one to go and this one I am going to give it a tabindex of 230. Okay, here we go.
So 200, 210, 220, 230, and there we go. Now I mentioned before that we didn't need the structure. So we've got one last task to do and that is to get rid of the line breaks. The easiest way to do this is through code. So I want to go ahead and just highlight all of those elements and then switch to Split View so I can see both the Code and the Design View at the same time. And if you have never seen a line break tag before, this is that tag. It is a self-closing tag. It's just a br with the forward slash. There is no opening or closing tags.
And what you need to do is find the br tag between each of these radio buttons and just go ahead and get rid of it. Just go ahead and delete it. You don't necessarily have to delete the line like I am doing. I just like to keep my code nice and organized, but I'm going to go ahead and get rid of that line break tag between those guys. There you should have three line breaks and actually there is a fourth kind of hidden in the last one. So four line breaks in there, there you go. Do a Save All, and now when I switch back over to Design View I can see they're all in the same line. So that's what you are looking for. You want all of those guys to be on the same line, perfect! So as you can see sometimes we have to modify our code.
One of the easiest ways to do that is through the Quick Tag Editor. Dreamweaver makes that very simple for us, but there's nothing wrong with occasionally having to go into Code View and take care of things yourself. What I do hope that this illustrates for you is that you must make sure that the proper attributes are being used and not take it for granted the Dreamweaver is going to do that for you. Now we are almost finished with our form. Next up, we're going to give users the option of submitting a comment by using a Textarea form element.
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.