Programowanie webowe | 03. Przegląd znaczników HTML

Lista wyboru <select>

Mirosław Zelent

Do stworzenia listy wyboru używamy znacznika <select>. Tag łatwy do zapamiętania – słowo "select" oznacza przecież "wybór". Zaś poszczególne opcje, możliwe do wyboru na liście, to znaczniki <option>. Podobnie jak w omawianych w poprzednim wpisie polach radio, jakoś musimy rozróżnić później (na etapie przetwarzania formularza) poszczególne opcje, stąd możliwe jest ustawienie atrybutów value dla każdej z nich. Nie zapominajmy o także o etykiecie <label> dla całej listy:

 <label for="imie">Wybierz postać:</label>
 <select id="imie">
   <option value="m">Mario</option>
   <option value="l">Luigi</option>
   <option value="y">Yoshi</option>
 </select> 

Rezultat w przeglądarce:

Wybierz postać: Mario Luigi Yoshi

Podobnie jak pole typu checkbox można od razu zaznaczyć, tak na liście wyboru możemy od razu dokonać wyboru domyślnej opcji. Załóżmy, że chcemy, aby domyślnie wybrana była druga opcja na liście. Wówczas wystarczy do tegoż właśnie tagu option dopisać słowo selected – z ang. "wybrana". Oczywiście opcja ta jest wybrana tylko po wczytaniu strony - potem użytkownik może ten domyślny wybór zmienić:

 <label for="imie">Wybierz postać:</label>
 <select id="imie">
   <option value="m">Mario</option>
   <option value="l" selected>Luigi</option>
   <option value="y">Yoshi</option>
 </select> 

Rezultat w przeglądarce:

Wybierz postać: Mario Luigi Yoshi

Ponadto, możemy w HTML uzyskać listę wielokrotnego wyboru – w tym celu należy do znacznika dopisać atrybut multiple. Dlaczego takie słowo? Z ang. "multiple" oznacza właśnie "wielokrotny" [wybór]. Listę taką niejako pokazujemy w całości właśnie po to, żeby móc z użyciem klawiszy Ctrl albo Shift, zaznaczyć na niej kilka opcji jednocześnie.

 <label for="imie">Wybierz postać:</label>
 <select id="imie" multiple>
   <option value="m">Mario</option>
   <option value="l">Luigi</option>
   <option value="y">Yoshi</option>
 </select> 

Rezultat w przeglądarce:

Wybierz postać: Mario Luigi Yoshi

Taka lista wielokrotnego wyboru to element dużo rzadziej stosowany aniżeli jej klasyczny odpowiednik, niemniej jednak warto wiedzieć o jej istnieniu. I ostatnia sprawa przy liście wyboru - poszczególne opcje można dla wygody użytkownika zgrupować w sekcje, z użyciem znaczników <optgroup> (nazwa mówi sama za siebie):

 <label for="imie">Wybierz postać:</label>
 <select id="imie">
   <optgroup label="Hydraulicy">
     <option value="m">Mario</option>
     <option value="l">Luigi</option>
   </optgroup>
     <option value="y">Yoshi</option>
 </select> 

Rezultat w przeglądarce:

Wybierz postać: Mario Luigi Yoshi

Jak widać na powyższej liście etykieta zgrupowania opcji nie reaguje na kliknięcia (nie stanowi "wybieralnej" opcji).