Form Controls in HTML: Drop-Down List

1. <select>…</select>

The <select> element is used to display a drop-down list, from which a user can choose one. Each item of the list is created using the <option> element, and the items are grouped using the <optgroup> element. Table 5.13 lists the attributes supported by the <select> element.

Table 5.14 lists the attributes that the <option> element allows. Of the attributes, the <optgroup> element supports only the label and disabled. Figure 5.42 shows how a drop-down list is created using these elements.

In the example, notice the nesting convention (indicated with the left brackets). It is important to get this right if the list is to work correctly. Figure 5.43 shows the drop-down list after the down arrow has been clicked to activate it. Notice that the values of the label attributes on the <optgroup> elements are automatically given emphasis. When the form is submitted, the value of the name attribute on the <select> element is attached to the value of the value attribute on the <option> element to create the name-value pair that is sent to the server.

The <select> element also supports the selection of multiple options when the multiple attribute is used on it. The value of the size attribute can be set high to show many or all the options at once in order to make this easier. Figure 5.44 shows the result of the same code in Figure 5.42 but with the multiple attribute specified and the size attribute set to 6. Users can select more than one option by holding down a modifier key (e.g., Shift or Ctrl in Windows and Command or Option in Mac) while clicking the options. In the example, three options are selected. However, the use of multiple select menus is not recommended because of the difficulty in using them. For example, many people may not know how to use modifier keys. It may be better to use checkboxes where users are allowed to make multiple selections.

2. <datalist>…</datalist>

Like the <select> element, the <datalist> element creates a drop-down list, but it works in a different way. It works in combination with the text-type <input> and <option> elements, so that what is typed inside the text field determines the options displayed on the drop-down list. The element takes no special attributes; it takes only global ones, such as id. Figure 5.45 shows how it is used, and Figure 5.46 depicts the result.

In the example, when the user clicks, double clicks, or starts typing in the text-input field, the drop-down list is displayed, from which the user can choose one. If it is a long list and the desired item is not visible, then, as the user starts typing the desired word, the items are narrowed down to those that match the most to what is currently typed. However, for the element to work properly in this way, the value of the list attribute on the <input> element must match the value of the id attribute on the <datalist> element, which is “browsers” in this case.

Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.

Leave a Reply

Your email address will not be published. Required fields are marked *