Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.11: Data Lists

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:

<input id="suitInput" type="text" list="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:

<datalist id="suits">
<option value="Club"></option>
<option value="Diamond"></option>
<option value="Heart"></option>
<option value="Spade"></option>
</datalist>

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:

<input id="suitInput2" type="text" list="suits" />


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:

<datalist id="normRanges">
<option value="0"></option>
<option value="25"></option>
<option value="50"></option>
<option value="75"></option>
<option value="100"></option>
</datalist>
<label>
Set your score:
<input id="normRange" type="range" list="normRanges"
oninput="updateRange('normRange', 'normValue')" >
<span id="normValue"></span>
</label>

Recall that you normally do not see a numerical representation of the range, so I wrote a simple function that shows this:

function updateRange(rng, lbl) {
let inputRange = document.getElementById(rng);
document.getElementById(lbl).innerHTML= inputRange.value;
}

While it probably goes without saying, tick results will also work with custom ranges as you can see below.

<datalist id="rollRanges">
<option value="3">Low</option>
<option value="6">Below average</option>
<option value="10">Normal</option>
<option value="15">Above Average</option>
<option value="18">High</option>
</datalist>
<label>
Set your attribute:
<input id="rollRange" type="range" list="rollRanges"
min="3" max="18"
oninput="updateRange('rollRange', 'rollValue')" >
<span id="rollValue"></span>
</label>

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:

<label>
Attributes as number:
<input id="attributeNumber" type="number" list="rollRanges" min="3" max="18">
</label>

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:

<datalist id="colors">
<option value="#DD0000"></option>
<option value="#DDDD00"></option>
<option value="#00DD00"></option>
<option value="#00DDDD"></option>
<option value="#0000DD"></option>
<option value="#550055"></option>
</datalist>
<label>
Pick a color:
<input id="colorInput" type="color" list="colors" >
</label>

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.

Chapter contents

Chapter 5 Contents

5.1 Forms Cheat Sheets

This chapter's summary cheat sheet.

5.2 The client-server model

How forms are traditionally used.

5.3 The Form tag

How to set up a form in HTML.

5.4 Inputting text

Getting text input from the user.

5.5 Specialized text formats

Making your input fields more specific and semantic.

5.6 Form cosmetics

Making forms look more like printed forms.

5.7 checkboxes & radio buttons

How to use Checkboxes and Radio buttons.

5.8 Numbers and Dates

Using numbers and dates gives your user better GUI controls.

5.9 special purpose input types

The reset, button, image, color, and file input types.

5.10 Option Select

The select element lets users select options from a drop-down list.

5.11 Data Lists

The datalist elements lets you create pull-down lists for input elements.

5.12 Output

Displaying values in a form.

5.13 dialog box concepts

Built in dialog boxes and pre-dialog tag handmade dialogs.

5.14 using dialog boxes

The <dialog> tag and using it to create dialog boxes.

5.15 Validating forms

Review of validating forms in HTML.

5.16 JavaScript Validation

How to use JavaScript to prevent invalid forms from being submitted.

5.17 Project: Trivia

Chapter project: Trivia game

5.18 Trivia Project Solution

Solution for the Trivia gaame

← previous section
Option Select
next section →
Output
Table of Contents