Kurti interneto formą: galimybių grupavimas

Šiandienos Vadove parodysiu tau, kaip grupuoti parinktis pasirinkimo arba Išskleidžiamojo sąraše. Pasirinkčių grupavimas yra ypač naudingas, jei turite daug parinkčių ir norite pagerinti savo internetinės svetainės našumą. Sužinosi svarbiausius Atributus ir keletą Gerųjų Praktikų, kaip efektyviai įgyvendinti grupavimą. Pabandykime!

Svarbiausios Išvados

• Kuriant internetinius formus, svarbu tinkamai nustatyti parinkčių elementų value-Atributus, kad užtikrintume aiškumą ir našumą vartotojams.
• Parinkčių grupavimas vyksta naudojant -Elementą.
• Egzistuoja ir būdai, kaip paryškinti ir išankstinių parinkčių pildymas.

Etapu po etapo vadovas

Pirma, įsitikinkime, kad supranti value-Atributų naudojimo pagrindus. Šie atributai yra neprivalomi, tačiau rekomenduoju juos naudoti. Jei nenurodai jokių reikšmių, bus naudojamas parinkties tekstas kaip reikšmė. Pažvelkime į pavyzdį.

Čia matote, kas nutinka, kai aš pasirenku Obuolio parinktį, nenurodęs value-Atributo. Pateiktas tekstas yra naudojamas išsiųsti reikšmei. Jei dabar pasirenku Apelsino parinktį, mažoji raidė 'orange' bus siunčiama kaip reikšmė.

Todėl mano rekomendacija aiški: visada naudok value-Atributą ir nurodydami savo vidinius pavadinimus, pvz., mažosiomis raidėmis. Jei to nepadarysi, siunčiamos reikšmės gali būti neaiškios ir nereikšmingos.

Jeigu norėtum, kad įkrovus formą, tam tikrą reikšmę jau būtų galima iš anksto pasirinkti, gali naudoti selected Atributą. Taip galėtum numatyti Obuolį arba Braškę kaip numatytąsias.

Dabar norime skirti dėmesį parinkčių grupavimui. Tam naudojamas optgroup-Elementas. Pavyzdžiui, galime padalinti vaisių sąrašą į dvi grupes. Jų pavadinimai būtų tiesiog vaisiai 1 ir vaisiai 2.

Šioje grupėje galėtumėm pridėti atitinkamas <option>-Elementus, tokius kaip Obuolys, Apelsinas ir Braškė. Taip pat galėtum sukurti antrą grupę, kuri taip pat turėtų konkrečių vaisių variantų.

Kai kuriu grupę vaisiai 2, viskas turėtų būti gerai struktūrizuota ir aiški. Dažnas klaidos šaltinis būna tas, kad bandoma uždaryti -elementą, nesukūrus jo tinkamai. Pasirūpink, kad visi žymės būtų tinkamai atidarytos ir uždarytos.

Čia matysite, kaip grupės atvaizduojamos vartotojo sąsajoje. Parinktys grupėse paprastai yra tamsesnės spalvos. Tai suteikia vartotojams vizualinį signalą, kad jos priklauso tam tikrai kategorijai.

Dabar galite toliau pritaikyti savo grupių išdėstymą. Pavyzdžiui, galite pakeisti teksto parinkčių šriftą ar svorį.

Siekiant optimaliai pritaikyti išvaizdą, galite taikyti CSS stilius. Pvz., jei nustatysi šrifto dydį 24px, išdėstymas pasikeis atitinkamai, o vaizdas bus paryškintas tiek spalvomis, tiek dydžiu.

Svarbu žinoti, kad grupės tarpinės parinktys negali būti individualiai keičiamos. Jei pakeisite šrifto dydį vienoje grupėje, tai paveiks ir kitas parinktis toje pačioje grupėje.

Labai naudinga funkcija yra galimybė pasirinkti keliems. Jei pridedate atributą "multiple", vartotojai gali pasirinkti kelias parinktis iš skirtingų grupių, laikydami pelės mygtuką paspaustą.

Taigi, žinodamas, kaip sukurti parinkčių grupes išskleidžiamajame sąraše, galite padaryti savo internetinius formas naudotojams draugiškesnes ir intuityvesnes.

Santrauka

Šiame vadove išmokote, kaip grupuoti parinktis iškrentančiame meniu. Teisingai nustatant value atributus ir taikant <optgroup>-elementą grupavimui, svarbu sukurti optimalų naudotojo patirtį. Bandykite eksperimentuoti su pateiktais pavyzdžiais ir pritaikykite juos savo poreikiams. <optgroup>!-elementai grupavimui yra esminiai norint sukurti optimumą naudotojo patirtį.