KAWWA Markup Pattern Library


Forms

Datalist Component Information

  • Class name:
  • Version: 1.0

Add to list

This is a simple input pattern that doesn't require a CSS class.

The datalist HTML5 element, refered to by the input list attribute, is a handy and straightforward way to list predefined options suggested to the user. It may be used whenever the expected input entry value can be one of several predicted values. It doesn't mean, however, that the user is stuck with one of the values listed, but that she has a simple helper to fill out the field.

Notice that this markup is valid only for the HTML5 DOCTYPE

HTML5 Plain Code

COPY
  1. <p><label for="mainBr">Main browser:</label>
  2. 	<input id="mainBr" name="mainBr" list="browsersList" />
  3. 
                                
  4. <datalist id="browsersList">
  5. 	<option value="Android browser">
  6. 	<option value="Blackberry browser">
  7. 	<option value="Chrome">
  8. 	<option value="Firefox">
  9. 	<option value="Internet Explorer">
  10. 	<option value="iOS Safari">
  11. 	<option value="Opera">
  12. 	<option value="Opera Mini">
  13. 	<option value="Safari">
  14. </datalist></p>

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce