Šiame vadove sužinosite, kaip su select- elementu HTML kurti pasirenkamus sąrašus arba paprastai vadinamus išskleidžiamaisiais sąrašais. Ši elementų kombinacija yra būtina naudotojo sąveikai slapukuose, nes ji leidžia naudotojams rinktis iš iš anksto nustatytų variantų. Tirtume tiek daugkartinį pasirinkimą, tiek paprastus sąrašus ir svarstytume stiliaus variantus, kurie jums yra prieinami.
Svarbiausios išvados
- select-Elementas naudojamas kartu su parinkimo-žymėmis, kad būtų pateikiami pasirinkimai.
- Pasirinkimo laukų stiliavimas yra ribotas ir priklauso nuo naršyklės.
- Turėtumėte apsvarstyti naudoti kitas technologijas, pvz., JavaScript ar karkasus, jei norite turėti didesnį valdymą stiliaus srityje.
Žingsnis po žingsnio vadovas
Sukurti paprastą išskleidžiamąjį meniu galite pradėdami nuo select-Elemento. čia nurodote laukelį, kuriame naudotojai gali pasirinkti savo variantą.
select-Elementui reikalinga name-žymė, kad galėtumėte identifikuoti pasirinktą variantą pateikiant formą. čia nurodome vardą "favorite_fruits", kad užfiksuotume mėgstamas vaisių rūšis.
Viduje select-Elemento įtraukiate keletą option-žymių, kuriomis pateikiate atskirus pasirinkimo variantus. Kiekviena ši žymė turi tiek matomą tekstą, tiek pagrindinę reikšmę, kuri bus naudojama formos perdavimo metu.
Sukūrus išskleidžiamąjį meniu, galite nustatyti size-žymę į 1, tai reiškia, kad vienu metu bus rodomas tik vienas elementas. tai užtikrina, kad jis elgsis kaip įprastas išskleidžiamasis meniu.
Dar viena svarbi select-žymės savybė yra kelių. Pridedant šią žymę, naudotojai gali vienu metu pasirinkti kelis variantus, panašiai kaip su žymukėmis. Naudotojai gali naudoti valdymo mygtuką (arba Mac kompiuteriuose „Command“ klavišą), norėdami pasirinkti kelis elementus.
Kai atliekate pasirinkimą ir teikiate formą, pasirinktų variantų reikšmė siunčiama į serverį. Nors duomenys siunčiami kaip masyvas, svarbu, kad naudojant kelių reikšmių pasirinkimą kiekvienas pasirinktas variantas būtų rastas masyve.
option-žymė gali turėti tik paprastą tekstą. HTML kodas, toks kaip paveikslėliai ar nuorodos, optione nepalaikomas. Tačiau išvaizdą galite pritaikyti naudodamiesi CSS, pvz., šrifto tipu ar fono spalva.
Stiliaus pritaikymus, tokius kaip šriftą ir spalvą, galite pritaikyti naudodami optionų style-žymė. Tai lengviau įgyvendinti standartinio sąrašo pavidalu, kur turite daugiau valdymo dėl išdėstymo.
Priklausomai nuo naršyklės, select-Elementų išvaizda gali skirtis. Kai kurios naršyklės galėtų, pvz., skirtingai parodyti išskleidžiamo meniu fono spalvą ir tekstą. Svarbu tai turėti omenyje projektuojant formą.
Jeigu galvojate apie tai, kad norėtumėte pridėti vaizdus kaip pasirinkimo variantus, tai su select būtų šiek tiek komplikuota. Būtų protinga pasitelkti JavaScript ar išorinius UI bibliotekas, nes įprastų HTML elementų option-žymėse negalite įterpti.
Sudėtingesniam UI elementui, kuriam reikalingas lankstus stiliavimas, galite apsvarstyti savo išskleidžiamąjį sąrašą ar sąrašą, kurį reikėtų kurti, arba pasinaudoti jau esančiu karkasu.
Apibendrinant, select-Elementas yra puiki galimybė paprastai pasirinkti iš sąrašo arba suteikti galimybę pasirinkti daugiau. Tačiau svarbu prisiminti stiliaus variantų sudėtingumą ir naršyklių skirtumus, kad būtų išsaugota naudotojų patirtis.
Santrauka - Instrukcija kaip kurti tinklalapių formus su pasirinktiniais sąrašais
Šioje instrukcijoje sužinojai, kaip HTML naudojant select elementą kurti pasirenkamus sąrašus. Čia buvo akcentuojamas praktinis pasirinkimo laukų naudojimas, galimybės keliems pasirinkimams bei pagrindinės stiliaus parinktys.
Daugiausiai užduodami klausimai
Koks skirtumas tarp ir ?Pagrindinis skirtumas yra tas, kad siūlo išskleidžiamą sąrašą, iš kurio pasirinkimas, tuo tarpu input type="radio" rodo keletą parinkčių, iš kurių galima pasirinkti tik vieną.
Kaip galiu pasirinkti kelias parinktis ?Gali pritaikyti daugkartines parinktis taikydami daugkartinį atributą prie savo elementui, kad būtų galima atlikti daugkartinį pasirinkimą.
Ar galiu naudoti HTML viduje tagų?Ne, tagai palaiko tik paprastą tekstą ir ne HTML turinį.
Kaip galėčiau prisitaikyti - elemento vaizdavimą?Gali naudoti CSS, kad padarytum pagrindinius stiliaus pakeitimus, tačiau galimybės yra ribotos, nes ne visos CSS savybės veikia ant elementų.
Kokia rekomenduojama metodika, norint naudoti vaizdus pasirinkime?Naudojant vaizdus pasirinkimo laukams būtų geriau kreiptis į JavaScript ar išorines UI bibliotekas, kadangi elementai nepalaiko HTML turinio viduje . Tagų.
