In some ways, the input version of select does things a bit better, as they add the list option to most of their input types. The input version of lists does not, however, require that you select one of the provided options but will allow you to type in anything you want. Any text, even if it is not one of the values, is considered valid so validation can be more work. To use a datalist with an input element, you simply need to add a list attribute that specifies the id of the datalist you wish to use. This is how we would have our list of card suits:
The suits datalist can be created elsewhere in the code and are very similar to select statements but the value of the options is what is used. You can have values within the options but those will just appear as additional information about the value. The value is not guaranteed to be the input but is used as suggestions so as the user types, those suggestions that match are shown. The datalist code looks like this:
One of the nice things about datalists is that you can use them multiple times. This is done by simply using the same datalist as the list as needlessly shown here:
Another useful way that datalists can be used is to add tick marks to a range. Wanting to add tick marks makes sense, but using a datalist to do so is not intuitive. Unless you know this feature exists you would have a hard time figuring it out on your own. You simply need to have a datalist in which the values are the numbers that should have a tick beneath them. Note that you do not need to cover the whole range of the range, though it is a good idea to do so. Here is an example:
Recall that you normally do not see a numerical representation of the range, so I wrote a simple function that shows this:
While it probably goes without saying, tick results will also work with custom ranges as you can see below.
You may notice that we are providing names for each of the options. This was not done for the range, as such values do not show up, but was done for my number input. Many browsers will display the description so you can have a number input that has set values and can optionally also have a description of what those numbers represent. This means that you can use a datalist with number input as seen here:
Datalists can also be used for creating a palette of colors. Not all browsers will use this list, but those that do will display your pre-defined palette, though will also allow other colors to be selected. You will notice that I am using HTML color codes for the values, as specifying the names of colors does not work with the browsers that do support custom palettes. Here is an example:
While datalists can be useful, it is important to remember that their values are not enforced, meaning that if you want the datalist values to be the only acceptable values, you will have to check yourself if the value entered is on the list of values. Next we will look at a rather weird element, output.
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