Introduksjon til rullegardinliste i HTML
Nedtrekksliste i HTML er et viktig element for formbyggingsformål eller for å vise valglisten som brukeren kan velge en eller flere verdier fra. Denne typen utvalgslister i HTML er kjent som rullegardinlisten. Det opprettes ved å bruke tag med verdi. Den lar brukeren velge et hvilket som helst alternativ i henhold til deres valg. Det er alltid en god praksis å bruke rullegardinlisten når du kjenner til opsjonsverdien, slik at man kan angi hvilken som helst verdi som standardattributt og andre vil være som opsjonsverdier.
La oss se hvordan rullegardinlisten kommer til å bli opprettet:
syntaks:
option1
option2
option3
option3
Eksempel:
Red
Purple
Som vist i syntaksen ovenfor, er en tag som brukes til å opprette rullegardinliste. koden som er vedlagt i markeringen er en attributtverdi eller attributter for valglisten, verdien vil være for å vise væralternativet er valgt, deaktivert eller med andre egenskaper. Valg1, 2…. vil være navnet. Ved hjelp av CSS kan vi gi effekter til utvalgslisten vår, i stand til å stille posisjoner som relativ, absolutt osv., I stand til å stille bredde og utføre mange andre funksjoner.
Angi bakgrunnsfarge eller farge til svevet ved å bruke kode:
.dropdown a:hover(
Background-color: color_name;
)
Posisjon for nedtrekksliste er definert i to verdier: posisjon: relativ som brukes til å vise innholdet i listen nøyaktig rett under valglisteknappen. Ved hjelp av posisjon: absolutt;
Min-bredde er en av egenskapene som brukes til å gi en spesifikk bredde til rullegardinlisten. Vi kan stille den så lenge som rullegardinmenyen vår ved å stille bredden til 100%. Over syntaks er definert for valg av enkelt attributt, nå vil vi se hvordan flere alternativer skal velges fra varelisten.
syntaks:
option1
option2
Eksempel:
Math
English
Science
Biology
Hvordan rullegardinliste fungerer i HTML?
Etter å ha studert syntaksen nå vil vi se hvordan nøyaktig Dropdown-listen kommer til å fungere i HTML. Det er noen attributter som brukes i taggen som er som følger:
- Navn: Denne attributtet er nyttig for å tilordne et navn til kontrollen som skal sende til serveren for å bli identifisert og ta den nødvendige verdien.
- Flere: Hvis attributtet er satt til “flere”, kan brukeren velge flere verdier fra valglisten.
- Størrelse: Størrelsesattributt brukes til å definere en rulleboks i spesifikk størrelse rundt nedtrekkslisten. Det er også nyttig for å vise flere synlige alternativer fra listen.
- Verdi: Dette attributtet viser et alternativ i valglisten som er valgt.
- Valgt: Valgte attributter aktiverer helt i startpunktene for sidelaster for å vise allerede valgt listeelement fra listen.
- Etikett: Etikettattributter fungerer som en annen tilnærming til verdien av merkingsalternativer.
- Deaktivert: Hvis vi ønsker å vise en rullegardinliste med et deaktiveringsalternativ, er det mulig å bruke deaktivert attributt i HTML-utvalgsliste.
- onChange: Hver gang brukeren skal velge noen fra alternativet til rullegardinlisten, blir hendelsen utløst ved valg av element.
- onFocus: Hver gang brukeren holder musen på valglisten for å velge et alternativ fra listen, utløser det en hendelse for å velge elementet.
- Form: Dette attributtet brukes til å definere en eller flere skjemaer som er relatert til valgt felt.
- deaktivert: Vi bør holde rullegardinlisten vår deaktivert fra brukeren ved hjelp av dette attributtet.
- påkrevd: Hver gang du fyller ut et skjema, vil vi vise at dette feltet er nødvendig for å velge hvilken som helst verdi fra listen før det faktiske sendeskjemaet. I dette tilfellet definerer vi at brukeren må velge en verdi fra listen.
Eksempler på HTML-kode
Følgende eksempler vil vise hvordan nøyaktig Dropdown-listen skal brukes:
Eksempel 1
Kode:
DropDown List
Syv underverk i verden
Taj Mahal
Den kinesiske mur
Kristus forløser Satue
Machu Picchu
Chichen Itza
Romerske Colosseum
Petra
Eksemplet ovenfor inneholder forskjellige alternativer som deaktivert, valgt, påkrevd, osv. Som vises på utskriftsskjermen.
Produksjon:
Eksempel 2
Kode:
Mumbai
Pune
Nagpur
Solapur
Latur
Her kan du velge flere alternativer. Trykk på ctrl-tasten og velg flere alternativer om gangen.
funksjon multipleFunc () (document.getElementById ("multiselectdd"). multiple = true;
)
Som vist på skjermbildet nedenfor, for å velge flere alternativer fra rullegardinlisten, trykk på gitt knapp, og ved å trykke på CTRL, velg flere alternativer.
Produksjon:
Eksempel 3
Kode:
.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;)
Demontering av svevetast
HTML danner element
lenker
Nedtrekksliste
Inntastingsfelt
Knapp
Radioknapper
Nedtrekkslisten vil være åpen med sveveeffekt.
Produksjon:
Konklusjon
Vi kan konkludere med at rullegardinlisten brukes til å velge et alternativ fra utvalgslisten. Den brukes til å velge enkelt- eller flere alternativer om gangen. Brukere kan velge et alternativ fra listen per valg, slik at det blir mer brukervennlig. Attributtene som er oppført over, brukes med utvalgskoder for å utføre forskjellige valgoperasjoner med rullegardinlisten.
Anbefalt artikkel
Dette er en guide til Dropdown List i HTML. Her diskuterer vi hvordan Dropdown List fungerer i HTML og dens eksempler med kodeimplementering. Du kan også gå gjennom andre relaterte artikler for å lære mer -
- Oversikt over HTML Style Attributt
- Topp 10 fordeler med HTML
- Ulike typer HTML-rammer med syntaks
- Topp 8 HTML-oppsettelementer
- Hvordan lage en RadioButton?