Događaji u padajućem izborniku html php css. Izrađujemo elegantne padajuće liste. Obični HTML, CSS padajući izbornik

Pozdrav, dragi čitatelji bloga. Danas želim razgovarati o stvarima kao što su HTML obrasci. Bez obzira na motor vaše stranice (cms), ona će svakako koristiti obrasce kreirane pomoću oznaka Form i Input, kao i atribute i parametre Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ovome također možete dodati elemente za stvaranje padajućih popisa i tekstualnih polja - Odaberi, Opcija, Textarea, Label, Fieldset, Legenda.

Zašto su obrasci potrebni i kako rade na modernim stranicama

Isti niz za pretraživanje web-mjesta () stvara se pomoću ovih oznaka, a traženje toga na vašem projektu bit će obavezno. Stoga vam razumijevanje načina na koji su raspoređeni i funkcioniraju uopće neće smetati za uspješan rad na dizajnu, a neće biti suvišno ni za samopromociju i promociju.

Dakle, s obrazloženjem potrebe za proučavanjem ovih elemenata, mislim da više ne bi trebalo biti pitanja, pa je vrijeme da prijeđemo izravno na proučavanje njihovih mogućih opcija.

Da, također vas želim podsjetiti da smo već uspjeli razmotriti mnogo materijala na temu jezika za označavanje hiperteksta, na primjer, tri ) i .

U svojoj jezgri, obrasci se sastoje od elemenata, za stvaranje kojih se različite oznake umeću unutar glavnog spremnika iz oznaka obrasca - Provjereno, Vrijednost, Potvrdni okvir, Radio, Potvrdni okvir, Pošalji itd. Samo trebamo postaviti njegov kod na bilo koje mjesto pogodno za ovaj predložak web mjesta, određujući kako bi trebao izgledati uz pomoć oznaka i njihovih atributa.

To bi mogao biti tekstualni okvir s gumbom za slanje za uneseni zahtjev, izbor radio gumba (gdje možete ostaviti samo jedan od ponuđenih gumba pritisnutim), više tekstnih okvira s gumbom za slanje () i više.

Na primjer, u slučaju "traži", pomoću atributa Vrijednost, možete odrediti što će točno biti napisano na gumbu koji se nalazi pored polja za unos upita. Podatke unesene u obrasce potrebno je na neki način dalje obraditi.

Na primjer, u slučaju povratne informacije, korisnik, nakon što ispuni polje sa svojim imenom, unese svoju e-poštu i tekst poruke, a zatim klikne na gumb za slanje, imat će pravo nadati se slanju podataka iz obrazac na e-mail autora stranice. No implementirati ovo korištenjem samo jednog jezika za označavanje hiperteksta (), nažalost, nije moguće.

U tu svrhu potreban je poseban program za rukovanje koji će, nakon što korisnik klikne na gumb za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih E-mail vlasniku resursa. Koji program će to učiniti, morate sami odrediti pomoću atributa Akcija.

Obično je program za obradu skripta napisana u PHP-u. Stoga ćete u atributu Action oznake Form morati navesti put do datoteke ove skripte koja se nalazi na poslužitelju vašeg hostinga. Dat ću kao primjer pretplatu na RSS feed mog bloga putem e-pošte:

Malo nejasno, vjerojatno, čini se na prvu, ali mislim da će sve biti jasnije kako priča bude odmicala.

Oznake obrasca i unosa za stvaranje gumba, potvrdnih okvira i radio gumba

Svaki obrazac mora biti okružen početnim i završnim oznakama Oblik. Ovo je vrsta spremnika za njihovo stvaranje. Ova oznaka ima niz obaveznih i izbornih atributa:

  1. Ime - jedinstveno ime koje je potrebno navesti ako će se koristiti više web obrazaca u Html datoteci u kojoj nešto radite
  2. Akcija - obvezni atribut koji označava put do skripte na koji će se podaci iz nje prenijeti za daljnju obradu
  3. Metoda - pomoću nje možete promijeniti način prosljeđivanja podataka iz ovog web obrasca u skriptu datoteke rukovatelja. Ako to ne navedete, tada će se prema zadanim postavkama koristiti metoda Get, koja je, zapravo, namijenjena uglavnom za varijable i kratke poruke, a također i prosljeđivanje podataka na otvoren način kroz adresnu traku preglednika. Da biste proslijedili podatke obrasca skripti rukovatelja, ipak je bolje koristiti POST metoda, dizajniran posebno za prijenos tekstualnih poruka na zatvoren način

Pogledajmo ostale oznake koje vam omogućuju stvaranje raznih web obrazaca. Najsvestraniji je Ulazni. Unutar njega mora biti upisan atribut Type koji određuje kakav će točno biti HTML obrazac kreiran pomoću ove oznake.

