Tag HTML <option>
A tag <option> identifica itens em uma lista suspensa. Descrição da tag, atributos e exemplos de uso.
A tag <option> define um item individual dentro de uma lista suspensa criada com a tag <select>, ou uma sugestão de autocompletar dentro de um <datalist>. Ela pode aparecer como filho de <select>, <datalist>, ou de um <optgroup>, que agrupa opções relacionadas.
Cada <option> possui dois dados distintos: o texto que o usuário vê e o valor que é enviado. Compreender a diferença entre eles é fundamental para usar essa tag corretamente, e isso é abordado em detalhes abaixo.
Sintaxe
A tag <option> pode ser escrita como um par ou como uma tag autofechante. Quando usada como par, o texto de exibição é escrito entre as tags de abertura (<option>) e fechamento (</option>).
A tag <option> é geralmente usada com o atributo value para especificar qual valor deve ser enviado ao servidor para processamento posterior.
Exemplo da tag HTML <option>:
Uma lista suspensa com a tag HTML <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>O <select> está envolvido por um <form> aqui porque o dropdown deve ser enviado a um servidor. Um <select> funciona perfeitamente sem um formulário para scripts puramente do lado do cliente, mas é necessário um formulário (ou JavaScript) para enviar o valor selecionado a algum destino.
O atributo value e seu detalhe importante
O atributo value contém os dados que são enviados quando a opção é selecionada. O texto entre as tags é apenas o que o usuário vê — ele não precisa corresponder ao valor.
Se você omitir value, o navegador enviará o conteúdo de texto da opção. Estas duas opções se comportam de forma idêntica ao serem enviadas:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>Isso é conveniente, mas também é uma fonte comum de erros: se você alterar posteriormente o texto visível (para tradução, capitalização ou redação) de uma opção que não possui value, os dados que seu servidor recebe também mudam. Para envios previsíveis e estáveis, sempre defina um value explícito.
Exemplo da tag HTML <option> com a tag <datalist>.
Lista de aeroportos de partida com a tag option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>Neste exemplo, as tags <option> são colocadas dentro da tag <datalist> sem o atributo value, pois o conteúdo de texto serve como sugestão de autocompletar.
Atributos
| Atributo | Valor | Descrição |
|---|---|---|
| disabled | disabled | Indica que a seleção do elemento está desativada. |
| label | text | Define um nome para um item da lista. |
| selected | selected | Define que a opção deve ser selecionada por padrão quando a página é carregada. |
| value | text | Define o valor que é enviado ao servidor. |
A tag <option> suporta os Atributos Globais e os Atributos de Evento.
Os atributos selected e disabled
selected marca a opção que é pré-selecionada quando a página carrega. disabled torna uma opção visível, mas não selecionável (ela aparece em cinza). Neste exemplo, Blue está selecionado por padrão e Green não pode ser escolhido:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Uma opção de espaço reservado
Um <select> sempre exibe sua primeira opção por padrão, portanto não há um "espaço reservado" integrado como existe em um campo de texto. O padrão comum é adicionar uma primeira opção que seja vazia, disabled e selected. Ela instrui o usuário a fazer uma escolha, não pode ser enviada como um valor real e não pode ser resselecionada depois que o usuário escolhe outra coisa:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>O atributo required pertence ao elemento <select>, não ao <option>. Como o espaço reservado acima tem um value vazio, o formulário não pode ser enviado até que o usuário escolha uma opção real.
Desativando um grupo inteiro
O atributo disabled também funciona em um <optgroup>, que desativa todas as opções dentro dele de uma só vez — útil para mostrar categorias temporariamente indisponíveis:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>O atributo label
O atributo label fornece uma legenda alternativa para a opção. Quando label é definido, os navegadores o exibem em vez do conteúdo de texto. Se você omitir label, o texto entre as tags é usado como legenda — razão pela qual ele geralmente é omitido e o texto visível é escrito diretamente.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>Na prática, raramente você precisa de label em um <option> simples; ele é mais significativo em um <optgroup>, onde label nomeia o cabeçalho do grupo.