<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.
| Categoria | Formulários |
|---|---|
| Modelo de Conteúdo | Conteúdo de fluxo |
| Pais Permitidos | Qualquer elemento que aceite conteúdo de fluxo |
| Tag de Fechamento | Sim — requer fechamento </select> tag |
| Status | Padrã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:
| Atributo | Valor | Descrição |
|---|---|---|
name | Field name sent to the server. | |
multiple | Allow selecting multiple options. | |
required | A value must be selected before submit. | |
disabled | Disables the whole control. | |
size | Number of visible rows (a list box when > 1). | |
autofocus | Automatically focused on page load. | |
form | The 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 | |||||
|---|---|---|---|---|---|
| <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.🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.