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.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <p>
                  <label for="name"> Name: 
                      <input placeholder="Your name" id="name" name="name" />
                  </label>
            </p>
            <p>
                  <label for="city"> City: 
                     <input placeholder="Where you live" id="city" name="city" />
                  </label>
            </p>
            <p>
                  <label for="fave"> Survey: 
                     <input list="Surveylist" id="fave" name="fave" />
                  </label>
            </p>
            <button type="submit">Submit Vote</button>
      </form>
      <datalist id="Surveylist">
            <option value="A" label="A" />
            <option value="B">B</option>
            <option value="C" />
      </datalist>
</body>
</html>

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.

Home
HTML CSS Book
HTML

input: