Definindo a qual formulário a lista suspensa pertence:

O elemento pode ser utilizado dentro de formulários para permitir a escolha entre os diferentes itens da lista. Quando o elemento é inserido dentro da área do formulário, ou seja, é declarado entre as tags de abertura e fechamento , não há a necessidade de vincular os elementos.

Entretanto, existem layouts em que o posicionamento do elemento é feito fora do elemento , embora faça parte dos dados que devem ser submetidos pelo formulário. Nesse cenário, é preciso estabelecer um vínculo entre o elemento e o . Isso é feito por meio de atributos adicionados nos dois elementos. Veja um exemplo prático abaixo de uso do HTML form select.

Perceba que o elemento não foi declarado dentro do formulário. Entretanto, eles estão conectados por meio dos atributos form e id. Portanto, ao acessar o formulário por meio do código JavaScript, o controle pode ser utilizado como parte da coleção de elementos do formulário, utilizando o atributo name para acessá-lo. Como mencionamos, essa é a importância de declarar o name para vincular os dados.

Selecione várias opções em uma lista suspensa: multiple

A lista suspensa também pode ser utilizada para selecionar vários elementos simultaneamente. Para isso, basta adicionar o atributo HTML

multiple na tag . A seleção dos itens pode ser feita de diferentes formas. No Windows, por exemplo, é preciso utilizar a tecla de controle (Ctrl) e clicar sobre os itens desejados.

Já para selecionar todos os elementos, basta segurar a tecla Shift ao clicar no primeiro elemento e clicar sobre o último da lista. Veja um código de exemplo com o atributo de seleção múltipla declarado.

Perceba que precisamos definir um código JavaScript para identificar os itens selecionados. Para isso, criamos uma função que é chamada ao clicar no botão “Exibir itens selecionados”, que insere as opções do

em um array e executa um filtro para identificar quais estão com a propriedade “selected” como verdadeira; utilizamos o map para recuperar o valor correspondente.

Seleção obrigatória: required 

A seleção de um item em um elemento não é obrigatória por padrão. Isso significa que podemos utilizar o controle e não selecionar nenhum item, sem que isso interfira no funcionamento da página ou da aplicação. Entretanto, pode ser necessário forçar a pessoa usuária a executar uma determinada escolha.

Para isso, devemos utilizar o atributo required, que retorna um valor booleano: verdadeiro ou falso. É importante dizer que, para que esse recurso funcione da maneira adequada, é preciso que o elemento

esteja em um formulário. Dessa forma, não será possível submetê-lo sem que uma alternativa seja escolhida pela pessoa usuária da aplicação.

O primeiro item da lista suspensa deve ter o atributo value definido como vazio, ou seja, duas aspas “”. Entretanto, é possível ter um texto alternativo, como “Selecione o item desejado” ou deixar o espaço em branco. Além disso, é preciso que existam ao menos dois elementos na lista, o primeiro vazio e o segundo, ou demais itens, com as opções desejadas.

Escolha quantas opções são visíveis na lista suspensa: size

Outro atributo disponível é o size, que permite definir quantos elementos estarão visíveis no controle quando ele for carregado na página. Esse recurso é interessante quando queremos tornar as alternativas disponíveis na listagem mais visíveis. Para que ele funcione, basta adicionar o atributo size na tag e especificar a quantidade de linhas que será exibida.

Saiba como desativar uma lista suspensa: disabled

Imagine uma página com um formulário em que a pessoa usuária deva responder se tem conhecimento na língua inglesa e, em caso positivo, selecionar uma alternativa da lista suspensa que indique o seu nível atual.

Para que o resultado desse formulário traga apenas informações consistentes, é preciso que a opção de selecionar o nível de conhecimento só seja habilitada caso a resposta em relação ao conhecimento da linguagem seja verdadeira.

Portanto, essa é uma das utilidades do atributo disabled, pois ele permite que a lista suspensa permaneça na página, mas sem a opção de utilização pela pessoa usuária, de modo que ela seja habilitada programaticamente apenas quando atender a uma condição específica.

O atributo disabled também pode ser aplicado sobre os itens exibidos e ser habilitado por meio de JavaScript. Confira o exemplo abaixo, que também mostra como funciona o atributo required:

Qual a compatibilidade com os navegadores? 

Antes de utilizar elementos em uma aplicação, é preciso avaliar se eles funcionam de maneira adequada na maior parte dos navegadores. Deixar de fazer essa análise pode fazer com que a aplicação apresente erros durante a utilização pela pessoa usuária. Portanto, confira a compatibilidade do elemento

nos principais navegadores:

• Internet Explorer;
• Edge;
• Firefox;
• Chrome;
• Safari;
• Opera;
• iOS Safari;
• Opera Mini;
• Android Browser;
• Opera Mobile;
• Chrome for Android;
• Firefox for Android;
• Samsung Internet.

O elemento HTML oferece uma série de atributos que permitem tornar a aplicação web muito mais rica e interativa, pois ele contém recursos que facilitam a comunicação com a pessoa usuária e são simples de configurar, como a definição do tamanho de itens exibidos, a possibilidade de agrupamento e a seleção de múltiplos valores.

Gostou do nosso conteúdo sobre o que é o HTML

? Então, confira nosso post sobre o que é, as vantagens e como utilizar CSS!