In hypertext markup language (HTML), a list box is a type of interactive graphical user interface (GUI) component. It appears on a website as a box within the page that contains a vertical set of text options that the user can select. The purpose of using an HTML list box is to present the user with a series of options from which they can select and then react to the selection. There are many options available to customize a list box, especially through the use of Cascading Style Sheets (CSS). There is a visual and functional difference between an HTML list box and another GUI element known as a combo box, even though they are defined in the same way.
In a document, an HTML list box is defined by the select tag.
In a document, an HTML list box is defined by the select tag. This tag starts the list box and can be used to set various options. One of the most important properties of the select tag is the name of the list box, which gives other parts of the HTML document the ability to directly access the values of the list box. Another important option that can be configured is the multiple property, which allows the user to select multiple list items simultaneously, instead of just one at a time.
Between the opening and closing select tags, the actual items to be included in an HTML list box are defined by the option tag. The option tag contains the actual text to display in the HTML list box. Like the select tag, it also has some important properties. A valuable property of the option tag is the ability to set a return value for a selected option that is sent to a query script instead of the text that the user sees. This means that a user may see the word “red”, but the HTML list box may return the hexadecimal value of red instead of the actual word.
In addition to options, an HTML list box can contain another visual element known as an option group. An optgroup is a title used to visually separate the different options within a list box. When a user views a list box that contains optgroup tags, they will see a bold header in the box, below which the associated options will appear slightly indented rather than bold.
Although a functional HTML list box can be created and placed on a website, it will not do anything when a user selects an option unless there is supporting code to do so. This can be done with JavaScript® by accessing the list box through the Document Object Model (DOM), or it can be done with other scripts or applets. As an interactive element, a list box generates user events, such as mouseover, that can be captured in the browser.
