<select>: Elemento SELECT

Última atualização: 2026-10-13

<select>Elemento SELECT

Um controle suspenso que permite ao usuário escolher um ou mais valores de uma lista predefinida, geralmente enviado com um formulário.

CategoriaFormulários
Modelo de ConteúdoConteúdo de fluxo
Pais PermitidosQualquer elemento que aceite conteúdo de fluxo
Tag de FechamentoSim — requer fechamento </select> tag
StatusPadrão

📝 Sintaxe

<select name="fruit">
  <option value="apple">Maçã</option>
  <option value="banana">Banana</option>
</select>

⚙️ Atributos

Este elemento suporta os atributos globais mais os seguintes:

AtributoValorDescrição
nameField name sent to the server.
multipleAllow selecting multiple options.
requiredA value must be selected before submit.
disabledDisables the whole control.
sizeNumber of visible rows (a list box when > 1).
autofocusAutomatically focused on page load.
formThe id of the associated form (can live outside it).

▶ Exemplo

Edite o código abaixo e veja o resultado em tempo real no playground:

🌐 Suporte de Navegadores

Navegador ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
<select> ✓ v1 ✓ v12 ✓ v1 ✓ v1 ✓ v1
Suportado em todos os navegadores principais
Dica: Use multiple para seleção múltipla; para digitação livre combine input + datalist.

❓ Perguntas Frequentes

QComo definir a opção padrão selecionada de select?
AAdicione o atributo selected à <option> correspondente: <option selected>Opção padrão</option>. Sem ele, a primeira option fica selecionada. Também dá para mudar a seleção via JS definindo select.value.
Qselect permite seleção múltipla?
ASim, com o atributo multiple: no desktop, Ctrl/Cmd para múltiplas escolhas; no mobile a experiência é fraca. O name de um select múltiplo deve vir em forma de array (como name='tags[]') para o backend receber vários valores. Com muitas opções, prefira um grupo de checkboxes.
QE quando o select tem opções demais?
AUse <optgroup> para agrupar com subtítulos; ou troque por <input list> + <datalist>, que oferece sugestões pesquisáveis. O select nativo não busca; acima de algumas dezenas de opções, avalie componentes de terceiros ou a solução com datalist.
Mais estudos de caso em breve — volte mais tarde.

📚 Tutoriais Relacionados

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%