Šioje pamokoje sužinosite, kaip sukurti įvesties laukų pasiūlymų sąrašus naudojant HTML elementą datalist. Šis elementas leidžia padėti naudotojui įvesti duomenis, rodant pasiūlymus pagal esamas reikšmes. Tai palengvina naudotojui duomenų įvedimą ir sumažina įvedimo klaidų tikimybę.
Pagrindinės išvados
- Elementas datalist leidžia apibrėžti pasiūlymų sąrašą, kurį galima naudoti kartu su įvesties lauku.
- Norėdami sukurti duomenų sąrašo elementą, turite jam priskirti ID ir nurodyti šį ID įvesties lauko sąrašo atribute.
- Vartotojai gali rinktis iš pasiūlymų arba įrašyti savo įrašus.
- Naudodami šiek tiek "JavaScript", galite pritaikyti naudotojo sąveiką su duomenų sąrašo plėtiniu.
Žingsnis po žingsnio vadovas
Pirmiausia įsitikinsime, kad turime pagrindinę mūsų formos HTML sąranką. Pradėsime nuo įvesties lauko, kurį sujungsime su duomenų sąrašo sąrašu.
1 žingsnis: sukurkite pagrindinę formos struktūrą
Pradėkite nuo pagrindinės HTML dokumento struktūros. Būtinai įterpkite metažymas ir nuorodas į CSS ar "JavaScript" failus, jei reikia.
2 žingsnis: pridėkite įvesties lauką
Naudodami teksto tipo įvesties lauką galite įgalinti sąveiką su pasiūlymų sąrašais. Nustatykite sąrašo atributą į savo duomenų sąrašo, kurį sukursime kitame žingsnyje, ID.
3 žingsnis: sukurkite duomenų sąrašo elementą
Dabar sukurkite duomenų sąrašo elementą iškart po įvesties lauko. Duomenų sąrašui priskirkite ID ir pridėkite įvairių parinkčių elementų. Kiekvienas parinkčių elementas turėtų turėti atributą value, kuris reiškia pasiūlymą.
4 veiksmas: įvesties lauko ir pasiūlymų sąrašų stilius
Nors stilizavimas nėra absoliučiai būtinas, galite naudoti CSS, kad įvesties laukas ir pasiūlymų sąrašas vartotojui atrodytų patraukliau. Pasirūpinkite, kad duomenų sąrašo elementas būtų matomas, kai naudotojui jo reikia.
5 veiksmas: išbandykite pasiūlymų sąrašo funkcionalumą
Dabar turėtumėte išbandyti formą. Kai įvesite įvesties lauką, pasirodys pasiūlymai. Juos galite pasirinkti arba įrašyti savo įrašus. Patikrinkite, kaip keičiasi pasiūlymai pagal jūsų įvestį.
6 žingsnis: Naudokite "JavaScript" išplėstinei sąveikai
Norėdami dar labiau pritaikyti funkcijas, galite naudoti "JavaScript". Perimkite įvesties lauko įvykį "onchange", kad galėtumėte imtis papildomų veiksmų arba apdoroti naudotojo pasirinkimą.
7 žingsnis: naudokite paslėptus įvesties laukus
Jei norite pateikti naudotojo pasirinktą reikšmę, galite naudoti paslėptą įvesties lauką. Tokiu būdu galite užtikrinti, kad per formą bus išsiųsta teisinga reikšmė.
8 žingsnis: Išvada ir tolesni paaiškinimai
Jei atlikote pirmiau nurodytus veiksmus, sėkmingai sukūrėte įvesties lauko pasiūlymų sąrašą. Yra daug įvairių būdų, kaip galite toliau pritaikyti šią funkciją, kad ji atitiktų jūsų programos poreikius.
Apibendrinimas
Šioje pamokoje sužinojote, kaip sukurti įvesties laukų pasiūlymų sąrašus HTML kalba naudojant elementą datalist. Apžvelgėme formos kūrimo veiksmus, taip pat galimus pritaikymo būdus naudojant CSS ir "JavaScript".
Dažniausiai užduodami klausimai
Kas yra HTML elementas datalist? Elementas datalist leidžia apibrėžti įvesties lauko pasiūlymų sąrašą.
Kaip susieti įvesties lauką su duomenų sąrašu? Nustatydami įvesties lauko sąrašo atributą į duomenų sąrašo ID.
Ar naudotojas taip pat gali įrašyti savo įvestis? Taip, naudotojas gali rinktis iš pasiūlymų, taip pat į įvesties lauką įvesti savo reikšmes.
Ar man reikia "JavaScript", kad galėčiau tinkamai naudotis duomenų sąrašu? "JavaScript" nėra būtinas, tačiau gali padėti optimizuoti naudotojo sąveiką ir įvesties reikšmių apdorojimą.
Kaip pateikti pasirinktą įvesties lauko reikšmę? Galite naudoti paslėptą įvesties lauką, kad įvestumėte rodomą formos pateikimo reikšmę.
