Lista Suspensa HTML

Introdução

O elemento HTML Select é usado para criar uma lista suspensa que permite aos usuários escolher uma ou mais opções de uma lista fornecida. Neste laboratório, você aprenderá como usar a tag HTML Select para criar uma lista de itens para o usuário selecionar.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando um Elemento Select

Para criar um elemento select, usamos a tag HTML Select com as tags de abertura e fechamento. Aqui está um exemplo de como criar um elemento select simples.

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

O código acima cria um elemento select simples com quatro opções: Volvo, Saab, Opel e Audi.

Adicionando Atributos ao Elemento Select

Podemos adicionar atributos ao elemento Select para torná-lo mais interativo para os usuários. Aqui estão alguns dos atributos importantes do Elemento HTML Select.

A: Atributo Size

O atributo size especifica quantas opções devem ser visíveis de cada vez. Aqui está um exemplo:

<select size="3">
  <!-- three options visible by default -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: Atributo Name

O atributo Name atribui um nome ao elemento select. Aqui está um exemplo:

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: Atributo Multiple

O atributo multiple permite que os usuários selecionem mais de uma opção ao mesmo tempo. Aqui está um exemplo:

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Definindo Opções

Você pode adicionar qualquer número de opções a um elemento select usando a tag option. Aqui está um exemplo:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Como você pode ver, definimos quatro opções e cada opção tem um atributo value. O atributo value pode ser usado para associar cada opção a um valor único.

Usando Opções Agrupadas

Você pode agrupar opções sob uma tag <optgroup>. Isso torna seu elemento select mais organizado e legível. Veja como você pode usar opções agrupadas:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Criando Valores Padrão

Você pode especificar um valor padrão que será exibido quando a página for carregada. Veja como você define um valor padrão:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Neste exemplo, a opção "Opel" será selecionada por padrão.

Resumo

Neste laboratório, você aprendeu como criar uma lista suspensa usando a tag HTML Select, diferentes atributos que podem ser usados com a tag Select, como definir as opções, usar opções agrupadas e criar valores padrão. Com essas habilidades, você deve ser capaz de criar elementos select mais avançados que podem ajudar os usuários a interagir com seus sites facilmente.