<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

Categorias de conteúdo conteúdo fluido, conteúdo fraseado, conteúdo interativo, listado, rotulável, resetável, e enviável associado a formulários
Conteúdo permitido Zero ou mais elementos <option> ou <optgroup>.
Omissão de tag Nenhuma, tanto tag de início quanto de fim são obrigatórias
Elementos pai permitidos qualquer elemento que aceite conteúdo fraseado

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.
Nota sobre o Firefox: De acordo com a especificação HTML5, o valor padrão para o size deveria ser 1; no entanto, na prática, notou-se que isso quebrava alguns sites, e nenhum outro navegador faz isso no momento, então a Mozilla escolheu por continuar devolvendo 0 por enquanto no Firefox.

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

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

Especificação Estado Comentários
HTML5
The definition of '<select>' in that specification.
Recommendation  
HTML 4.01 Specification
The definition of '<select>' in that specification.
Recommendation  
     

Compatibilidade de navegadores

Funcionalidade Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Atributo required (Yes) 4.0 (2.0) 10 (Yes) (Yes)
Funcionalidade Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suporte básico (Yes) [1] 1.0 (1.0) [2] (Yes) (Yes) (Yes)
Atributo required (Yes) 4.0 (2.0) Não suportado (Yes) (Yes)

 

[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

Etiquetas do documento e colaboradores

 Colaboradores desta página: srsaude, danilovaz
 Última atualização por: srsaude,