Elemento HTML: selecione | Envato Tuts+

0
Tutoriais
27/10/2023
A+ A-
Email Print

O HTML select elemento é o menu suspenso clássico visto com mais frequência em formulários. Ele permite que os usuários selecionem algo em um conjunto de opções. Várias opções podem ser selecionadas, mas na maioria das vezes os usuários são obrigados a escolher uma opção por select campo.

Exemplos

Sintaxe

1
 
 name="name" required>

2
 
  value="1">John

3
 
  value="2">Jane

4
 
  value="3">Donald

5
 
  value="4">Chuck

6
 
  value="5">Leslie

7

Um elemento select com o multiple o atributo habilitado (true) permite múltiplas opções de envio com o envio de um formulário.

1
 
 multiple name="name" required>

2
 
  value="1">John

3
 
  value="2">Jane

4
 
  value="3">Donald

5
 
  value="4">Chuck

6
 
  value="5">Leslie

7

Resultado

Suporte ao navegador

O select O elemento é compatível com todos os navegadores modernos. Leia mais em caniuse.com.

Exibição de navegadores select elementos de forma diferente, dependendo do mecanismo de renderização. Dê uma olhada neste exemplo que mostra o mesmo select elemento no Google Chrome (desenvolvido por Blink), Firefox (desenvolvido por Quantum) e Safari (desenvolvido por WebKit).

selecione elementos renderizados por diferentes navegadoresselecione elementos renderizados por diferentes navegadoresselecione elementos renderizados por diferentes navegadores
Todos os navegadores aqui estão no MacOS

Atributos

A select elemento suporta atributos globais em HTML. Atributos globais são comuns a todos os elementos HTML e podem ser usados ​​em todos eles (embora possam não ter muito efeito em alguns deles).

Além dos atributos globais, o select elemento tem um grupo de outros atributos:

  • autocomplete: Clique para que um formulário seja preenchido automaticamente.
  • disabled: se o controle de formulário está desabilitado ou não.
  • form: Associa o select com um form elemento.
  • multiple: permitir ou não vários valores.
  • name: o nome do elemento a ser usado para envios de formulários ou por meio da API form.elements.
  • required: Quer o select é necessário para o envio do formulário.
  • size: Tamanho do select.

Contente

O select O elemento suporta zero ou mais opções, optgroup e elementos de suporte a script.


Se a seleção de um valor for opcional, talvez você queira incluir um campo vazio no topo do seu 
2
  value="1">John

3
  value="2">Jane

4
  value="3">Donald

5
 


6
  value="4">Chuck

7
  value="5">Leslie

8
 


9
  value="6">Ahmed

10
  value="7">Coraline

11
visualização de um elemento select com elementos hrvisualização de um elemento select com elementos hrvisualização de um elemento select com elementos hr
Veja como fica 👆

Aqui está uma demonstração ao vivo, mas se você não conseguir ver o

elementos em seu navegador, experimente o Safari Technology Preview.

  • O em outro lugar.
  • O