Johdanto HTML-pudotusluetteloon
HTML-pudotusluettelo on tärkeä elementti lomakkeen rakennustarkoituksiin tai valintaluettelon näyttämiseen, josta käyttäjä voi valita yhden tai useita arvoja. Tällainen HTML-valintaluettelo tunnetaan pudotusluettelona. Se luodaan tunnisteella, jolla on arvo. Sen avulla käyttäjä voi valita minkä tahansa vaihtoehdon valintansa mukaan. Aina olevaa käytäntöä on käyttää avattavaa luetteloa, kun tiedät vaihtoehdon arvon, joten yksi voi asettaa minkä tahansa arvon oletusmääritteeksi ja toinen olla vaihtoehdon arvoksi.
Katsotaan kuinka avattava luettelo luodaan:
Syntaksi:
option1
option2
option3
option3
Esimerkki:
Red
Purple
Kuten yllä olevassa syntaksissa näkyy, on tunniste, jota käytetään pudotusluettelon luomiseen. valitun tunnisteen mukana toimitettu tunniste on attribuutin arvo tai valintaluettelon määritteet, arvo on osoitus siitä, että säävaihtoehto on valittu, poistettu käytöstä tai jollain muulla ominaisuudella.optio1, 2… .on nimi. CSS: n avulla voimme antaa tehosteita valintalistamme, pystymme asettamaan suhteellisia, absoluuttisia jne. Paikkoja, pystymme asettamaan leveyden ja suorittamaan monia muita toimintoja.
Taustavärin tai värin asettaminen hoverille koodilla:
.dropdown a:hover(
Background-color: color_name;
)
Avattavan luettelon sijainti jaetaan kahteen arvoon: sijainti: suhteellinen, jota käytetään luettelon sisällön näyttämiseen aivan oikean valintaluettelon painikkeen alapuolella. Aseman avulla: ehdoton;
Pienin leveys on yksi ominaisuuksista, joita käytetään tietyn leveyden antamiseksi avattavassa luettelossa. Voimme asettaa sen niin kauan kuin avattava painike asettamalla leveys 100%. Syntaksin yläpuolella on määritetty yhden määritteen valinta, nyt näemme kuinka useita vaihtoehtoja valitaan kohdeluettelosta.
Syntaksi:
option1
option2
Esimerkki:
Math
English
Science
Biology
Kuinka pudotusluettelo toimii HTML-muodossa?
Tutkittuamme syntaksia nyt näemme, kuinka avattava luettelo tulee toimimaan HTML-muodossa. Tunnisteessa käytetään joitain seuraavia attribuutteja:
- Nimi: Tämä ominaisuus on hyödyllinen, kun määritetään nimi ohjaimelle, joka lähetetään tunnistettavalle palvelimelle, ja otettava vaadittu arvo.
- Useita: Jos attribuutiksi on asetettu ”useita”, niin käyttäjä voi valita useita arvoja valintaluettelosta.
- Koko: Koko-ominaisuutta käytetään määrittelemään tietty kokoinen vieritysruutu avattavan luettelon ympärillä. Se on hyödyllinen myös useiden näkyvien vaihtoehtojen näyttämisessä luettelosta.
- Arvo: Tämä ominaisuus näyttää vaihtoehdon valintaluettelossa.
- Valittu: Valitut määritteet mahdollistavat sivun lataamisen aivan lähtökohdat, jotta voidaan näyttää jo valittu luettelon kohde luettelosta.
- Tunniste: Tunnistemääritteet toimivat toisena lähestymistapana vaihtoehtojen merkitsemiseen.
- Pois käytöstä: Jos haluamme näyttää avattavan luettelon käytöstä -vaihtoehdolla, se on mahdollista käyttämällä käytöstä poistettuja ominaisuuksia HTML-valintaluettelossa.
- onChange: Aina kun käyttäjä valitsee kenelle tahansa vaihtoehdon avattavasta luettelosta, tapahtuma laukaistaan kohteen valinnassa.
- onFocus: Aina kun käyttäjä siirtää hiiren valintaluettelossa valitaksesi vaihtoehdon luettelosta, se laukaisee tapahtuman valitaksesi kohteen.
- Lomake: Tätä ominaisuutta käytetään määrittämään yksi tai useampi muoto, jotka liittyvät valintakenttään.
- poistettu käytöstä: Meidän pitäisi pitää avattava luettelo käytöstä käyttäjän toimesta tämän ominaisuuden avulla.
- vaaditaan: Kun täytät jonkin lomakkeen, haluamme näyttää, että tämä kenttä on välttämätön valitsemalla mikä tahansa arvo luettelostaan ennen varsinaista lähetyslomaketta, joten tässä tapauksessa määrittelemme, että käyttäjän on valittava mikä tahansa arvo luettelosta.
Esimerkkejä HTML-koodista
Seuraavat esimerkit osoittavat, kuinka avattavaa luetteloa tarkalleen käytetään:
Esimerkki # 1
Koodi:
DropDown List
Maailman seitsemän ihmettä
Taj Mahal
Kiinan muuri
Kristus Lunastaja Satue
Machu Picchu
Chichen Itza
Rooman Colosseum
Petra
Yllä oleva esimerkki sisältää erilaisia vaihtoehtoja, kuten käytöstä poistetut, valitut, vaadittavat jne., Jotka näkyvät lähtöruudussa.
lähtö:
Esimerkki 2
Koodi:
Mumbai
Pune
Nagpur
Solapur
Latur
Täältä voidaan valita useita vaihtoehtoja. Paina ctrl-näppäintä ja valitse useita vaihtoehtoja kerrallaan.
toiminto multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Kuten alla olevassa kuvakaappauksessa näkyy, valitse useita vaihtoehtoja avattavasta luettelosta painamalla annettua painiketta ja valitsemalla useita vaihtoehtoja painamalla CTRL.
lähtö:
Esimerkki 3
Koodi:
.dropdownbtn (
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
)
.dropdowndemo(
position:fixed;
display: block;
)
.dropdownlist-content (
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
)
.dropdownlist-content a (
color: darkblue;
padding: 14px 18px;
display: block;
)
.dropdownlist-content a:hover (background-color: lightcyan;)
.dropdowndemo:hover .dropdownlist-content (display: block;)
.dropdowndemo:hover .dropdownbtn (background-color: blue;)
Siirrä osoitin pudotusvalikkoon
HTML muodostaa elementin
Linkit
Pudotusvalikosta
Syöttökenttä
nappi
Radiopainikkeet
Avattava luettelo on avoinna hover-efektillä.
lähtö:
johtopäätös
Voimme päätellä, että avattavaa luetteloa käytetään valimaan vaihtoehto valintaluettelosta. Sitä käytetään valitsemaan yksi tai useita vaihtoehtoja kerrallaan. Käyttäjät voivat valita vaihtoehdon luettelosta valitsemansa mukaan, joten siitä tulee käyttäjäystävällisempi. Yllä lueteltuja määritteitä käytetään valintatageissa erilaisten valintatoimintojen tekemiseen avattavan luettelon kanssa.
Suositeltava artikkeli
Tämä on opas HTML-pudotusluetteloon. Tässä keskustellaan siitä, kuinka pudotusluettelo toimii HTML: ssä ja sen esimerkkejä koodin toteutuksella. Voit myös käydä läpi muiden aiheeseen liittyvien artikkeleidemme saadaksesi lisätietoja -
- Katsaus HTML-tyyliominaisuuteen
- 10 parasta HTML-etuna
- Eri tyyppisiä HTML-kehyksiä syntaksilla
- 8 parasta HTML-asetteluelementtiä
- Kuinka luoda radiopainike?