An HTML list box is a GUI component on a website that allows users to select options. It is defined using the select and option tags and can be customized with CSS. It can also contain optgroup tags and requires supporting code to react to user selections.
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 on the page that contains a vertical set of text options that can be selected by the user. The purpose of using an HTML list box is to present a user with a set of options from which they can select and then react to the selection. There are many options available for customizing 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 much the same way.
In a document, an HTML list box is defined using the select tag. This tag starts the list box and can be used to define various options. One of the most important properties of the select tag is the list box name, which gives other parts of the HTML document the ability to directly access the list box values. Another important option that can be set is the multiple property, which can allow a user to select multiple items from the list at once rather than just one at a time.
Between the opening and closing select tags, the actual items to contain in an HTML list box are defined using the option tag. The option tag encloses the actual text that will appear 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 define a return value for a selected option that is sent to a query script instead of the text 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 optgroup. An optgroup is a header used to visually separate the different options within a list box. When a user looks at a list box that contains optgroup tags, they will see a bold header in the box, under which the associated options will be slightly indented and not bold.
While a functional HTML list box can be created and placed on a website, it won’t actually do anything when a user selects an option unless the supporting code is present to do so. This can be done with JavaScript® by accessing the list box via 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, which can be captured within the browser.
Protect your devices with Threat Protection by NordVPN
