<option>: Elemento OPTION
Última atualização: 2026-10-13
<option>Elemento OPTION
Um único item selecionável dentro de select, datalist ou optgroup.
| 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 </option> tag |
| Status | Padrão |
📝 Sintaxe
<option value="apple">Maçã</option>
⚙️ Atributos
Este elemento suporta os atributos globais mais os seguintes:
| Atributo | Valor | Descrição |
|---|---|---|
value | Value sent to the server (falls back to text if omitted). | |
selected | Pre-select this option. | |
disabled | Disables this option. | |
label | Alternative display text. |
▶ Exemplo
Edite o código abaixo e veja o resultado em tempo real no playground:
🌐 Suporte de Navegadores
| Navegador | |||||
|---|---|---|---|---|---|
| <option> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os navegadores principais | |||||
Dica: Sem value, o texto entre as tags é enviado.
❓ Perguntas Frequentes
QQual é a relação entre o value de option e o texto exibido?
ACom value definido, o que se envia é o value; o texto entre as tags serve só para exibição. Sem value, envia-se o próprio texto entre as tags. Boa prática: sempre escreva value (como
<option value='sp'>São Paulo</option>), evitando que o backend dependa de um texto de exibição mutável.Qoption pode ficar disabled?
ASim,
<option disabled> torna a opção inacessível (exibida acinzentada). Usos comuns: linha de instrução «Selecione», opções fora de catálogo. Um optgroup inteiro também pode ser desativado.Qoption aceita HTML dentro?
APraticamente não: a option nativa renderiza apenas texto puro (alguns navegadores toleram marcação mínima, mas não é confiável). Dropdowns ricos (ícones, duas linhas) exigem componentes personalizados ou bibliotecas — mantendo os atributos de acessibilidade.
🏷️ Tags Relacionadas
💡 Casos Relacionados
Mais estudos de caso em breve — volte mais tarde.