How it Works: Making Use of More Controls

How it works

In the first step, you added the <datalist> element to the form definition. It uses a number of <option> tags to define suggestions that can be offered by textboxes. The value attribute of each option defined the text that was to be posted to the backend. The first and the second <option> items define text values that can be used by the browser when rendering the item.

The two images above (for Edge and Chrome, respectively) demonstrated that browsers use different styles to display a data list item.

In step two, you assigned the list through its identifier, suggestionlist, to the salutation textbox.