A classe select

Usando a classe select, podemos inserir em nosso formulário eletrônico, controles como listas e caixas combinadas.

O controle lista, possibilita a apresentação dos seus itens em grupos e com quantidades preestabelecidas. Por apresentar esta característica de visualização, é ideal para permitirmos ao usuário caso seja necessário, a seleção de um ou mais itens, entre os disponíveis neste controle.

O controle caixa combinada possibilita inicialmente a visualização apenas do item que foi previamente selecionado. Para ter acesso aos demais itens é necessário abrir a caixa combinada para a seleção do item desejado.

Dica (1): Durante a navegação, o atalho de teclado utilizado para abrir uma caixa combinada disponível em um formulário eletrônico, é (alt + "seta para baixo"). Após a seleção com as setas do item desejado, o fechamento da caixa combinada se dá automaticamente com a perda do foco do cursor, ou com o pressionamento da tecla (enter) sobre a mesma.

Diferentemente da caixa de opção "radio" da classe input, utilizaremos os controles da classe select, para situações que exijam um número maior de opções, ou quando houver a necessidade do usuário realizar uma múltipla seleção entre os itens disponibilizados em uma lista.

É importante destacar que as listas de definição, desordenadas, ordenadas e as intercaladas, apresentadas anteriormente para o posicionamento de informações em páginas HTML, não possuem nenhuma relação com as listas da classe select, geradas como controles de formulários eletrônicos.

A diferença básica entre a sintaxe utilizada para a criação de uma lista ou de uma caixa combinada, está relacionada com a definição da quantidade de itens que serão exibidos simultaneamente e com a capacidade de permitir ou não, a múltipla seleção dos itens inseridos em cada um destes controles.

Sintaxe utilizada na criação de listas e caixas combinadas:

<select name="nome_controle" size="n_itens"> - Parte referente à abertura da tag select.
<option value="valor_item1" selected> Descrição da primeira opção
<option value="valor_item2"> Descrição da segunda opção
<option value="valor_item3"> Descrição da terceira opção
<option value="valor_item4"> Descrição da quarta opção
<option value="etc."> etc.
</select> - Parte referente ao fechamento da tag select.

A tag select delimita a abertura e o fechamento de uma lista ou caixa combinada. Dentro da tag select, inserimos a tag option para cada novo item adicionado ao controle.