Tag HTML <select>
A tag HTML <select> cria uma lista suspensa de opções. Aprenda seus atributos, acessibilidade, multiple, size, required e placeholder.
A tag HTML <select> cria uma lista suspensa de opções. O utilizador clica no controlo, a lista expande e ele seleciona um valor (ou vários, com o atributo multiple). É um dos controlos de formulário fundamentais, utilizado desde seletores de países até menus de ordenação.
Esta página aborda a sintaxe, todos os atributos, acessibilidade (rotulagem), os comportamentos de multiple / size / required, o padrão de placeholder desativado e como <select> difere de um input associado a <datalist>.
A tag <option> define cada opção e reside dentro do <select>. Por padrão, a primeira opção é pré-selecionada; adicione o atributo selected a uma opção para alterar qual é pré-selecionada. Use <optgroup> para agrupar opções relacionadas sob um cabeçalho em negrito não selecionável.
Para enviar o valor escolhido, dê ao <select> um name e coloque-o dentro de um <form> (ou associe-o a um usando o atributo form). O valor enviado ao servidor é o value da opção selecionada.
Se precisar enviar os dados ao servidor ou ler a lista a partir de um script, o <select> deve ter um name e estar associado a um <form>.
Sempre rotule o seu <select>
Um <select> por si só não fornece ao utilizador nenhum texto que descreva o que está a escolher, e os leitores de ecrã não anunciam nada significativo. Associe sempre a um <label>: defina um id no <select> e aponte o atributo for do label para esse id. Isso também permite que o utilizador clique no texto do label para focar o controlo.
Exemplo de um <select> rotulado
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>Quando um label visível não for possível, use aria-label="..." no <select> para que a tecnologia assistiva ainda anuncie o seu propósito.
Sintaxe
A tag <select> vem em pares. O conteúdo é escrito entre as tags de abertura (<select>) e de fechamento (</select>).
Exemplo da tag HTML <select>:
Exemplo da tag HTML <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Exemplo da tag HTML <select> com a tag <optgroup>:
Exemplo da tag HTML <select> com a tag <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>Neste exemplo, a tag <optgroup> é usada para reunir as opções em grupos.
Selecionar múltiplas opções
Adicione o atributo boolean multiple para permitir que o utilizador escolha mais de uma opção. O controlo é então renderizado como uma caixa de lista com barra de rolagem em vez de uma lista suspensa. Combine-o com size para definir quantas linhas são visíveis. Para selecionar vários valores, o utilizador mantém pressionado Ctrl (Cmd no Mac) ao clicar, ou mantém pressionado Shift para selecionar um intervalo.
Exemplo de multiple e size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>Quando um <select> com multiple é submetido, cada valor selecionado é enviado com o mesmo name (por exemplo, langs=html&langs=js).
Adicionar um placeholder
Um <select> sempre tem um valor, portanto não existe placeholder nativo. O contorno comum é uma primeira opção que é vazia, pré-selecionada, desativada e oculta — ela exibe um aviso, não pode ser re-selecionada e permanece oculta quando a lista é aberta. Combine-a com required para que uma escolha real deva ser feita antes de o formulário ser enviado.
Exemplo de uma opção placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Como o value do placeholder é vazio, o atributo required trata isso como "nenhuma seleção feita": submeter sem escolher uma opção real aciona a mensagem de validação do navegador.
<select> vs. <datalist>
Um <select> obriga o utilizador a escolher a partir de uma lista fixa. Se em vez disso quiser um campo de texto livre que sugira valores que o utilizador pode aceitar ou ignorar, isso é trabalho para um <datalist> associado a um <input> de texto através do atributo list — não é uma funcionalidade do <select>. É um elemento separado com comportamento diferente; use-o quando digitação com autocomplete se adequa melhor do que uma lista suspensa estrita.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| autofocus | autofocus | Define que a lista deve receber foco após o carregamento da página. |
| disabled | disabled | Indica que a lista está desativada e o utilizador não pode interagir com ela. |
| form | form_id | Associa o <select> a um <form> pelo id desse formulário, para que o controlo possa estar fora do elemento <form> na marcação e ainda ser submetido com ele. |
| multiple | multiple | Indica que mais de uma opção pode ser escolhida. O método de escolher mais de uma opção depende do sistema operativo. No Windows, é necessário manter a tecla CTRL pressionada; no Mac, a tecla CMD. |
| name | name | Define um nome para o menu suspenso. Pode ser usado para aceder aos dados do formulário após o envio ou para associar a um elemento JavaScript. |
| required | required | Indica que a escolha de uma opção é obrigatória. |
| size | number | Indica o número de opções visíveis na lista suspensa. Se o valor do atributo "size" for maior que 1 e menor que o número total de opções na lista, o navegador adicionará automaticamente uma barra de rolagem para indicar que há mais opções a visualizar. |
A tag <select> suporta Atributos Globais e os Atributos de Evento.
Como estilizar uma tag HTML <select>
O elemento <select> é renderizado parcialmente pelo sistema operativo, por isso resiste à estilização completa com CSS e os resultados variam entre navegadores. É possível definir de forma fiável a fonte, cores, padding e modelo de caixa no próprio controlo. Para substituir a seta nativa da lista suspensa pela sua, redefina o aspeto do sistema com appearance: none e adicione uma seta personalizada (por exemplo, um background-image ou um wrapper com um pseudo-elemento). A lista de opções expandida e a estilização por opção permanecem apenas parcialmente controláveis; para listas suspensas totalmente personalizadas e com pixel-perfect, os desenvolvedores geralmente constroem um widget com elementos que não são <select> e JavaScript.