Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The list/menu item is actually one element that has two possible uses. When placing a list/menu item on your page, you can choose to either make it a list or logically enough a menu. Now a menu is going to give your users a pulldown menu that allows only a single choice. These are very good for presenting users with long lists were only one choice is allowed. The list option on the other hand allows you to create a list that displays multiple choices. This can be handy for a small list but it can become a bit cumbersome when used with too many choices.
The menu item is by far the more common of the two and it's what we're going to use in our form for users to identify their home state. And you can see we've got an extra text field in there. I just decided to save your little bit of time and did that for you. We are just going to create a paragraph directly underneath that and this is where our pulldown menu is going to go. So let's go up to our Insert panel. And we are going to find this little pulldown menu right there. Select List/Menu. I am going to go ahead and click that. And just like your text fields every form element that we place on the pages is going to have these accessibility attributes come up.
We are going to give this an ID of state. And for label we are just going to give it States, capitalized and with a colon there. And the Tab Index for this one is going to be 50. So again we are going to attach the label using the for attribute. We are going to place it Before the form item and we are going to go ahead and click OK. So you can see we have little pulldown menu here. But unlike some of the other form elements this one is going to require a little bit of work on our part. We are going have to manually input all of the options for user. Now, if you are doing dynamic development and you have a database or some type of scripting software that can help you with this, Dreamweaver can hook into those.
You can populate this lists or menus through that usage. Since we are doing a static form, we have got to do it ourselves. So roll up your sleeves, get into your mouse, and off we go. Take a look at the Properties Inspector. We get to choose between Menu and List. We are going to choose Menu. And the ID again is state. Now here is where we have to do a little bit of our work. List Values, we are going to go ahead and bring that up. And this dialog box is similar to a dialog box that you are going to see on numerous elements. Especially like radio buttons for example.
Now let's talk about what this means. You have a label on the left-hand side; you have a value on the right-hand side. The label is what the user will actually see in the pulldown menu. So that's what you want to be visual. You are going to make that a little bit more descriptive. But the value is what actually gets submitted with the form. Now again if you're working with something as complex as a form where you have states, more than likely the developer that is going to be writing the processing scripts is either going to self populate this form or at least tell you what values you should be using.
In this case we are just going to use some placeholder values. But our first state, at least alphabetically, is Alabama. And the value for that is going to be capital AL. So we are just going to use the abbreviation for them. And go ahead and click OK. So what I want to do now is show you the value of going in the Code View and knowing how the structure of these form elements work. So I am going to go ahead and select this form element and I am going to switch to Split View. And I can see right here that instead of an input tag, I have a select tag. Notice that tabindex, id, name, those attributes are all on there as well.
Now inside the select tag is an option tag. So we have an opening and a closing select tag. And then every single option for the pulldown menu is listed inside of an option tag. The value that gets submitted with the form is the value attribute. And the text that appears to the user is right inside there as the option value. Now I'm not going to make you type all that. If you scroll all the way down to the bottom of the page, you are going to find a little present that I have left for you. Look at that. So what I have got is commented out down here, I have got all those options for every single state.
So what I'd like you to do is just go ahead and grab. And we have already done Alabama so we don't need to do that. I am going to start right here with this option, scroll all the way down, and select Wyoming. Now make sure you're getting both the opening and closing option tags and you don't need these comments. So don't copy those, okay. I am just going go up, copy that, scroll up to my form, and right after Alabama I am going to create a blank line in my code and I am going to paste it.
See how easy that was? Sure beats typing, doesn't it? Now you may have noticed something about the placeholder text that I had down below. This value was slightly different than everybody else. Now why is that? Well, save the file, go back to Design View, and let's figure that out. If you click any list/menu item, you can go down to the Properties Inspector and tell it which one to have initially selected. In this case, we are going to select Alabama because it's the first state alphabetically. But we could have also placed something in our list/menu item such as "please choose a state" and have that be the first item.
It's really up to you as to how you want to do that, but we have the ability to go ahead to make one of those values initially selected. Now the hard part about creating list/ menu items is knowing what to use for the labels and what to use for the Data. Unless you're also creating the processing page, you'll need to know the exact names of each of those data fields. And remember here we are using just that abbreviation. This isn't any different from any other form element. It's just that with list/menu items you have multiple names to worry about instead of just one.
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.