HTML <selecionar> Tag
Exemplo
Crie uma lista suspensa com quatro opções:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O <select>elemento é usado para criar uma lista suspensa.
O <select>elemento é mais frequentemente usado em um formulário, para coletar a entrada do usuário.
O nameatributo é necessário para referenciar os dados do formulário após o envio do formulário (se você omitir o
nameatributo, nenhum dado da lista suspensa será enviado).
O idatributo é necessário para associar a lista suspensa a um rótulo.
As tags <option><select> dentro do elemento definem as opções disponíveis na lista suspensa.
Dica: Sempre adicione a tag <label> para melhores práticas de acessibilidade!
Suporte ao navegador
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Atributos
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
Atributos Globais
A <select>tag também suporta os Atributos Globais em HTML .
Atributos do evento
A <select>tag também suporta os atributos de evento em HTML .
Mais exemplos
Exemplo
Use <select> com tags <optgroup>:
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Páginas relacionadas
Referência HTML DOM: Selecionar objeto
Tutorial CSS: Estilizando Formulários
Configurações padrão de CSS
Nenhum.