Co to jest pole listy HTML?

W HyperText Markup Language (HTML) pole listy jest rodzajem składnika interaktywnego graficznego interfejsu użytkownika (GUI). Pojawia się na stronie internetowej jako pole na stronie zawierające pionowy zestaw opcji tekstowych, które może wybrać użytkownik. Celem korzystania z listy HTML jest przedstawienie użytkownikowi szeregu opcji, z których może wybrać, a następnie zareagowanie na wybór. Dostępnych jest wiele opcji dostosowywania pola listy, zwłaszcza poprzez użycie kaskadowych arkuszy stylów (CSS). Istnieje wizualna i funkcjonalna różnica między listboxem HTML a innym elementem GUI znanym jako combobox, mimo że są one zdefiniowane w bardzo podobny sposób.

W dokumencie pole listy HTML jest definiowane za pomocą znacznika select. Ten znacznik otwiera pole listy i może być użyty do zdefiniowania kilku opcji. Jedną z najważniejszych właściwości znacznika select jest nazwa pola listy, która daje innym częściom dokumentu HTML możliwość bezpośredniego dostępu do wartości pola listy. Inną ważną opcją, którą można ustawić, jest właściwość wielu, która umożliwia użytkownikowi jednoczesne wybieranie wielu elementów z listy zamiast jednego na raz.

Pomiędzy otwierającym i zamykającym znacznikiem select, rzeczywiste elementy, które mają być zawarte w polu listy HTML, są definiowane za pomocą znacznika opcji. Znacznik opcji zawiera rzeczywisty tekst, który będzie wyświetlany w polu listy HTML. Podobnie jak znacznik select, ma również kilka ważnych właściwości. Cenną właściwością znacznika opcji jest możliwość zdefiniowania wartości zwracanej dla wybranej opcji, która jest wysyłana do skryptu zapytania zamiast tekstu, który widzi użytkownik. Oznacza to, że użytkownik może zobaczyć słowo „czerwony”, ale pole listy HTML może zwrócić wartość szesnastkową czerwonego zamiast rzeczywistego słowa.

Oprócz opcji, pole listy HTML może zawierać inny element wizualny znany jako optgroup. Optgroup to nagłówek używany do wizualnego oddzielenia różnych opcji w polu listy. Gdy użytkownik spojrzy na pole listy zawierające znaczniki optgroup, zobaczy w nim pogrubiony nagłówek, pod którym powiązane opcje będą lekko wcięte, a nie pogrubione.

Mimo że funkcjonalne pole listy HTML można utworzyć i umieścić na stronie internetowej, w rzeczywistości nic nie zrobi, gdy użytkownik wybierze opcję, chyba że istnieje kod pomocniczy, który to umożliwia. Można to zrobić za pomocą JavaScript®, uzyskując dostęp do pola listy przez model obiektu dokumentu (DOM) lub za pomocą innych skryptów lub apletów. Jako element interaktywny, pole listy generuje zdarzenia użytkownika, takie jak najechanie kursorem myszy, które można przechwycić w przeglądarce.