Tänases juhendis näitan sulle, kuidas saad valik- või rippmenüüs valikuid grupeerida. Valikute rühmitamine on eriti kasulik, kui sul on palju valikuvõimalusi ja soovid oma veebirakenduse kasutajaliidest paremaks muuta. Õpid olulisemad atribuudid ja mõned parimad praktikad grupeerimise tõhusaks rakendamiseks. Läheme kohe asja juurde!
Olulisemad tähelepanekud
- Veebi-vormide loomisel on oluline, et määrad option-elementide value-atribuudid õigesti, tagamaks selgus ja kasutajaliidese sõbralikkus.
- Valikute rühmitamine toimub optgroup-elementi abil.
- Olemas on ka võimalusi esiletõstmiseks ja eeltäitmiseks.
Juhend sammhaaval
Esmalt veendume, et sa mõistad value-atribuutide kasutamise põhimõtteid. Need atribuudid on valikulised, kuid soovitan sul neid kasutada. Kui sa väärtusi ei määra, kasutatakse väärtusena valiku teksti. Vaatame näidet.
Siin näed, mis juhtub, kui ma valin Apple valiku, ilma et oleksin määranud value-atribuudi. Kuvatud teksti kasutatakse väärtuse saatmiseks. Kui nüüd valin Orange valiku, saadetakse väärtusena väiketäht 'orange'.
Seega on minu soovitus selge: kasuta alati value-atribuuti ja sisesta oma sisekasutuse väärtused, näiteks väiketähtedega. Kui seda ei tee, võivad saadetud väärtused olla segased ja väheütlevad.
Kui soovid vormi laadimisel juba teatud väärtust eelvalida, saad kasutada selected atribuuti. Näiteks võid määrata vaikeväärtuseks Apple või Strawberry.
Nüüd keskendume valikute grupeerimisele. Selleks kasutatakse optgroup-elementi. Näiteks võtame, et soovime jagada puuviljade loendi kaheks grupiks. Ma nimetan need lihtsalt puuviljad 1 ja puuviljad 2.
Selles grupis saame lisada vastavad <option>-elemendid nagu Apple, Orange ja Strawberry. Samuti võid luua teise grupi, mis sisaldab samuti konkreetseid puuvilja valikuid.
Kui loome puuviljade 2 gruppi, peaks kõik olema hästi struktureeritud ja selge. Lihtne viga, mis sageli juhtub, on proovida
Siin näed, kuidas grupeerimised kasutajaliideses kuvatakse. Gruppide sees olevad valikud on tavaliselt halliga esile tõstetud. See annab kasutajatele visuaalsed vihjed, et need kuuluvad teatud kategooriasse.
Nüüd saad oma gruppide kujundust edasi kohandada. Näiteks võid muuta teksti valikute fondi suurust või kaalu.
Välimuse optimeerimiseks saad rakendada CSS-stiile. Näiteks, kui seadistad font-size väärtuseks 24px, muutub kujundus vastavalt ning esitus muutub värvilisemaks ja suuruse poolest esiletõstetumaks.
On oluline teada, et gruppide vaheliste valikute muutmiseks ei saa eraldiseisvalt väärtusi kohandada. Kui vahetad fondi suurust ühes grupis, mõjutab see ka teisi valikuid samas grupis.
Väga kasulik funktsioon on mitme valiku võimalus. Kui lisate atribuudi multiple, saavad kasutajad valida mitu valikut erinevatest gruppides klõpsates hiirega all hoides.
Nüüd, kui teate, kuidas luua rippmenüüs valikute rühmi, saate muuta oma veebivormid kasutajasõbralikumaks ja intuitiivsemaks.
Kokkuvõte
Selles juhendis olete õppinud, kuidas grupeerida valikuid rippmenüüs. Õige value-atribuutide seadistamine ja optgroup-elementide kasutamine grupeerimiseks on olulised optimaalse kasutajakogemuse loomiseks. Katsetage antud näidetega ja kohandage neid vastavalt oma vajadustele.
Korduma kippuvad küsimused
Mis on value-atribuudi funktsioon -tägis?Value-atribuut määrab valiku edastatud väärtuse, mida kasutatakse vormi edastamisel.
Kuidas saab vaikimisi valida valiku?Sobiva -tägis saate kasutada valitud atribuuti, et kuvada vaikimisi valikuna üks valik.
Kuidas grupeerida valikuid rippmenüüs?Kasuta optgrupi loomiseks valikute grupeerimiseks -tägi ja nimeta need märgiatribuudiga.
Kas ma saan rakendada CSS-stiile -elementidele?Jah, saate rakendada CSS-stiile valimise elementidele, kuid stiilivalik on -elementide puhul piiratud.
Kuidas mitmevalikut rippmenüüs aktiveerida?Mitmikvalikute võimaldamiseks seadke atribuut multiple -tägis.
