Seleção múltipla e listas

5.1 Elemento <select>

Os elementos <select>, <option> e <optgroup> são usados para criar listas suspensas e listas com seleção múltipla em formulários HTML. Com esses elementos, os usuários podem escolher uma ou mais opções de um conjunto previamente definido de valores.

O elemento <select> é usado para criar uma lista suspensa. Ele contém um ou mais elementos <option>, que representam as possíveis opções para seleção.

Exemplo de uso:

    
      <label for="country">Escolha um país:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Atributos principais do <select>

Atributo name: define o nome do elemento do formulário que será enviado ao servidor junto com o valor selecionado.

    
      <select name="country"></select>
    
  

Atributo id: define um identificador único para o elemento, usado para ligar com o elemento <label>.

    
      <select id="country" name="country"></select>
    
  

Atributo multiple: permite ao usuário selecionar várias opções ao mesmo tempo. Visualmente, a lista será exibida como uma lista multi-linhas.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Atributo size: define o número de linhas visíveis na lista suspensa. Isso é útil para criar listas com rolagem.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Elemento <option>

O elemento <option> é usado dentro do <select> para definir cada opção que o usuário pode escolher.

Exemplo de uso:

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

Atributos principais do <option>:

Atributo value: define o valor que será enviado ao servidor se esta opção for selecionada.

    
      <option value="red">Red</option>
    
  

Atributo selected: determina se essa opção deve ser selecionada por padrão.

    
      <option value="green" selected>Green</option>
    
  

Atributo disabled: torna essa opção indisponível para seleção.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 Elemento <optgroup>

O elemento <optgroup> é usado para agrupar opções relacionadas dentro de um elemento <select>. Ele permite dividir logicamente as opções em categorias, tornando a lista suspensa mais organizada e compreensível.

Exemplo de uso:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Atributos principais do <optgroup>:

Atributo label: define o título do grupo de opções.

    
      <optgroup label="German Cars"></optgroup>
    
  

Atributo disabled: torna todas as opções dentro deste grupo indisponíveis para seleção.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Dicas úteis para usar <select>, <option> e <optgroup>

1. Agrupamento lógico: use <optgroup> para agrupar logicamente opções relacionadas: isso tornará o formulário mais amigável para os usuários.
2. Seleção múltipla: se precisar permitir que o usuário selecione várias opções, use o atributo multiple no <select>.
3. Acessibilidade: use os atributos id e label para melhorar a acessibilidade dos elementos do formulário. O uso correto de label melhora a interação com o formulário para todos os usuários, incluindo aqueles que utilizam tecnologias assistivas.
4. Estilização: use CSS para melhorar a aparência das listas suspensas e listas com seleção múltipla. Por exemplo:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }