O que é uma caixa de listagem HTML?

Na HyperText Markup Language (HTML), uma caixa de listagem é um tipo de componente da interface gráfica do usuário (GUI) interativa. Ele aparece em um site como uma caixa dentro da página que contém um conjunto vertical de opções de texto que podem ser selecionadas pelo usuário. O objetivo de usar uma caixa de listagem HTML é apresentar a um usuário várias opções dentre as quais ele pode selecionar e, em seguida, reagir à seleção. Existem muitas opções disponíveis para personalizar uma caixa de listagem, especialmente através do uso de folhas de estilo em cascata (CSS). Há uma diferença visual e funcional entre uma caixa de listagem HTML e outro elemento da GUI conhecido como caixa de combinação, mesmo que eles sejam definidos da mesma maneira.

Em um documento, uma caixa de listagem HTML é definida usando a tag select. Essa tag inicia a caixa de listagem e pode ser usada para definir várias opções. Uma das propriedades mais importantes da tag select é o nome da caixa de listagem, que permite que outras partes do documento HTML possam acessar diretamente os valores da caixa de listagem. Outra opção importante que pode ser definida é a propriedade multiple, que permite ao usuário selecionar vários itens da lista simultaneamente, em vez de apenas um de cada vez.

Entre as tags de seleção de abertura e fechamento, os elementos reais a serem contidos em uma caixa de listagem HTML são definidos usando a tag de opção. A tag de opção inclui o texto real que será exibido na caixa de listagem HTML. Como a tag select, ela também possui algumas propriedades importantes. Uma propriedade valiosa da tag option é a capacidade de definir um valor de retorno para uma opção selecionada que é enviada para um script de consulta em vez do texto que o usuário vê. Isso significa que um usuário pode ver a palavra "vermelho", mas a caixa de listagem HTML pode retornar o valor hexadecimal de vermelho em vez da palavra real.

Além das opções, uma caixa de listagem HTML pode conter outro elemento visual conhecido como grupo de opções. Um grupo de opções é um cabeçalho usado para separar visualmente as diferentes opções dentro de uma caixa de listagem. Quando um usuário olha para uma caixa de listagem que contém tags de grupo de opções, ele ou ela verá um cabeçalho em negrito na caixa, abaixo do qual as opções associadas serão levemente recuadas e não em negrito.

Mesmo que uma caixa de listagem HTML funcional possa ser criada e colocada em um site, ela não fará nada quando um usuário selecionar uma opção, a menos que haja um código de suporte para isso. Isso pode ser feito com JavaScript®, acessando a caixa de listagem através do modelo de objeto de documento (DOM), ou pode ser executado com outros scripts ou applets. Como um elemento interativo, uma caixa de listagem gera eventos do usuário, como mouseover, que podem ser capturados no navegador.