What Is an HTML Listbox?

In the HyperText Markup Language (HTML), a listbox 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 can be selected by the user. The purpose of using an HTML listbox is to present a user with a number of options from which they can select, and then to react to the selection. There are many options available to customize a listbox, especially through the use of cascading style sheets (CSS). There is a visual and functional difference between an HTML listbox and another GUI element known as a combobox, even though they are defined in much the same way.

In a document, an HTML listbox is defined using the select tag. This tag starts the listbox and can be used to define several options. One of the most important properties of the select tag is the name of the listbox, which gives other parts of the HTML document the ability to directly access the values of the listbox. Another important option that can be set is the multiple property, which can allow a user to select multiple items from the list simultaneously instead of just one at a time.

Between the opening and closing select tags, the actual elements to be contained in an HTML listbox are defined using the option tag. The option tag encloses the actual text that will be displayed in the HTML listbox. Like the select tag, it also has some important properties. A valuable property of the option tag is the ability to define a return value for a selected option that is sent to a querying script instead of the text that the user sees. This means a user can see the word "red", but the HTML listbox can return the hexadecimal value of red instead of the actual word.

Aside from options, an HTML listbox can contain another visual element known as an optgroup. An optgroup is a heading that is used to visually separate the different options inside a listbox. When a user looks at a listbox that contains optgroup tags, he or she will see a bold heading in the box, under which the associated options will be slightly indented and not bold.

Even though a functional HTML listbox can be made and placed on a website, it will not actually do anything when a user selects an option unless supporting code is present to do so. This can be done with JavaScript® by accessing the listbox through the document object model (DOM), or it can be performed with other scripts or applets. As an interactive element, a listbox generates user events such as mouseover, which can be captured within the browser.