V dnešnej príručke ti ukážem, ako môžeš zoskupiť možnosti v rozbaľovacej alebo Dropdown liste. Zoskupovanie možností je obzvlášť užitočné, ak máš veľké množstvo možností na výber a chceš zlepšiť používateľskú priateľnosť svojej webovej aplikácie. Naučíš sa najdôležitejší atribúty a niekoľko osvedčených postupov na efektívne implementovanie zoskupení. Poďme sa na to hneď pustiť!
Najdôležitejšie poznatky
- Pri vytváraní webových formulárov je dôležité správne nastaviť hodnoty atribútov value pre elementy možností, aby si zabezpečil(a) prehľadnosť a používateľsky prívetivé rozhranie.
- Zoskupenie možností sa realizuje pomocou prvku -Element.
- Máš tiež možnosti na zvýraznenie a predvýber výberu.
Krok za krokom
Najprv sa uistíme, že rozumieš základom používania atribútov value. Tieto atribúty sú nepovinné, no odporúčam ich používať. Ak nezadáš žiadne hodnoty, text možnosti sa použije ako hodnota. Ukážme si to na príklade.
Tu môžeš vidieť, čo sa stane, ak vyberiem možnosť Apple bez uvedenia hodnoty hodnoty. Zobrazí sa text možnosti ako odoslaná hodnota. Ak teraz vyberiem možnosť Orange, malé písmeno 'orange' sa odovzdá ako hodnota.
Môj jasný odporúčanie znie: Vždy používaj atribút value a zadať svoje vnútorné označenia, napríklad malým písmom. Ak to neurobíš, odoslané hodnoty môžu byť nejasné a málo výstižné.
Ak si chceš pri načítaní formulára predvoliť určitú hodnotu, môžeš použiť atribút selected. Napríklad môžeš nastaviť Apple alebo Strawberry ako predvolené možnosti.
Teraz sa chceme venovať zoskupeniu možností. To sa robí pomocou prvku optgroup-Elementu. Predpokladajme, že chceme zoznam ovocia rozdeliť do dvoch skupín. Jednoducho ich nazvem fruits 1 a fruits 2.
V rámci tejto skupiny môžeme pridať príslušné <option>-elementy ako Apple, Orange a Strawberry. Môžeš tiež vytvoriť druhú skupinu, ktorá bude obsahovať konkrétne možnosti ovocia.
Ak teda vytvoríme skupinu fruits 2, všetko by malo byť dobre štruktúrované a jasné. Častá chyba je snažiť sa uzavrieť značku
Tu vidíš, ako sú zoskupenia zobrazené v používateľskom rozhraní. Možnosti v rámci skupín sú typicky sivé. To dáva používateľom vizuálne indikácie, že patria do konkrétnej kategórie.
Teraz môžeš ďalej prispôsobiť vzhľad svojich skupín. Napríklad môžeš zmeniť veľkosť písma alebo váhu textových možností.
Pre optimalizáciu vzhľadu môžeš použiť CSS štýly. Ak napríklad nastavíš veľkosť písma na 24px, zmení sa rozloženie a zobrazenie sa vyhrazuje farbou a veľkosťou.
Je dôležité vedieť, že nemôžeš osobitne prispôsobovať hodnoty možností medzi skupinami. Ak zmeníš veľkosť písma v skupine, ovplyvní to aj ostatné možnosti v rámci rovnakej skupiny.
Veľmi užitočnou funkciou je možnosť viacnásobného výberu. Ak pridáte atribút multiple, môžu používatelia z rôznych skupín vybrať viacero možností, podržaním tlačidla myši.
Takže teraz, keď už vieš, ako vytvárať skupiny možností v rozbaľovacej ponuke, môžeš spraviť svoje webové formuláre priateľskejšími a intuitívnejšími.
Zhrnutie
V tejto príručke si sa naučil(a), ako môžeš vytvárať skupiny možností v rozbaľovacej ponuke. Správne nastavenie hodnôt atribútov value, ako aj použitie prvku <optgroup> pre zoskupenie je kľúčové pre vytvorenie optimálneho používateľského zážitku. Skús experimentovať s uvedenými príkladmi a prispôsob ich svojim potrebám.
Často kladené otázky
Aká je funkcia atribútu value v elemente -Tag?Atribút value určuje hodnotu výberu, ktorá sa použije pri odoslaní formulára.
Ako môžem predvolene vybrať možnosť výberu?Pre predvolené zobrazenie možného výberu môžeš v príslušnom -Tagu použiť atribút selected.
Ako zoskupím možnosti v rozbaľovacej ponuke?Pre vytvorenie skupín možností použi prvok -Tag a označ ich atribútom label.
Môžem aplikovať CSS štýly na elementy výberu?Áno, môžeš aplikovať CSS štýly na prvky výberu, avšak možnosti štýlovania pre prvky výberu sú obmedzené.
Ako aktivujem viacnásobný výber v rozbaľovacej ponuke?Pridaj atribút multiple do -Tagu, aby bolo používateľom umožnené vybrať viacero možností.
