Using a Data List

The list attribute specifies the id value of a datalist element. The datalist will be used to suggest options.

The actual values are defined by the option element. The datalist is new in HTML5.

      <form method="post" action="http://yourServer/form">
                  <label for="name"> Name: 
                      <input placeholder="Your name" id="name" name="name" />
                  <label for="city"> City: 
                     <input placeholder="Where you live" id="city" name="city" />
                  <label for="fave"> Survey: 
                     <input list="Surveylist" id="fave" name="fave" />
            <button type="submit">Submit Vote</button>
      <datalist id="Surveylist">
            <option value="A" label="A" />
            <option value="B">B</option>
            <option value="C" />
Click to view this demo.

The value attribute specifies the data if that option is selected. You can use a different label to describe the option or by defining content within the option element.

  HTML CSS Book 

  1. <input> element
  2. input element max size
  3. input text field size
  4. input text field initial value
  5. input text field placeholders(gray text)
  6. Using a Data List
  7. Read-Only input text field
  8. Disabled Text Boxes
  9. input element for password input
  10. Using the input Element to Create Buttons