Often you want users to select from several options but do not want to have a list of items. This is possible by using the Select element. This element, like other lists, is a compound tag so that you have the select tag and within it are option tags. If you want to get fancy you can have the option tags grouped into optgroup tags.
At the outside of this compound element is the select tag. It can be used in forms to submit the value of the elected option by using a name attribute in the tag. Normally you would then have a list of options that the user can select from. Each option element is an option that can be selected with the value of that option being the value sent to the server.
The content of an option tag is restricted as browsers tend not to support non-text tags. Despite not having support for images, you can take advantage of Unicode to add images to an option and can style options within the option tag to make your options more colorful. The downside to having colors is those are lost when the colored option is selected. Here is an example of a colorful select statement:
Of course, in order to find out what option you selected, you simply need to grab the value from the element. The value, however, does not need to match the contents of the option. This can be useful as you can set the value to something useful to your code even if it is not useful to the user as the user only sees the content. Here is the code used to find which suit was selected:
The option tag does have a few attributes that you may want to take advantage of. If you do not want the first option to be the default, you can use the selected attribute to specify which option you want to be the default. Only one option can be the default unless you are using the multiple attribute. Likewise, if you want some options to be unavailable at the time but still visible, you can use the disabled attribute to disable them. Here is an example of using these attributes.
If you want to break your selections into groups of related options, you also have the optgroup tag. This tag has the options that are part of it’s group inside the contents area with the required value attribute being the name to display for the option. Here is an example:
You will notice that we are using short codes for indicating the cards. If we wanted to get the card names, we would have to access the options within the select element. This is something we can do, but does require knowledge of arrays. I will show the code for doing this below, but don’t worry if you can’t understand the code yet. It will make sense once we cover arrays in Chapter 7. This code finds the index that the selected option is at. As -1 is the value if no option is selected, we want to change it to 0 (the first option) if nothing has been selected. We then get the text from the options that the element has. The [] is used to indicate array access so it is saying grab the option that is at the indicated index.
We mentioned a bit earlier that the multiple attribute lets users be able to select several items. When this attribute is selected, a list box is presented instead of a drop-down menu. You can specify the number of items that are shown at a time by setting the size attribute. The tag
Dealing with multiple selections also requires using arrays so you may want to revisit this code after you have finished Chapter 7. Multiple selections have a selectedOptions result which we are storing in the cards variable. This would be an array of options which we traverse and add as list options to an inner HTML String we are building.
Some of you may be wondering why this isn’t also an input type. The answer to that will be revealed in our next section.
This chapter's summary cheat sheet.
How forms are traditionally used.
How to set up a form in HTML.
Getting text input from the user.
Making your input fields more specific and semantic.
Making forms look more like printed forms.
How to use Checkboxes and Radio buttons.
Using numbers and dates gives your user better GUI controls.
The reset, button, image, color, and file input types.
The select element lets users select options from a drop-down list.
The datalist elements lets you create pull-down lists for input elements.
Displaying values in a form.
Built in dialog boxes and pre-dialog tag handmade dialogs.
The <dialog> tag and using it to create dialog boxes.
Review of validating forms in HTML.
How to use JavaScript to prevent invalid forms from being submitted.
Chapter project: Trivia game
Solution for the Trivia gaame