Agrupamento de Opções HTML: Melhore a Funcionalidade de Listas Suspensa

Introdução

A tag <optgroup> em HTML é usada para criar um agrupamento de opções dentro de uma lista suspensa (dropdown). Este laboratório irá guiá-lo pelos passos para criar um optgroup e personalizá-lo usando atributos.

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.

Configurar o Arquivo HTML

Crie um novo arquivo chamado index.html. Adicione a estrutura HTML básica e inclua uma tag <select> dentro do elemento body.

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup Tag Lab</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

Adicionar Opções à Lista Suspensa

Adicione tags <option> dentro da tag <select> para criar sua lista de opções. Use o atributo value para definir o valor para cada opção.

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Criar um Optgroup

Use a tag <optgroup> para agrupar certas opções. Adicione o atributo label para definir o nome do grupo.

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Desativar um Optgroup

Use o atributo disabled para desabilitar um grupo inteiro de opções dentro da lista suspensa (dropdown). Adicione este atributo à tag <optgroup> de abertura.

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

Resumo

A tag <optgroup> é usada para criar um agrupamento de opções dentro de uma lista suspensa (dropdown). Você pode personalizá-la usando atributos como disabled e label. Seguindo os passos deste laboratório, você pode efetivamente agrupar e organizar suas opções em HTML.