Группировка вариантов в HTML: расширение функциональности выпадающего списка

Введение

Тег <optgroup> в HTML используется для создания группы вариантов в выпадающем списке. В этом практическом занятии вы пройдете по шагам создания optgroup и настройке его с использованием атрибутов.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_group("Grouping Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70808{{"Группировка вариантов в HTML"}} html/head_elems -.-> lab-70808{{"Группировка вариантов в HTML"}} html/forms -.-> lab-70808{{"Группировка вариантов в HTML"}} html/form_group -.-> lab-70808{{"Группировка вариантов в HTML"}} html/form_access -.-> lab-70808{{"Группировка вариантов в HTML"}} html/inter_elems -.-> lab-70808{{"Группировка вариантов в HTML"}} html/custom_attr -.-> lab-70808{{"Группировка вариантов в HTML"}} end

Настройка HTML-файла

Создайте новый файл с именем index.html. Добавьте базовую структуру HTML и включите тег <select> внутри элемента body.

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

Добавление вариантов в выпадающий список

Добавьте теги <option> внутри тега <select>, чтобы создать список вариантов. Используйте атрибут value, чтобы задать значение для каждого варианта.

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

Создание группы вариантов (optgroup)

Используйте тег <optgroup>, чтобы сгруппировать определенные варианты вместе. Добавьте атрибут label, чтобы определить имя группы.

<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>

Отключение группы вариантов (optgroup)

Используйте атрибут disabled, чтобы отключить целую группу вариантов в выпадающем списке. Добавьте этот атрибут к начальному тегу <optgroup>.

<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>

Резюме

Тег <optgroup> используется для создания группировки вариантов в выпадающем списке. Его можно настроить с использованием атрибутов, таких как disabled и label. Следуя шагам из этого практикум, вы можете эффективно группировать и организовать варианты в HTML.