HTML Select - Padajuća lista
Padajuća lista je poseban oblik ulaznog polja. Ovaj element predstavlja polje čija vrednost može biti samo jedna (ili eventualno više) od unapred ponuđenih vrednosti iz liste. Ako ste programirali za grafički korisnički interfejs ili dobro poznajete komponente prozora, treba da znate da padajuća lista nije combo box, što znači da se vrednosti mogu samo birati, a ne i unositi.
Da bismo uveli padajuću listu na našu stranicu, koristimo oznaku <select>. Naravno, ova oznaka definiše samo element padajuće liste. Unutar nje moramo definisati i same stavke koje se prikazuju, i to radimo pomoću oznake <option>.
Padajuća lista ima mnogo manji broj parametara od input elementa, ali ipak nam se može učiniti kompleksnijim poljem zbog potrebe da se definišu stavke u listi. Videćete da je, kada sve objasnimo, u stvari jako jednostavno. Da počnemo od osnova - isto kao i svako polje koje pripada formi, i select treba da ima name parametar, koji ga jedinstveno identifikuje kada forma prosleđuje podatke iz polja serveru.
<select name="polje">
...
</select>
Isto kao i za input polja, moguće je zabraniti korisničku interakciju sa padajućom listom korišćenjem parametra disabled, koji nema vrednost, već ga je dovoljno samo navesti. Ne zaboravite, zabranjena polja se neće prosleđivati serveru kada se forma aktivira. Parametar readonly ovde ne postoji.
<select name="polje" disabled>
...
</select>
Ako se naš select element nalazi negde na stranici, a da je to negde izvan forme, možemo koristiti parametar form kojim se definiše kojoj formi polje pripada. Kao vrednost se navodi jedinstvena identifikacija forme.
<form action="..." method="..." id="prva">...</form>
...
<select name="polje" form="prva">
...
</select>
Sada ćemo opisati nešto specifično za padajuću listu. Elemenat select takođe ima parametar size, ali njegova vrednost više nije veličina elementa već broj stavki u padajućoj listi koji se prikazuje. Vrednost ovog parametra mora biti celi broj, veći ili jednak nuli. Ako se ne navede, unapred određena vrednost je 0.
<select name="polje" size="12">
...
</select>
Drugi specifičan parametar je parametar multiple, kojim se korisniku omogućava izbor više od jedne stavke iz padajuće liste. Ovo je parametar sa logičkom vrednošću, odnosno dovoljno je da se samo navede.
<select name="polje" multiple>
...
</select>
Stavke u listi (option)
Kao što je rečeno na samom početku, elemenat select je samo prvi deo priče. Da bismo definisali stavke liste, koristimo <option> elemente i to tako što ih navodimo unutar elementa padajuće liste.
Sadržaj svakog option elementa je običan tekst i to će biti stavka koja se prikazuje u listi. Ipak, prikazani tekst nije zaista prava vrednost te stavke u listi. Prava vrednost se definiše parametrom value koji bi trebao da ima svaki od ovih elemenata. Ako odlučimo da ne definišemo value, onda će vrednost zaista biti jednaka sadržaju option elementa.
<select name="polje">
<option value="1">jedan</option>
<option value="2">dva</option>
<option value="3">tri</option>
...
</select>
Kao što je moguće "zabraniti" celu padajuću listu, isto tako možemo onemogućiti korisnika da izabere neku od stavki. U tu svrhu koristimo, sasvim očekivano, parametar disabled.
Ako želimo da zadamo unapred izabranu vrednost padajuće liste, u option elementu koji predstavlja vrednost koju želimo da zadamo, možemo upotrebiti parametar selected.
<select name="polje">
<option value="1" disabled>jedan</option>
<option value="2">dva</option>
<option value="3" selected>tri</option>
...
</select>
Grupisanje stavki (optgroup)
Poslednji element koji ćemo ovde opisati služi za grupisanje stavki u okviru liste. Oznaka koju koristimo je <optgroup>. To znači da unutar select elementa ne moramo direktno imati listu option stavki, već listu optgroup elemenata koji onda u sebi sadrže same stavke.
Naziv grupe stavki koji se prikazuje kada se otvori padajuća lista se definiše parametrom label.
Takođe, kao što je moguće zabraniti celu listu ili pojedinu stavku, tako je moguće zabraniti i celu grupu, tako da korisnik ne može izabrati ni jednu stavku iz te grupe. Za ovo koristimo već dobro poznat parametar disabled.
Primer
Da pogledamo i jedan praktičan primer...
Izaberite svog omiljenog junaka:
<select name="junak" size="6">
<optgroup label="Marvel">
<option value="CAP">Captain America</option>
<option value="IRN">Iron Man</option>
<option value="SPM" selected>Spider-man</option>
<option value="HLK">Hulk</option>
</optgroup>
<optgroup label="DC">
<option value="SUP">Superman</option>
<option value="BAT">Batman</option>
<option value="WWM" disabled>Wonder Woman</option>
<option value="FLA">Flash</option>
</optgroup>
</select>