Etiqueta HTML <select>

Definição e uso

<select> O elemento é usado para criar listas suspensas.

<select> O elemento é usado mais frequentemente em formulários para coletar entradas do usuário.

Após submeter o formulário, é necessário usar a propriedade name para referenciar os dados do formulário (se a propriedade name for omitida, os dados da lista suspensa não serão submetidos).

<select> Dentro do elemento Etiqueta <option> Define as opções disponíveis na lista suspensa.

É necessário usar a propriedade id para associar a lista suspensa à etiqueta (label).

Dica:Sempre adicione <label> etiqueta para obter as melhores práticas de acessibilidade!

Veja também:

Manual de referência do DOM HTML:Objeto Select

Tutorial de CSS:Defina o estilo do formulário

Exemplo

Exemplo 1

Crie uma lista suspensa com quatro opções:

<label for="cars">Selecione uma marca de automóvel:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Experimente você mesmo

Exemplo 2

Exemplo 2 <select> Usado juntamente com a etiqueta <optgroup>:

<label for="cars">Selecione uma marca de automóvel:</label>
<select name="cars" id="cars">
  <optgroup label="Carros chineses">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Carros alemães">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Experimente você mesmo

Atributo

Atributo Valor Descrição
autofocus autofocus As regras determinam que a lista suspensa deve obter o foco automaticamente ao carregar a página.
disabled disabled As regras determinam que a lista suspensa deve estar desativada.
form ID do formulário Define o formulário ao qual pertence a lista suspensa.
multiple multiple As regras permitem a seleção de várias opções em uma vez.
name Nome Define o nome da lista suspensa.
required required Especifica que o usuário deve selecionar um valor antes de enviar o formulário.
size Número Define o número de opções visíveis na lista suspensa.

Atributos globais

<select> A etiqueta também suporta Atributos globais no HTML.

Atributos de evento

<select> A etiqueta também suporta Atributos de evento no HTML.

Configurações CSS padrão

Nenhum.

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte