Uvod u padajući popis u HTML-u
Padajući popis u HTML-u važan je element za izgradnju obrasca ili za prikazivanje popisa za odabir s kojeg korisnik može odabrati jednu ili više vrijednosti. Ova vrsta popisa za odabir u HTML-u poznata je kao padajući popis. Stvara se pomoću oznake s vrijednošću. Omogućuje korisniku da odabere bilo koju opciju prema vlastitom izboru. Uvijek je dobra uporaba padajućeg popisa kad znate vrijednost opcije, pa jedna može postaviti bilo koju vrijednost kao zadani atribut, a druga kao opcije opcija.
Pogledajmo kako će se stvoriti padajući popis:
Sintaksa:
option1
option2
option3
option3
Primjer :
Red
Purple
Kao što je prikazano u gornjoj sintaksi, oznaka se koristi za izradu padajućeg popisa. oznaka zatvorena u oznaci odabira vrijednost atributa ili atributa za popis za odabir, vrijednost će biti za prikazivanje vremenskih opcija koje su odabrane, onemogućene ili s bilo kojim drugim svojstvima.option1, 2… .bit će naziv. Pomoću CSS-a možemo dati efekte našoj listi odabira, moći postavljati pozicije kao relativne, apsolutne itd., Moći postavljati širinu i obavljati mnoge druge funkcije.
Postavljanje boje ili boje pozadine na pokazivač pomoću koda:
.dropdown a:hover(
Background-color: color_name;
)
Položaj padajućeg popisa definiran je u dvije vrijednosti: pozicija: relativna koja se koristi za prikaz sadržaja popisa točno ispod gumba odabranog popisa. Uz pomoć položaja: apsolutno;
Min-width je jedno od svojstava koja se koriste za dodavanje određene širine padajućem popisu. Možemo ga postaviti sve dok naš padajući gumb postavljamo širinu na 100%. Gore je sintaksa definirana za odabir jednog atributa, sada ćemo vidjeti kako će se nekoliko opcija odabrati s popisa predmeta.
Sintaksa:
option1
option2
Primjer :
Math
English
Science
Biology
Kako padajući popis funkcionira u HTML-u?
Nakon proučavanja sintakse vidjet ćemo kako će točno padajući popis raditi u HTML-u. Postoje neki atributi koji se upotrebljavaju u oznaci a to su:
- Naziv: Ovaj atribut korisno je dodijeliti ime nadzoru koji će poslati poslužitelju da bude identificiran i uzeti potrebnu vrijednost.
- Višestruko: Ako je tada atribut postavljen na "više", korisnik može odabrati više vrijednosti s popisa.
- Veličina: Atribut veličine koristi se za definiranje okvira za pomicanje određene veličine oko padajućeg popisa. Također je korisno za prikaz nekoliko vidljivih opcija s popisa.
- Vrijednost: Ovaj će atribut prikazivati opciju na popisu za odabir.
- Odabrano: odabrani atributi omogućuju na samom početnom mjestu učitavanja stranice za prikaz već odabrane stavke popisa s popisa.
- Oznaka: Atributi oznake djeluju kao drugi pristup vrijednosti mogućnosti označavanja.
- Onemogućeno: Ako želimo pokazati padajući popis s opcijom onemogućivanja, tada je moguće pomoću atributa onemogućeno na popisu za odabir HTML-a.
- onChange: Kad god korisnik odabere bilo koga opcija s padajućeg popisa, tada se događaj pokreće pri odabiru predmeta.
- onFokus: Kad god korisnik miša na popisu za odabir odabere opciju s popisa, pokreće događaj za odabir stavke.
- Oblik: Ovaj se atribut koristi za definiranje jednog ili više obrazaca koji se odnose na odabrano polje.
- onemogućeno: Trebali bismo držati onemogućeni padajući popis s korisnikom uz pomoć ovog atributa.
- Potrebno: Kad god ispunite neki obrazac, želimo pokazati da je ovo polje potrebno za odabir bilo koje vrijednosti s njegovog popisa prije stvarnog obrasca slanja, tako da u ovom slučaju definiramo da je korisnik dužan odabrati bilo koju vrijednost s popisa.
Primjeri HTML koda
Sljedeći će primjeri pokazati kako će se točno koristiti padajući popis:
Primjer 1
Kodirati:
DropDown List
Sedam svjetskih čuda
Taj Mahal
Kineski zid
Krist Otkupitelj Satue
Machu Picchu
Chichen Itza
Rimski Koloseum
Petra
Gornji primjer sadrži različite opcije kao što su onemogućene, odabrane, potrebne i sl. Što je prikazano na izlaznom zaslonu.
Izlaz:
Primjer 2
Kodirati:
Mumbai
Pune
Nagpur
Solapur
Latur
Ovdje možete odabrati više opcija. Pritisnite tipku ctrl i odaberite više opcija istovremeno.
funkcija multipleFunc () (document.getElementById ("multiselectdd"). višestruko = istina;
)
Kao što je prikazano na snimci zaslona u nastavku, za odabir više opcija s padajućeg popisa pritisnite zadani gumb i pritiskom na CTRL odaberite više opcija.
Izlaz:
Primjer 3
Kodirati:
.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;)
Zadržite pokazivač pada
HTML obrazac Element
linkovi
Padajući popis
Unosno polje
Dugme
Radio gumbi
Padajući popis bit će otvoren na efektu lebdenja.
Izlaz:
Zaključak
Možemo zaključiti da se padajući popis koristi za odabir opcije s popisa. Koristi se za odabir pojedinačnih ili više opcija odjednom. Korisnici mogu odabrati opciju s popisa po svom izboru, tako da ona postaje prilagođena korisniku. Gore navedeni atributi upotrebljavaju se s oznakama odabira za obavljanje različitih operacija odabira s padajućeg popisa.
Preporučeni članak
Ovo je vodič u padajućem popisu u HTML-u. Ovdje smo razgovarali o tome kako padajući popis djeluje u HTML-u i njegovim primjerima s implementacijom koda. Možete i pregledati naše druge povezane članke da biste saznali više -
- Pregled atributa HTML stila
- 10 najboljih prednosti HTML-a
- Različite vrste HTML okvira sa sintaksom
- 8 najboljih elemenata HTML izgleda
- Kako stvoriti RadioButton?