Odabir s padajućeg popisa u HTML-u. Izrada obrasca u HTML-u II. Unos podataka kroz petlju

Sve oznake postavljene unutar oznake opcije bit će zanemarene.

Primjer padajućeg popisa

PROIZLAZITI:

Primjer popisa s višestrukim izborom

PROIZLAZITI:

Grupa stavki popisa

Kontejner ... omogućuje grupiranje stavki popisa. U tom će slučaju nazivi svake grupe biti istaknuti podebljanim slovima, a neki preglednici dodaju i uvlaku, tako da je korisniku puno lakše snalaziti se pri odabiru tražene stavke.

Za oznaku Dostupni su opći atributi i atributi za rukovanje događajima.

Primjer grupiranja stavki popisa

PROIZLAZITI:

Štoviše, radi dodatne jasnoće, svaka se grupa može obojiti u vlastitu boju pomoću CSS-a.

Primjer označavanja grupa stavki popisa bojom

PROIZLAZITI:

HTML3.2 HTML4.0 HTML5 CSS1 CSS2 CSS3 JavaScript DHTML

Pozdrav, dragi čitatelji bloga. Danas želim govoriti o nečemu poput HTML obrazaca. Koji god motor vaše stranice (cms) bio, on će svakako koristiti obrasce u ovom ili onom obliku, kreirane pomoću oznaka Form i Input, kao i atributa i parametara 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 funkcioniraju na modernim web stranicama?

Isti niz za pretraživanje web-mjesta () kreira se pomoću ovih oznaka, a pretraživanje će biti potrebno na vašem projektu. Stoga vam razumijevanje njihove strukture i funkcioniranja uopće neće smetati u uspješnom radu na dizajnu, a neće biti suvišno ni ako ga sami promovirate.

Dakle, opravdavši potrebu za proučavanjem ovih elemenata, mislim da se više ne bi trebalo postavljati pitanja, pa je vrijeme da prijeđemo izravno na proučavanje njihovih mogućih opcija.

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

U svojoj srži, obrasci se sastoje od elemenata za čiju se izradu umeću različite oznake iz oznaka obrasca unutar glavnog spremnika - Provjereno, Vrijednost, Potvrdni okvir, Radio, Potvrdni okvir, Pošalji itd. Samo trebamo postaviti njegov kod u bilo koji prikladan prostor mjesto u predlošku web stranice, naznačujući pomoću oznaka i njihovih atributa kako bi to trebalo izgledati.

To može biti tekstualno polje s gumbom za podnošenje unesenog upita, odabiri s radio gumbima (gdje možete ostaviti samo jedan od ponuđenih gumba pritisnutim), više tekstualnih polja s gumbom za podnošenje() i još mnogo toga.

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 će se nakon što ispuni polje sa svojim imenom, unese svoj E-mail i tekst poruke, a zatim klikne na gumb Pošalji, imati pravo nadati se da su podaci iz obrasca će biti poslana na e-mail autora stranice. No, nažalost, to nije moguće implementirati koristeći samo jedan jezik za označavanje hiperteksta ().

U tu svrhu trebat će vam poseban program za obradu, koji će, nakon što korisnik klikne na gumb za slanje, uzeti sve podatke iz polja za povratne informacije i poslati ih e-poštom vlasniku resursa. Morate odrediti koji program će to učiniti sami koristeći atribut Action.

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

Možda će se u početku činiti malo nejasnim, 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 morate navesti ako će Html datoteka u kojoj nešto radite koristiti nekoliko web obrazaca
2. Akcija – obavezni atribut koji označava put do skripte na koju će podaci iz nje biti prebačeni za daljnju obradu
3. Metoda – pomoću nje možete promijeniti metodu prijenosa podataka iz ovog web obrasca u skriptu datoteke rukovatelja. Ako ga 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 otvoreni prijenos podataka putem adresne trake preglednika. Za prijenos podataka obrasca u skriptu rukovatelja ipak je bolje koristiti POST metoda, dizajniran posebno za privatni prijenos tekstualnih poruka

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

Pomoću unosa i tipa možete izraditi sljedeće elemente:

1. tekstualna polja s jednim redom (Type="Text")
2. polja za unos lozinke (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 dovođenje web obrasca u izvorno stanje (Type="Reset")
9. polja za učitavanje datoteka na poslužitelj (Type="File)
10. gumbi sa slikom (Type="Image")

Unos nema završnu oznaku. Kako će točno izgledati web obrazac kreiran pomoću njega 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

Pogledajmo za što su potrebni drugi atributi:

1. Naziv – ako se podaci moraju poslati skripti programa rukovatelja, tada morate navesti parametar za atribut Naziv. Pod tim imenom će se podaci poslani iz obrasca pojavljivati ​​u programu procesora informacija.
2. Veličina - koristi se za postavljanje veličine polja web obrasca koji se stvara. 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. Nećete moći unijeti više znakova nego što je navedeno u polju.
4. Vrijednost - pomoću nje možete odrediti š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 ili potvrdne okvire. 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 primjeri oblika s unosom. Izgled tekstualnog polja sličan je izgledu polja za unos lozinke, pa razmotrimo samo opciju kreiranja teksta, na primjer, za unos adrese e-pošte:

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

Primijetite da ovaj obrazac dvaput koristi oznaku unosa, jednom za stvaranje svakog od dva radio gumba. Štoviše, svaki od njih sadrži 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 se odabere bilo koji od prekidača, poslati varijabla čije je ime zapisano u Name, ali će vrijednost te varijable ovisiti o tome koji je prekidač odabran.

Pogledajmo primjer izrade web obrasca s potvrdnim okvirima:

Potvrdni okviri razlikuju se od radio gumba po tome što vam omogućuju odabir više opcija odjednom. Naziv se koristi da se u datoteci rukovatelja odredi u koji se potvrdni okvir potvrdni okviri nalaze, a vrijednost određuje vrijednost koja će biti poslana rukovatelju (ako vrijednost nije navedena, 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 bih vas malo podsjetio na to što su zapravo web obrasci i zašto su potrebni na stranicama web stranica. Prvenstveno su dizajnirani za repliciranje elemenata koji se nalaze u bilo kojem operativnom sustavu u obliku koji je jednostavan za korištenje: gumbi, polja za unos teksta, padajući popisi, okviri za potvrdu, prekidači i slično.

Svi korisnici, bez ikakvih dodatnih objašnjenja, razumiju svrhu ovih elemenata i 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 dovršene praznine (spremnici), za umetanje kojih trebate samo upotrijebiti željenu oznaku s potrebnim atributima i parametrima.

Sami preglednici znaju kako prikazati ovaj ili onaj 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 ispunjavanjem polja, nakon klika na gumb Pošalji podatke, pokrenut će zadani program za poštu koji se koristi na njegovom računalu.

Oznaka obrasca za otvaranje u ovom bi slučaju trebala izgledati otprilike ovako:

Odaberite i Option - oznake padajućeg popisa

Svi elementi web obrasca koji stvaraju polja padajućeg popisa formiraju se na isti način. Prvo se postavlja spremnik kombiniranog okvira pomoću oznake za otvaranje i zatvaranje Html Select. Zatim se unutar ovog spremnika kreiraju zasebni spremnici sa stavkama (elementima) ovog popisa. To se radi pomoću otvarajućih i zatvarajućih Option oznaka.

Ispada ovako nešto:

Ali ovo je pojednostavljeni dizajn, jer Select i Option imaju niz atributa, koji definiraju svojstva i izgled kreiranog polja padajuće liste.

1. Naziv - morate navesti jedinstveni naziv za ovaj element web obrasca kreiran pomoću Odaberi. Ovo će ime biti proslijeđeno poslužitelju programu za obradu podataka kao ime za varijablu. Vrijednost ove varijable bit će vrijednost atributa Value (postavljenog u Opciji za svaku stavku) stavke padajućeg popisa koju korisnik odabere.
2. Veličina—možete je koristiti za postavljanje broja prikazanih stavki. Drugim riječima, pomoću veličine možete postaviti visinu popisa, mjerenu u broju prikazanih redaka. Ako izričito ne navedete vrijednost veličine u oznaci Odaberi, koristit će se zadana visina padajućeg popisa, a bit će drugačije ako atribut Odabir nije prisutan ili je prisutan u atributu 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. Prikazat će se sve stavke padajućeg popisa s višestrukim odabirom. Pogledajte primjer množine u nastavku. Ako je atribut Veličina u Odaberi postavljen na manje od broja stavki, s desne strane će se pojaviti traka za pomicanje.
   2. Ako Više nema u Odaberi, tada će visina padajućeg popisa u web obrascu prema zadanim postavkama biti jednaka jednom retku. Oni. Samo će jedna linija biti vidljiva, a preostalim će se stavkama pristupiti samo pritiskom na tipku dizala (desno). Pogledajte primjer u nastavku
3. Višestruko - dodjeljivanje ovog atributa oznaci Odaberi omogućit će vam stvaranje padajućeg popisa s mogućnošću odabira nekoliko 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 možete odabrati samo jedan element (redak) polja s padajuće liste; u drugoj opciji, držeći Ctrl ili Shift možete istovremeno odabrati nekoliko dostupnih stavki.

U tom slučaju, u drugoj opciji, podaci o svim odabranim stavkama 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 Jednostavno se napiše Multiple i to je to. Ako je prisutan, stvorit će se web-obrazac s padajućim popisom s višestrukim mogućnostima odabira (držanje Ctrl ili Shift).

Varijanta polja s padajućom listom u kojoj ć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 nekoliko stavki u isto vrijeme.

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

Primjer u kojem možete odabrati samo jednu stavku možete vidjeti ovdje:

Oznaka Odaberite SelectED mjesto Legenda

Atributi oznake opcije

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

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

Na primjer ovako:

Odabir oznake
SelectED web mjesto Legenda

Textarea - kreiranje tekstualnog polja na obrascu

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

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

Što nam možete reći o sebi?

Kao što vidite, klik na tekst za aktiviranje ovog elementa je beskoristan - morate kliknuti na njega samog. To je upravo stanje stvari za koje je oznaka Label dizajnirana da ispravi. Omogućuje vam da tekst pored elementa web obrasca učinite klikabilnim, što nedvojbeno jest poboljšat će upotrebljivost.

Ali kako spojiti Html element forme i tekst? Da biste to učinili, atributu morate dodati ID s jedinstvenim parametrom, a tekst treba biti okružen otvarajućim i zatvarajućim oznakama Label. I to nije sve. U početnu oznaku Label morate uključiti atribut For, čiji parametar mora biti potpuno isti kao onaj ID atributa 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 samu nju, već i klikom na tekst koji se nalazi pored nje.

Fieldset i Legend - razbijanje forme na dijelove

Vjerojatno ste često vidjeli da su veliki obrasci u Html-u podijeljeni u grupe (Fieldset), koje su okružene okvirom i svaka takva grupa ima svoj naslov (Legenda). Ovo se implementira pomoću samo dvije oznake: Fieldset i Legend. Oni su upareni, tj. Moraju imati otvor i otvor za zatvaranje.

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 koja se sastoji od 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

Moglo bi vas zanimati

Select, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih popisa i tekstualnih polja
Popisi u Html kodu - UL, OL, LI i DL oznake
MailTo - što je to i kako napraviti link u HTML-u za slanje e-pošte
Kako su postavljene boje u Html i CSS kodu, izbor RGB nijansi u tablicama, Yandex izlaz i drugi programi
Što je hipertekstualni označni jezik Html i kako vidjeti popis svih oznaka u W3C validatoru
Kako ubaciti link i sliku (fotografiju) u HTML - IMG i A tagovi
Tablice u HTML-u - Table, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo stvaranje
Font (lice, veličina i boja), Blockquote i Pre oznake - staro oblikovanje teksta u čistom HTML-u (ne koristi se CSS)
Kako napraviti hipervezu (A, Href, Target blank), kako je otvoriti u novom prozoru na stranici, a također napraviti sliku poveznicom u Html kodu

Padajući popis u HTML-u može se stvoriti pomoću oznake Izaberi. Osim padajućeg (ili "padajućeg") popisa, oznaka Izaberi omogućuje stvaranje stavke popisa s višestrukim odabirom. Sintaksa upotrebe oznake Izaberi HTML izgleda ovako:

Elektronik Syroezhkin Čižikov Kukuškina

Ovdje se koristi oznaka opcija navedeni su elementi liste.

Rezultat primjene:

Elektronika Syroezhkin Chizhikov Kukushkina

SELECT atribute oznake

Pogledajmo atribute oznake Izaberi:

• Ime
• veličina- broj prikazanih redaka u listi (broj);
• višestruki- omogućuje funkciju višestrukog odabira elemenata padajuće liste;
• onemogućeno- blokira pristup elementu;
• oblik- omogućuje vezanje padajućeg popisa na obrazac (može biti potrebno ako je sam popis izvan obrasca na koji bi trebao biti povezan). ID obrasca prosljeđuje se kao argument.

Možda su to svi glavni atributi oznake Izaberi koji se najčešće koriste. Pogledajmo sada kako napraviti padajući popis u HTML-u koristeći navedene atribute:

Atributi oznake OPTION

Označiti opcija, kao što je već navedeno, omogućuje definiranje djece padajućeg popisa Izaberi, koji zauzvrat igra ulogu spremnika. Označiti opcija ima svoje atribute:

• onemogućeno- postavlja zabranu odabira zadanog elementa liste;
• označiti- omogućuje postavljanje oznake za trenutni element popisa (umjesto teksta navedenog u oznaci, prikazuje se vrijednost oznake, što vam omogućuje prikaz skraćene vrijednosti); Napomena: ovaj atribut nije podržan u Firefoxu.
• odabran- trenutna stavka popisa bit će odabrana prema zadanim postavkama;
• vrijednost- vrijednost koja će se prenijeti na poslužitelj;

Pogledajmo napredni slučaj upotrebe oznake opcija:

Gospodin Electronic Syroezhkin Čižikov Kukuškina

Rezultat gornjeg primjera izgledat će ovako:

g. Elektronika Syroezhkin Chizhikov Kukushkina

Alat za izradu web stranica Nubex omogućuje vam stvaranje prilagođenih obrazaca pomoću modula za izradu obrazaca. Rad padajućih popisa u Nubexu opisan je u članku: