Elementy formularza: lista wyboru select

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:

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:

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

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

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać: kontakt@pasja-informatyki.pl. Dziękujemy za poświęcony czas - to dzięki Wam serwis staje się coraz lepszy!

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

W dniach od 13.06.2024 do 17.06.2024 trwa w Videopoint.pl promocja urodzinowa - oprócz wielu zniżek mamy też możliwość odebrania darmowego kursu! Można odebrać jeden videokurs z trzech: 1. "Mały szachista"; 2. "Wejście w świat IT"; 3. "Angielski dla inżynierów i techników". Warto korzystać - Zobacz promocję na 9 urodziny Videopoint.pl

Bądź na bieżąco
Pasja informatyki