show-notice
hide-notice

Friday 9 August 2013

HTML 5 datalist Tag


Introduction:

The HTML <datalist> tag is used for providing an "autocomplete" feature on form elements. It enables you to provide a list of predefined options to the user as they input data.

Example:
<div style="font:0.8em/1em Arial, Helvetica, Sans-Serif;">
<h4>Example 1 (for HTML 5 browsers)</h4>
 <label>
  Enter your favorite cartoon character:<br />
  <input type="text" name="favCharacter" list="characters" maxlength="50" style="width:95%;">
  <datalist id="characters">
   <option value="Homer Simpson">
   <option value="Bart">
   <option value="Fred Flinstone">
  </datalist>
 </label>
<h4>Example 2 (for both legacy and HTML 5 browsers)</h4>
 <label>
  Enter your favorite cartoon character:<br />
  <input type="text" name="favCharacter" list="characters" maxlength="50" style="width:95%;"><br />
 </label>
 <datalist id="characters">
  <label>
   or select one from the list:<br />
   <select name="favCharacter">
    <option>Homer Simpson
    <option>Bart
 <option>Fred Flinstone
   </select>
  </label>
 </datalist>
</div>

SHARE THIS POST   

0 comments :

Post a Comment

Design by Gohilinfotech | www.gohilinfotech.blogspot.com