Pomoću Input and Type možete izraditi sljedeće elemente:

  1. tekstualna polja s jednim redom (Type="Text")
  2. polja za lozinku (Type="Password")
  3. potvrdni okviri (Type="Checkbox")
  4. radio gumbi (Type="Radio")
  5. skrivena polja (Type="Hidden")
  6. uobičajeni gumbi (Type="Button")
  7. gumbi za slanje podataka rukovatelju (Type="Submit")
  8. gumbi za vraćanje web obrasca u izvorno stanje (Type="Reset")
  9. polja za učitavanje datoteka na poslužitelj (Type="File)
  10. slikovni gumbi (Type="Image")

Unos nema završnu oznaku. Kakav će točno biti web obrazac kreiran njime u potpunosti ovisi o parametru navedenom u atributu Type. Ako Vrsta nije navedena, tekstno polje će se stvoriti prema zadanim postavkama.

Primjeri obrazaca stvorenih na Inputu s različitim vrijednostima za Type

Ostali atributi ulazne oznake i primjeri njihove uporabe

Razmotrite čemu služe ostali atributi:

  1. Ime - ako se podaci šalju skripti programa rukovatelja, tada morate navesti parametar za atribut Naziv. Pod tim nazivom će se podaci dostavljeni iz obrasca pojaviti u programu za obradu podataka.
  2. Veličina - pomoću nje se postavlja veličina polja kreiranog web obrasca. Vrijednost je navedena u broju znakova koji mogu stati u ovo polje. Ako veličina nije navedena, širina će prema zadanim postavkama biti 24 znaka.
  3. Maxlength - prema zadanim postavkama, broj znakova koji se mogu unijeti u Html obrazac nije ograničen, ali korištenjem Maxlength možete postaviti ovo ograničenje. Više znakova nego što će biti naznačeno, nećete moći unijeti u polje
  4. Vrijednost - pomoću nje možete postaviti što će točno biti zapisano u polju ili na gumbu za slanje podataka
  5. Označeno je atribut zastavice koji se može umetnuti u Unos za radio gumbe (radio) ili za potvrdne okvire (potvrdni okvir). U tom će slučaju ovaj radio gumb ili potvrdni okvir biti aktivan kada se učita stranica s web-obrascem (već će imati kvačicu)

Sada pogledajmo sve oblikujte primjere s unosom. Izgled tekstualnog polja sličan je izgledu polja za lozinku, stoga ćemo razmotriti samo opciju kreiranja teksta, npr. za unos adrese e-pošte:

Sada pogledajmo stvaranje web obrasca s radio gumbima (Radio):

Imajte na umu da ovaj obrazac dvaput koristi oznaku unosa, jednom za stvaranje svakog od dva radio gumba. Štoviše, svaki od njih ima atribut Name s istom vrijednošću (resultat), a vrijednost Value je različita (YES i NO).

To znači da će se prilikom obrade, ako je odabran bilo koji od radio gumba, poslati varijabla čije je ime zapisano u Name, ali će vrijednost te varijable ovisiti o tome koji je radio gumb odabran.

Razmotrite primjer izrade web obrasca s potvrdnim okvirima (Checkbox):

Potvrdni okviri razlikuju se od radio gumba po mogućnosti odabira više opcija odjednom. Naziv se koristi za određivanje u datoteci rukovatelja u kojem su potvrdnom okviru postavljeni potvrdni okviri, a vrijednost specificira vrijednost koja će biti poslana rukovatelju (ako vrijednost nije postavljena, tekst koji se nalazi pored ovog potvrdnog okvira bit će poslan rukovatelju ).

Odabir, Opcija, Textarea, Label, Fieldset, Legend - padajući popisi, tekstualna područja i drugi elementi web obrasca

Za početak, želim vas malo podsjetiti što su zapravo web obrasci i zašto su potrebni na stranicama web mjesta. Prvenstveno su dizajnirani da ponavljaju elemente koji su dostupni u bilo kojem operativnom sustavu u jednostavnom obliku: gumbe, polja za unos teksta, padajuće liste, okvire za potvrdu, prekidače i slično.

Svi korisnici, bez ikakvih dodatnih objašnjenja, razumiju svrhu ovih elemenata, a ako vide gumb Html forme, razumiju da moraju kliknuti na njega.

Štoviše, svi njegovi sastavni elementi (kao što su Select, Option, Textarea, Label, Fieldset, Legend) već su gotove praznine (spremnici), za umetanje kojih će biti dovoljno samo koristiti željenu oznaku s potrebnim atributima i parametrima.

Sami preglednici znaju kako prikazati određeni element web obrasca. Istina, mogućnosti prikaza za isti element u različitim preglednicima mogu se malo razlikovati jedna od druge, ali u pravilu ne značajno.

Da. ispada da su web obrasci u HTML-u pokušaj prijenosa ključa elemenata koji se koriste u bilo kojem operativnom sustavu, na stranice web stranice. Ali zašto bi mogli biti potrebni na stranicama web mjesta?

U principu, za istu svrhu za koju se slični elementi koriste u operacijskim sustavima - prijenos podataka od korisnika. U slučaju obrazaca, podaci od korisnika prenose se na poslužitelj, gdje se obrađuju posebnim programom (jezik za označavanje hiperteksta, nažalost, ne dopušta obradu podataka).

Iako se podaci mogu slati ne samo na poslužitelj, već i, na primjer, e-poštom na adresu navedenu u atributu Action oznake Form. Prilikom slanja podataka iz Html-a u E-mail, korisnik koji popuni polja, nakon klika na gumb Pošalji podatke, pokrenut će program za poštu koji se standardno koristi na njegovom računalu.

Oznaka obrasca za otvaranje trebala bi izgledati otprilike ovako:

Select i Option su padajuće oznake

Svi elementi web obrasca koji stvaraju polja s padajućim popisima formiraju se na isti način. Prvo se definira spremnik kombiniranog okvira pomoću otvarajućih i zatvarajućih Html Select oznaka. Zatim se unutar ovog spremnika kreiraju zasebni spremnici sa stavkama (elementima) ovog popisa. To se radi otvaranjem i zatvaranjem Option oznaka.

Ispada ovako nešto:

Ali ovo je pojednostavljeni dizajn, jer Select i Option imaju niz atributa, koji definiraju svojstva i izgled generiranog kombiniranog okvira.

  1. Ime - morate unijeti jedinstveni naziv za ovaj element web obrasca kreiran pomoću Odaberi. Ovo će ime biti proslijeđeno poslužitelju u programu za obradu podataka kao ime za varijablu. Vrijednost atributa Value (postavljenog u Opciji za svaku stavku) stavke padajućeg popisa koju korisnik odabere bit će proslijeđena kao vrijednost ove varijable.
  2. Veličina - pomoću nje možete postaviti broj prikazanih stavki. Drugim riječima, koristeći veličinu, možete postaviti visinu popisa, mjerenu u broju prikazanih redaka. Ako izričito ne navedete vrijednost veličine u oznaci Odaberi, tada će se koristiti zadana visina padajućeg popisa, a bit će drugačije ako atribut Više nije prisutan ili je prisutan u Odaberi:
    1. Ako je višestruko prisutno u Odaberi, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jednaka broju njegovih elemenata. Oni. bit će prikazane sve stavke na padajućem popisu za višestruki odabir. Pogledajte primjer množine u nastavku. Ako je atribut Veličina u Odaberi postavljen na manje od broja stavki, tada će se s desne strane pojaviti traka za pomicanje.
    2. Ako u Odabiru nema opcije Višestruko, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jedan redak. Oni. bit će vidljiva samo jedna linija, a ostale stavke bit će dostupne samo pritiskom na tipku dizala (desno). Pogledajte primjer u nastavku
  3. Višestruko - pripisivanje ovog atributa oznaci Odaberi omogućit će vam stvaranje padajućeg popisa s mogućnošću odabira više stavki u isto vrijeme. Pročitajte više o ovom atributu u nastavku.

Obrasci s padajućim popisima mogu se podijeliti u dvije opcije. U prvoj opciji padajućim popisom možete odabrati samo jedan element (liniju) polja, u drugoj opciji, držeći Ctrl ili Shift, možete istovremeno odabrati više dostupnih stavki.

U tom slučaju, u drugoj opciji, podaci o svim odabranim točkama bit će poslani na poslužitelj. Koji će se padajući popis kreirati određuje prisutnost ili odsutnost atributa Multiple u oznaci Select.

Multiple je naveden u Select bez parametra, jer napiše se jednostavno Višestruko i to je to. Ako je prisutan, stvorit će se web-obrazac s padajućim popisom s opcijom višestrukog odabira (držite Ctrl ili Shift).

Varijanta polja s padajućim popisom, u kojem će biti moguć višestruki izbor, izgledat će otprilike ovako:

Desno je primjer padajućeg web obrasca s višestrukim odabirom koji se temelji na gornjem kodu. Kao što vidite, držanjem Ctrl ili Shift možete odabrati više stavki u isto vrijeme.

Ako u oznaci Select nema atributa Multiple, tada se može odabrati samo jedan element ovog padajućeg popisa (redak).

Ovdje možete vidjeti primjer gdje se može odabrati samo jedna stavka:

Oznaka Odaberite SelectED Legenda web stranice

Atributi oznake opcije


Na stvorenom padajućem popisu (pomoću Odaberi i Opcija) možete dodati nešto poput separatora uz naslov grupe, koji će se stilom fonta razlikovati od ostalih stavki izbornika.

Da biste kreirali grupu iz stavki padajućeg popisa, potrebno ih je priložiti u početnu i završnu oznaku obrasca Optgroup, au početnoj oznaci Optgroup navesti atribut Label, kao parametar za koji je potrebno unijeti željeni naziv grupe.

Na primjer ovako:

Odabir oznake
SelectED Legenda web stranice

Textarea - kreiranje tekstualnog polja u obrascu

Postoji još jedan element web obrasca koji nismo uzeli u obzir - Textarea (polje s mogućnošću unosa višerednog teksta). Izrađuje se pomoću uparene oznake Html Textarea. Štoviše, u njemu je moguće prenijeti tekst u novi redak i on će se prenijeti na poslužitelj, uzimajući u obzir izvršene prijenose.

Dakle, za kreiranje višerednog tekstualnog polja potrebno je napisati početno i završno Textarea, a između njih dodati tekst koji će biti vidljiv kada se učita stranica s web formom. Korisnik tada može obrisati ovaj tekst i napisati svoj.

Kao što vidite, klik na tekst za aktiviranje ovog elementa je beskoristan - morate sami kliknuti na njega. To je upravo stanje stvari koje je Label tag dizajniran da popravi. Omogućuje vam da tekst pored elementa web obrasca učinite klikabilnim, što nedvojbeno jest poboljšati upotrebljivost.

Ali kako povezati Html element i tekst? Da biste to učinili, atributu morate dodati ID s jedinstvenim parametrom, a tekst mora biti okružen otvarajućim i zatvarajućim oznakama Label. I to nije sve. U početnu oznaku Label potrebno je upisati atribut For čiji parametar mora biti potpuno isti kao ID atribut u Html oznaci elementa forme. Ispada ovako nešto:

Kao što vidite, sada, zahvaljujući korištenju Labela, elementi web obrasca mogu se aktivirati ne samo klikom na njega, već i klikom na tekst koji se nalazi pored njega.

Fieldset i Legend - cijepanje forme na dijelove

Vjerojatno ste često vidjeli da su veliki obrasci u Html-u podijeljeni u grupe (Fieldset), koje su zaokružene u okviru, a svaka takva grupa ima svoje zaglavlje (Legend). Ovo se implementira pomoću samo dvije oznake: Fieldset i Legend. Oni su upareni, tj. moraju imati otvor i otvor.

Dakle, da biste stvorili grupu sastavnih dijelova, sve te dijelove trebate zatvoriti u početne i završne oznake Fieldset. A da biste postavili naslov (legendu) za ovu grupu, potrebno je odmah nakon početnog Fieldset-a napisati konstrukciju iz početne i završne legende, između kojih je potrebno umetnuti tekst naslova grupe.

Evo primjera stvaranja grupa pomoću Fieldset-a i Legende:



Sretno ti! Vidimo se uskoro na stranicama bloga

Možda će vas zanimati

Select, Option, Textarea, Label, Fieldset, Legend - Html oznake obrasca padajućeg popisa i tekstualnog polja
Popisi u Html kodu - UL, OL, LI i DL oznake
MailTo - što je to i kako napraviti link za e-poštu u HTML-u
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex rezultati i drugi programi
Što je Html Hypertext Markup Language i kako ispisati sve oznake u W3C validatoru
Kako ubaciti link i sliku (fotografiju) u HTML - IMG i A tagovi
Tablice u Html - Table, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovu izradu
Font (lice, veličina i boja), Blockquote i Pre oznake - zastarjelo oblikovanje teksta u čistom HTML-u (bez korištenja CSS-a)
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na web mjestu, a također napraviti sliku poveznicom u Html kodu

U posljednje dvije godine razvoj web aplikacija (stranica) je otišao daleko naprijed i ono što smo koristili za izradu stranica je već zastarjelo ili su se pojavile novije metode.

Prethodno, za stvaranje padajućeg popisa u html-u ( na engleskom. — padajući izbornik), upravo smo koristili

U ovom primjeru označavamo

U pregledniku to izgleda ovako:

Grupiranje stavki izbornika

Razmotrimo sljedeću oznaku A koji se koristi za grupiranje povezanih podataka na padajućem popisu name="crno&bijelo"> label="whitelist">

U ovom smo primjeru odabrali 2 grupe s oznakom . Atribut oznake elementa podebljano navodi naziv odabrane grupe:

U sljedećem primjeru, korištenjem disabled boolean atributa, onemogućit ćemo jednu grupu (" Grupa B"):

</span> Primjer korištenja onemogućenog atributa HTML oznake <optgroup><span>

Rezultat našeg primjera:

Onemogućavanje popisa i višestrukog odabira

</span> Onemogućeni i višestruki atributi oznake <select><span>

U ovom smo primjeru izradili dva padajuća popisa. Za prvi popis koristili smo atribut disabled koji onemogućuje interakciju s popisom (onemogućuje ga).

Za drugi popis koristili smo atribut višestruki, koji označava da je dopušteno odabrati nekoliko opcija na popisu odjednom (preko ctrl na Windowsima i kroz naredba na Macu).

U pregledniku to izgleda ovako:

Područje teksta

Rezultat našeg primjera:

Onemogućivanje područja teksta

Po analogiji s prethodno razmatranim elementima, oznaka



type = "submit" name = "submitInfo" value = "submit" > !}

U ovom primjeru stvorili smo dva tekstualna područja (element