Lista wyboru <select>

Artykuł  | Mirosław Zelent

Do stworzenia listy wyboru użyjemy znacznika <select>. Nazwa łatwa do zapamiętania – słowo select oznacza oczywiście wybór. Zaś poszczególne opcje, możliwe do wyboru na liście, to znaczniki <option></option>. Ponownie – podobnie jak w 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żdego możliwego. Nie zapominajmy o także o etykiecie dla całej listy <select></select>:

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

Podobnie jak checkboxa 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 jest ona wybrana tylko po wczytaniu strony – potem użytkownik może ten domyślny wybór, rzecz jasna, 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:

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:

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

Pamiętajmy o atrybucie label (tym razem to atrybut, a nie znacznik!) dla takiej grupy, gdyż ta sama etykieta pojawia się później na liście (oczywiście jest ona “niewybieralna”, ale dobrze oddaje wybrane przez nas kryterium zgrupowania).

Komentarze

Czy macie jakieś uwagi, pytania, sugestie? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach. Dziękujemy Wam za poświęcony czas!