Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMaster > LibraryWeb Page and Site Features

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

List of Suggestions at Form Text Field

The HTML5 datalist tag presents a list of possible values when a user starts typing in a text field. The user can select one of the values instead of typing the whole thing. Alternatively, the user can type something that isn't in the list.

No JavaScript required. No special CSS. Just HTML.

The datalist tag works only with the input type="text" field, not with the textarea field.

Different browsers list the possible values in the datalist tag differently.

Opera lists all values when the text field is empty and in focus. When the user starts to type in the field, only suggestions beginning with the characters being typed are listed.

The other browsers list values to select from only when the user begins to type something. Firefox lists values containing anywhere within them the sequence of characters being typed. Chrome list only values that begin with what is being typed.

For browsers that don't yet recognize the datalist tag, the text field acts like a normal text field without a list of suggestions.

Currently, Firefox, Chrome, and Opera recognize the datalist tag. When the other browsers upgrade to recognize it, they will work with the datalist tags already coded in your forms.

Here is a form with two examples.

Your favorite color?

The current moon phase is:

And here is the source code for the above example.

<form onsubmit="return false">
<p>
Your favorite color? 
<input type="text" list="FavoriteColor" id="color" name="color" style="width:100px;">
<datalist id="FavoriteColor">
<option value="Red">
<option value="Green">
<option value="Silver">
<option value="Gold">
<option value="White">
<option value="Black">
<option value="Blue">
<option value="Purple">
<option value="Orange">
<option value="Yellow">
</datalist>
</p>
<p>
The current moon phase is: 
<input list="MoonTypes" id="moons" name="moon_phase" style="width:100px;">
<datalist id="MoonTypes">
<option value="New Moon">
<option value="Waxing Crescent Moon">
<option value="First Quarter Moon">
<option value="Waxing Gibbous Moon">
<option value="Full Moon">
<option value="Waning Gibbous Moon">
<option value="Last Quarter Moon">
<option value="Waning Crescent Moon">
<option value="Blue Moon">
</datalist>
</p>
</form>

Notice that the datalist tag immediately follows the text field it applies to.

The input type="text" tag has a list attribute. The list attribute's value is the id value of the corresponding datalist tag.

A form can have any number of datalist tags so long as each immediately follows the text field it applies to.

The HTML5 datalist tag to present a list of possible values for a text field can be used now. Browsers that recognize the tag will provided a selection list. The others will when they upgrade for it.

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

Support Area – Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC