Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 8
  • O formama i njihovim elementima. Web obrasci i njihovi elementi: vrste i namjena

O formama i njihovim elementima. Web obrasci i njihovi elementi: vrste i namjena

12.04.2019 Windows 8

Jedna od opcija za obradu obrasca može biti slanje podataka putem e-pošte:

action="mailto:[email protected]"

Koristeći atribut method, možete postaviti protokol za slanje podataka na server. GET protokol se koristi po defaultu, ali u većini slučajeva ne zadovoljava programere, pa se češće koristi POST protokol.

Atribut enctype vam omogućava da odredite kako je sadržaj obrasca kodiran.

Obrazac je popunjen različitih korisnika, tako da postoji atribut za njega koji vam omogućava da definirate listu važećih kodiranja:

accept-charset="lista skupova znakova"

Također možete definirati listu važećih tipova podataka:

prihvati = "lista tipova podataka"

Većina obrazaca ima dugmad koja vam omogućavaju da obrišete obrazac ili da ga pošaljete i pošaljete podatke.Da biste definisali skripte koji bi trebalo da se izvrše nakon određenih radnji korisnika, postoje dva atributa događaja pri slanju i pri resetovanju.

Standardni atributi: id, klasa, jezik, stil, dir, naslov, cilj, atributi događaja

Ovaj element vam omogućava da kreirate različite dijelove obrasca, kao što su okviri za potvrdu, radio dugmad, polja za unos. Element nema završnu oznaku, budući da su svi parametri specificirani pomoću atributa.

Tip elementa je određen atributom tipa:

Type="text" - kreiranje polja za unos u koje možete automatski postaviti proizvoljan tekst koristeći atribut value;

Type="password" - kreiranje polja za unos lozinke, a uneseni podaci se prikazuju kao zvjezdice;

Type="checkbox" - kreiranje polja za potvrdu;

Type="radio" - definicija jednog radio dugmeta. Da biste kreirali grupu radio dugmadi, morate koristiti više elemenata INPUT. Evo primjera grupe od tri radio dugmeta:

Prekidači

Provjereni atribut određuje po kojem radio dugmetu treba biti odabrano

default. Na sl. Slika 4.4 prikazuje izgled ove grupe prekidača.

Sl.4.4. Promijeni grupu

Type="button" - kreiranje prilagođenog dugmeta;

Type="submit" - kreiranje dugmeta, klikom na koji se potvrđuje unos podataka u formular. Atribut value se koristi za definiranje oznake na gumbu;



Type="reset" - također dugme, ali za poništavanje unosa podataka u obrazac;

Type="image" - kreiranje dugmeta sa slikom. Da ukaže grafički fajl koristi se atribut src. align atribut Dizajniran za pozicioniranje dugmeta sa uzorkom. Vrijednosti atributa su već spomenute nekoliko puta:

dolje, lijevo, srednje, desno, gore. Koristite ovaj atribut u u ovom slučaju Ne preporučujem ga jer ga ne podržavaju svi pretraživači;

Type="f ile" - način odabira datoteke za prilaganje obrascu. Od korisnika se traži da upiše ime datoteke u polje za unos. Pored toga, pretraživač automatski kreira dugme Pregledaj pored polja za unos, što vam omogućava da pokrenete standard (za operativni sistem) dijalog za odabir datoteke;

Type="hidden" - element skriven od korisnika. Takvi elementi se koriste za uključivanje nekih fiksnih informacija u skup podataka obrasca. U suštini, ovo je definiranje imena varijable i njene vrijednosti.

Preostali atributi su potrebni za definiranje svojstava elementa. Mnogi od njih su potrebni jer pružaju obradu podataka obrasca na strani servera.

Atribut name mora biti prisutan u svim elementima INPUT osim u tipkama za potvrdu i reset. Vrijednost ovog atributa specificira naziv polja obrasca, odnosno bloka podataka unesenih u to polje. Serverski program može odabrati potrebne podatke koristeći ovo ime.

Već znamo opseg atributa vrijednosti. Vrijednost atributa specificira zadanu vrijednost za polje za unos ili određuje oznaku na gumbu.

Iznad smo pokazali kako kreirati grupu radio dugmadi koristeći checked atribut. Ovaj atribut se može koristiti za potvrdne okvire na potpuno isti način. Njegovo prisustvo ukazuje na to da polje za potvrdu treba da bude označeno podrazumevano. Za razliku od radio dugmadi, bilo koji broj okvira za potvrdu može se odabrati istovremeno.

Atribut size vam omogućava da postavite dužinu polja za unos. Dužina je izražena u znakovima, ali ova vrijednost se može dati samo približno. Da biste postavili određeni broj znakova u polje za unos, morat ćete odabrati vrijednost atributa. Istovremeno, niko ne može garantovati da će svi pretraživači obezbediti potrebnu dužinu reda, a ne manje. Dakle, dužina polja za unos mora biti odabrana sa rezervom.

Atribut maxlenght se može koristiti na dva načina. Prvo, definiše maksimalna dužina string koji se može upisati u polje za unos. Drugo, može se koristiti za ograničavanje veličine datoteke priložene obrascu.

Atribut samo za čitanje vam omogućava da kreirate element koji se ne može uređivati.

Atribut usemap (pogledajte odjeljak "Crteži i karte" iznad) se može koristiti ako se mapa kreira na obrascu.

Baš kao u FORMU, u INPUT element možete specificirati atribut accept.

Važeći opći atributi: pristupni ključ, tabindex, samo za čitanje, onemogućen.

Standardni atributi: id, klasa, jezik, naslov, dir, stil, atributi događaja.

Koristeći elemente FORM i INPUT, možete kreirati objekt koji će zamijeniti sličan objekt kreiran iz elementa ISINDEX. Sljedeći kod obavlja iste funkcije kao kod za ISINDEX element (vidi sliku 4.3):

<Р>Red za unos kriterijuma pretrage

Ovaj element je kontejner za druge elemente obrasca. Na primjer, možete kombinirati okvir za tekst i polje za unos:

Ako su element LABEL i drugi element odvojeni, koristi se atribut for čija vrijednost mora odgovarati vrijednosti id atributa odgovarajućeg elementa:

Za svaki element LABEL kreira se jedan element obrasca. Ponekad je zgodno rasporediti elemente po ćelijama tabele, čime se osigurava poravnavanje podataka u obrascu.

Standardni atributi: pristupni ključ, id, klasa, jezik, dir, naslov, stil, atributi događaja.

Obrazac je element stranice koji omogućava korisniku da pošalje podatke na server. Primjer HTML obrasca je formular za autorizaciju na web stranici. Korisnik unese korisničko ime i lozinku, pritisne dugme i ovi podaci se šalju na server i tamo obrađuju. Obrazac ni na koji način ne učestvuje u obradi podataka, to radi program koji se nalazi na serveru, a obrazac mu samo šalje podatke.

Budući da su obrasci vezani za rad servera, neke stvari možda još nisu jasne prilikom proučavanja ove teme. Ali još uvijek morate proučiti obrasce. U početku, zato što pojedinačni elementi forme mogu postojati bez slanja na server. A podaci u njima mogu se koristiti prilikom pokretanja raznih skripti. Drugo, ako se dalje razvijate u oblasti kreiranja web stranica, tada ćete morati znati barem jedan jezik na strani servera, na primjer PHP. A kada ga naučite, moraćete da znate HTML kako vas on ne bi ometao.

Kreiranje obrasca

HTML obrazac se kreira pomoću oznake . Ova oznaka sama po sebi ne prikazuje nikakva polja za unos, dugmad ili bilo šta na stranici. Postoje i druge oznake za ovo. Oznaka kombinuje ih u jedan oblik i šalje podatke sa njih na server.

Pogledajmo nekoliko važnih atributa oznake . Obrascu možete dati ime. Ovo se radi pomoću atributa name. Ime obrasca mora biti jedinstveno. Koristi se za pronalaženje forme prilikom pokretanja skripti.

Atribut akcije specificira datoteku koja se pokreće na serveru i prima podatke iz obrasca. Vrijednost atributa je putanja do datoteke.

Atribut method postavlja metodu zahtjeva. Može uzeti vrijednosti:

method="dobi"

method="post"

Primjer HTML obrasca:

Unutar oznake

postavljaju se elementi forme. Elementi obrasca su različita polja za unos, dugmad i drugi načini na koje korisnik unosi informacije. Za kreiranje elemenata forme koriste se različite oznake. Pogledajmo ih detaljno.

Tag

Tag može se pojaviti drugačije na stranici ovisno o vrsti. Takođe može kreirati različita polja za unos. Tipovi oznaka dosta, pa se o tome govori u posebnoj temi. Za sada ćemo ga kreirati na stranici kao primjer. Dodajmo ga unutar oznake .

Atribut imena je veoma važan. Ime elementa obrasca šalje se serveru zajedno sa vrijednošću. Podaci se šalju na server u sljedećem obliku:

ime = vrijednost

Ako u datom primjeru korisnik unese Andrey u polje za unos, podaci će se poslati na server u obliku:

Ako elementu obrasca nije dato ime, tada podaci iz ovog elementa neće biti poslani na server.

Tag koristi se umjesto elementa kada trebate kreirati velika tekstualna polja. Tekst prikazan kao originalna vrijednost nalazi se unutar oznake. Dimenzije polja se postavljaju pomoću atributa cols - horizontalne dimenzije, redovi - vertikalne dimenzije. Visina polja se može postaviti pomoću svojstva visine. Sve veličine se izračunavaju na osnovu veličine jednog znaka u jednorazrednom fontu.

Tabela 4. Atributi oznake

7. Dugmad

Element kreira dugmad na koja se može kliknuti. Za razliku od kreiranih dugmadi ( , , , ), unutar elementa .

Dugmad omogućavaju korisnicima da predaju podatke u obrazac, obrišu sadržaj obrasca ili poduzmu neku drugu radnju. Možete kreirati ivice, promijeniti pozadinu i poravnati tekst na gumbu.

Tabela 9. Atributi oznake
Atribut Značenje/Opis
autofokus Postavlja fokus na dugme kada se stranica učita.
onemogućeno Onemogućuje dugme, čime se ne može kliknuti.
formu Označava jedan ili više oblika kojima ovo dugme pripada. Vrijednost atributa je identifikator odgovarajućeg obrasca.
formiranje Vrijednost atributa sadrži URL rukovatelja podacima obrasca koji se šalje kada se klikne na dugme. Samo za tipku tipke="pošalji" . Nadjačava vrijednost atributa akcije specificiranog za element
.
formenctype Postavlja tip kodiranja podataka obrasca prije slanja na server kada se klikne tipke poput type="submit". Nadjačava vrijednost atributa enctype specificiranog za element . Moguće vrijednosti:
application/x-www-form-urlencoded je zadana vrijednost. Svi znakovi će biti kodirani prije slanja.
multipart/form-data - znakovi nisu kodirani. Koristi se kada se fajlovi učitavaju pomoću obrasca.
text/plain - znakovi nisu kodirani, a razmaci se zamjenjuju simbolom +.
formmethod Atribut specificira metodu koju će pretraživač koristiti za slanje obrasca. Nadjačava vrijednost atributa metode specificiranog za element . Određeno samo za dugmad tipa type="submit". Moguće vrijednosti:
get - podaci iz obrasca (par ime/vrijednost) se dodaju u URL i šalju na server. Ova metoda ima ograničenja u pogledu veličine poslanih podataka i nije prikladan za slanje lozinki i povjerljivih informacija.
post - podaci iz obrasca se dodaju kao http zahtjev. Metoda je pouzdanija i sigurnija od get i nema ograničenja u veličini.
formnovalidate Atribut specificira da se podaci obrasca ne trebaju provjeravati nakon podnošenja. Određeno samo za dugmad tipa type="submit".
formtarget Atribut određuje u kojem prozoru će se prikazati rezultat nakon slanja obrasca. Određeno samo za dugmad tipa type="submit". Nadjačava vrijednost ciljnog atributa specificiranog za element .
_blank - učitava odgovor u novi prozor/karticu
_self - učitava odgovor u isti prozor (podrazumevano)
_parent - učitava odgovor u roditeljski okvir
_top - učitava odgovor na cijelom ekranu
framename - učitava odgovor u okvir sa navedenim imenom.
ime Postavlja ime dugmeta, vrednost atributa je tekst. Koristi se za povezivanje sa podacima obrasca nakon slanja obrasca ili za povezivanje sa datim dugmetom(ima) u JavaScript-u.
tip Definira tip gumba. Moguće vrijednosti:
dugme - dugme na koje se može kliknuti
reset — dugme za resetovanje, vraća originalnu vrednost
submit - dugme za slanje podataka obrasca.
vrijednost Postavlja zadanu vrijednost koja se šalje kada se klikne na dugme.

8. Polje za potvrdu i radio dugmad u obrascima

Potvrdni okviri u obrascima se postavljaju pomoću konstrukcije , a prekidač - koristeći .

Polje za potvrdu, za razliku od radio dugmadi, može se postaviti na nekoliko u jednom obliku. Ako je označeni atribut naveden za potvrdne okvire, onda kada se stranica učita, potvrdni okviri na odgovarajućim poljima obrasca će već biti odabrani.

Element

To je tekstualno polje u jednom redu (slika 1), fizička veličina koji se može postaviti pomoću atributa SIZE, a niz znakova koji je originalno unesen u njega pomoću atributa VALUE.

Rice. 1. Element obrasca TEXT

Primjer korištenja ovog elementa u HTML kodu je sljedeći red:

TYPE="PASSWORD"

Tip potpuno sličan prethodnom, osim što će informacije koje korisnik unese u tekstualno polje biti prikazane na ekranu sa simbolima “*” kako bi se tekst sakrio od vanjskog posmatrača.

Element koji je jednostavan oblik izbora, koji uzima jedno od dva stabilna stanja: “provjereno” – “nije provjereno” (slika 2).

Rice. 2. CHECKBOX element obrasca

Ovaj element radi sa takozvanim Booleovim varijablama, odnosno varijablama, od kojih svaka može imati vrijednost “TRUE” ili “FALSE”. Svaki element obrasca CHECKBOX kreira logički par vrijednosti oblika "element_name-state" i prenosi ih na server. Da biste postavili početno stanje elementa (potvrđeno ili ne), koristite atribut CHECKED.

Primjer upotrebe:

Takozvani radio dugme (slika 3) koristi se u slučaju kada logička varijabla može uzeti samo jednu vrijednost od mnogo mogućih.

Rice. 3. RADIO element forme

Svi RADIO elementi istog oblika označeni su istom vrijednošću atributa NAME.

Korištenje radio dugmadi zahtijeva eksplicitnu naznaku vrijednosti atributa VRIJEDNOST; jedno od dugmadi mora biti označeno atributom CHECKED.

Primjer upotrebe:

<Р АLIGN="СЕМТЕR">Molimo navedite svoje godine

Prikazuje obično dugme (slika 4), klikom na koje vodi do neke radnje servera.

Rice. 4. BUTTON element forme

Koristeći atribut NAME, ovom elementu se dodjeljuje jedinstveno ime; atribut VALUE vam omogućava da promijenite oznaku prikazanu na gumbu.

Primjer upotrebe:

TYPE="SUBMIT"

Definira dugme, kada se klikne, podaci iz obrasca se prenose na server.Kao i u prethodnom slučaju, oznaka prikazana na dugmetu je određena atributom VALUE.

Primjer upotrebe:

Kreira dugme koje briše neispravno popunjen tekstualni obrazac. Parametri i vrijednosti ovog dugmeta se ne šalju serveru zajedno sa drugim podacima obrasca. Primjer upotrebe:

TYPE="FILE"

Generiše dugme na ekranu, kada se klikne, Windows Explorer se pojavljuje na ekranu, omogućavajući vam da priložite bilo koju datoteku sa lokalnog računara korisnika podacima koji se šalju na server. Ovaj element se uglavnom koristi u obrascima za slanje e-mail poruka sa servera za organizovanje priloga, kao i za postavljanje slika na server. Obično se pored dugmeta prikazuje malo tekstualno polje u koje se automatski unosi naziv datoteke koja se šalje i putanja do nje na lokalnom disku.

Primjer upotrebe:

TYPE="IMAGE"

Kreira dugme za slanje slično elementu SUBMIT, ali koristeći grafiku koju je kreirao korisnik. Obično se koristi u slučajevima kada se standardni sivi pravougaoni taster „ne uklapa“ u dizajn sajta. URL do slike koja djeluje kao gumb označen je atributom SRC, a sam element može sadržavati vlastite atribute slične onima koji se koriste u oznaci (pogledajte lekciju 5), uključujući ALIGN, ALT, itd. Atributi NAME i VALUE se tretiraju na isti način kao i slični atributi elementa SUBMIT.

Primjer upotrebe:

Ovaj element je skriven i ne prikazuje se na ekranu monitora korisnika.

Koristi se za pohranjivanje i prijenos informacija o trenutna drzava forme: kada se pritisne dugme SUBMIT, HIDDEN element će formirati logički par varijable tipa"ime-vrijednost", koja će biti poslana na server koristeći HTTP protokol. HIDDEN elementi služe kao pristupačna alternativa kolačići - specijalni fajlovi, u kojoj su pohranjeni individualne postavke korisnik i omogućavajući, na primjer, vraćanje posljednjeg stanja obrasca kada korisnik ponovno posjeti stranicu koja sadrži ovaj obrazac.

Primjer upotrebe:

Međutim, korištenjem oznake Nije moguće prenijeti sve dostupne elemente obrasca web dizajneru. Na primjer, tekstualna polja određena atributima TEXT i PASSWORD su vrlo ograničena u broju znakova koji se mogu unijeti u ta polja. Ako se webmaster suoči sa zadatkom kreiranja takvog tekstualna polja kako bi korisnik mogao unijeti veliki broj znakova, koristi se nezavisna oznaka

Već ste upoznati sa atributom NAME, koji definira pojedinačno ime svakog elementa forme. Atributi ROWS i COLS označavaju, redom, maksimalni dozvoljeni broj redova unosnog teksta i znakova po redu. Ako se tekst koji je unio korisnik ne uklapa u vidljivi dio tekstualnog spremnika, na rubovima polja pojavljuju se okomite i horizontalne trake za pomicanje za pomicanje sadržaja elementa TEXTAREA.

Primjer upotrebe:

Za kreiranje izbornika za odabir u formi (slika 6), webmaster može koristiti oznaku

OPTION VALUE="Stavka N">Пункт N!}

Atribut MULTIPLE definira mogućnost korisnika da označi ne jednu, već nekoliko stavki s predložene liste odjednom. Ako je ovaj atribut postavljen, možete koristiti atribut SIZE, koji određuje broj pozicija vidljivih na ekranu u isto vrijeme.

Primjer upotrebe:

<Р АLIGN ="CENTER">Molimo navedite svoj grad