<select>

Sumário

O elemento HTML select (<select>) representa um controle que apresenta um menu de opções. As opções dentro do menu são representadas pelo elemento <option>, que podem ser agrupados por elementos <optgroup>. As opções podem ser pré-selecionadas para o usuário.

Contexto de uso

Atributos

Este elemento inclui os atributos globais.

autofocus HTML5

Este atributo permite especificar que um controle de formulário deve ter foco de entrada quando a página é carregada, a não ser que o usuário o substitua, por exemplo digitando em um controle diferente. Somente um elemento de formulário em um documento pode ter o atributo autofocus, que é booleano.

disabled

Este atributo booleano indica que o usuário não pode interagir com o controle. Caso esse atributo não seja especificado, o controle herda a configuração do elemento que o contém, por exemplo o elemento fieldset; se não há nenhum elemento que o contém com o atributo disabled, então o controle está habilitado.

form HTML5

O elemento form ao qual o elemento select é associado (algo como "formulário dono" do select). Se este atributo for especificado, seu valor deve ser o ID de um elemento form no mesmo documento. Isso permite que você coloque elementos select em qualquer lugar dentro do documento, e não apenas como descendentes de elementos form.

multiple

Este atributo booleano indica que várias opções podem ser selecionadas na lista. Se não for especificado, apenas uma opção poderá ser selecionada de cada vez.

name

O nome do controle

required HTML5

Um atributo booleano que indica que uma opção com um valor de string que não esteja vazia deve ser selecionada.

size

Se o controle é apresentado como uma list box com scroll, este atributo representa o número de linhas na list box que devem estar visíveis num determinado momento. Os navegadores não são obrigados a apresentar elementos select com uma list box scroll. O valor padrão é 0.

Interface DOM

Este elemento implementa a interface HTMLSelectElement.

Exemplos

<!-- O segundo valor estará selecionado inicialmente -->
<select name="select">
  <option value="valor1">Valor 1</option> 
  <option value="valor2" selected>Valor 2</option>
  <option value="valor3">Valor 3</option>
</select>

Resultado

Valor 1Valor 2Valor 3

Notas

O conteúdo deste elemento é estático e não editável.

A seguir um exemplo de como simular uma lista de seleção com opções editáveis, mas esteja ciente de que leitores de tela e dispositivos de acessibilidade não interpretarão o formulário corretamente; este exemplo seria HTML inválido se os elementos corretos fossem usados:

Este é um exemplo de um select editável usando um <fieldset> de botões de opção e caixas de texto (escrito somente com CSS, sem JavaScript), 

Especificações

Compatibilidade de navegadores

[1] No aplicativo Browser para Android 4.1 (e possivelmente versões posteriores), há um bug em que o triângulo indicador de menu ao lado de um <select> não será exibido se background, border ou border-radius forem aplicados ao <select>.

[2] Firefox para Android, por padrão, define uma background-image gradiente em todos os elementos <select multiple>. Isso pode ser desabilitado usando background-image: none.

Veja também

• Outros elementos relacionados a formulários: <form>, <legend>, <label>, <button>, <option>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress> e <meter>.