Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Windows 8
  • O oblicima i njihovim elementima. Web obrasci i njihovi elementi: vrste i namjena

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

12.04.2019 Windows 8

Jedna opcija za obradu obrasca može biti slanje podataka e-poštom:

action="mailto:[email protected]"

Pomoću atributa metode možete postaviti protokol za slanje podataka na poslužitelj. GET protokol koristi se prema zadanim postavkama, ali u većini slučajeva ne zadovoljava programere, pa se češće koristi POST protokol.

Enctype atribut vam omogućuje da odredite kako je sadržaj obrasca kodiran.

Obrazac je ispunjen različite korisnike, tako da za njega postoji atribut koji vam omogućuje da definirate popis valjanih kodiranja:

accept-charset="popis znakova"

Također možete definirati popis valjanih tipova podataka:

accept="popis vrsta podataka"

Većina obrazaca ima gumbe koji vam omogućuju brisanje obrasca ili njegovo slanje i slanje podataka.Za definiranje programa skripte koji bi se trebali izvršiti nakon navedenih radnji korisnika, postoje dva atributa događaja onsubmit i on reset.

Standardni atributi: id, class, lang, style, dir, title, target, atributi događaja

Ovaj element vam omogućuje stvaranje različitih dijelova obrasca, kao što su potvrdni okviri, radio gumbi, polja za unos. Element nema završnu oznaku jer su svi parametri navedeni pomoću atributa.

Vrsta elementa određena je atributom tipa:

Type="text" - kreiranje polja za unos u koje možete automatski staviti proizvoljan tekst pomoću atributa value;

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

Type="checkbox" - stvaranje okvira za potvrdu;

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

Prekidači

Označeni atribut određuje koji radio gumb treba odabrati

zadano. Na sl. Na slici 4.4 prikazan je izgled ove grupe prekidača.

sl.4.4. Promjena grupe

Type="button" - stvaranje prilagođenog gumba;

Type="submit" - kreiranje gumba čijim klikom potvrđujete unos podataka u obrazac. Atribut vrijednosti koristi se za definiranje oznake na gumbu;



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

Type="image" - stvaranje gumba sa slikom. Ukazati grafička datoteka koristi se atribut src. poravnati atribut Dizajniran za pozicioniranje gumba s uzorkom. Vrijednosti atributa već su spomenute nekoliko puta:

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

Type="f ile" - način odabira datoteke za prilaganje obrascu. Od korisnika se traži da upiše naziv datoteke u polje za unos. Osim toga, preglednik automatski stvara gumb Pregledaj pored polja za unos, što vam omogućuje pokretanje standardnog (za operacijski sustav) dijalog za odabir datoteke;

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

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

Atribut imena mora biti prisutan u svim elementima INPUT osim gumba za potvrdu i reset. Vrijednost ovog atributa određuje naziv polja obrasca, odnosno blok podataka koji se u to polje unosi. Program poslužitelja može odabrati potrebne podatke koristeći ovo ime.

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

Gore smo pokazali kako stvoriti grupu radio gumba pomoću provjerenog atributa. Ovaj se atribut može koristiti za potvrdne okvire na potpuno isti način. Njegova prisutnost označava da potvrdni okvir treba biti označen prema zadanim postavkama. Za razliku od radio gumba, istovremeno se može odabrati bilo koji broj potvrdnih okvira.

Atribut veličine omogućuje postavljanje duljine polja za unos. Duljina je izražena u znakovima, ali se ova vrijednost može dati samo približno. Za postavljanje određenog broja znakova u polje za unos morat ćete odabrati vrijednost atributa. U isto vrijeme, nitko ne može jamčiti da će svi preglednici pružiti potrebnu duljinu retka, a ne manje. Dakle, duljina polja za unos mora biti odabrana s rezervom.

Atribut maxlenght može se koristiti na dva načina. Prvo, definira maksimalna duljina niz 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 omogućuje vam stvaranje elementa koji se ne može uređivati.

Atribut usemap (pogledajte gornji odjeljak "Crteži i karte") može se koristiti ako se na obrascu stvara karta.

Baš kao u FORMI, u INPUT element možete navesti atribut prihvatiti.

Važeći opći atributi: accesskey, tabindex, readonly, disabled.

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

Pomoću elemenata 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 element ISINDEX (vidi sliku 4.3):

<Р>Linija za unos kriterija pretraživanja

Ovaj element je spremnik za druge elemente forme. Na primjer, možete kombinirati tekstualni okvir i polje za unos:

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

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

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

Obrazac je element stranice koji korisniku omogućuje slanje podataka poslužitelju. Primjer HTML obrasca je obrazac za autorizaciju na web stranici. Korisnik unese korisničko ime i lozinku, pritisne tipku, a ti se podaci šalju na poslužitelj i tamo obrađuju. Obrazac ni na koji način ne sudjeluje u obradi podataka, to radi program koji se nalazi na poslužitelju, a obrazac mu samo šalje podatke.

Budući da su obrasci povezani s radom poslužitelja, neke stvari možda još nisu jasne prilikom proučavanja ove teme. Ali još uvijek morate proučiti obrasce. U početku, jer pojedinačni elementi obrasca mogu postojati bez slanja na poslužitelj. A podaci u njima mogu se koristiti pri pokretanju raznih skripti. Drugo, ako se dalje razvijate u području izrade web stranica, tada ćete morati znati barem jedan poslužiteljski jezik, primjerice PHP. A kada ga naučite, morat ćete znati HTML kako vas ne bi ometao.

Izrada obrasca

HTML obrazac se kreira pomoću oznake . Sama ova oznaka ne prikazuje nikakva polja za unos, gumbe niti bilo što na stranici. Za to postoje i druge oznake. Oznaka kombinira ih u jedan obrazac i šalje podatke iz njih na poslužitelj.

Pogledajmo nekoliko važnih atributa oznake . Obrascu možete dati ime. To se radi pomoću atributa imena. Naziv obrasca mora biti jedinstven. Koristi se za pronalaženje obrasca prilikom pokretanja skripti.

Atribut akcije navodi datoteku koja se izvodi na poslužitelju i prima podatke iz obrasca. Vrijednost atributa je put do datoteke.

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

metoda="dobiti"

metoda="post"

Primjer HTML obrasca:

Unutar oznake

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

Označiti

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

Atribut imena je vrlo važan. Naziv elementa obrasca šalje se poslužitelju zajedno s vrijednošću. Podaci se šalju na poslužitelj u sljedećem obliku:

ime = vrijednost

Ako u navedenom primjeru korisnik unese Andrey u polje za unos, podaci će biti poslani na poslužitelj u obliku:

Ako elementu obrasca nije dodijeljeno ime, podaci iz tog elementa neće biti poslani na poslužitelj.

Označiti koristi se umjesto elementa kada trebate stvoriti velika tekstualna polja. Tekst prikazan kao izvorna vrijednost nalazi se unutar oznake. Dimenzije polja postavljaju se pomoću atributa cols - horizontalne dimenzije, rows - vertikalne dimenzije. Visina polja može se postaviti korištenjem svojstva height. Sve veličine izračunate su na temelju veličine jednog znaka u monospace fontu.

Tablica 4. Atributi oznake

7. Gumbi

Element stvara gumbe na koje se može kliknuti. Za razliku od stvorenih gumba ( , , , ), unutar elementa .

Gumbi omogućuju korisnicima slanje podataka u obrazac, brisanje sadržaja obrasca ili poduzimanje neke druge radnje. Možete stvoriti obrube, promijeniti pozadinu i poravnati tekst na gumbu.

Tablica 9. Atributi oznake
Atribut Značenje/Opis
autofokus Postavlja fokus na gumb kada se stranica učita.
onemogućeno Onemogućuje gumb, čineći ga nemogućim kliknuti.
oblik Označava jedan ili više obrazaca kojima ovaj gumb pripada. Vrijednost atributa je identifikator odgovarajućeg oblika.
formiranje Vrijednost atributa sadrži URL rukovatelja podacima obrasca koji se šalje kada se klikne gumb. Samo za tip gumba type="submit" . Nadjačava vrijednost atributa radnje navedenog za element
.
formenctype Postavlja vrstu kodiranja podataka obrasca prije slanja na poslužitelj kada se klikne gumb poput type="submit". Nadjačava vrijednost enctype atributa navedenog za element . Moguće vrijednosti:
application/x-www-form-urlencoded je zadana vrijednost. Svi znakovi bit će kodirani prije slanja.
multipart/form-data - znakovi nisu kodirani. Koristi se kada se datoteke učitavaju pomoću obrasca.
text/plain - znakovi nisu kodirani, a razmaci su zamijenjeni simbolom +.
metoda obrasca Atribut određuje metodu koju će preglednik koristiti za slanje obrasca. Nadjačava vrijednost atributa metode navedenog za element . Navedeno samo za gumbe tipa type="submit". Moguće vrijednosti:
get - podaci iz obrasca (par ime/vrijednost) dodaju se u url i šalju na poslužitelj. Ova metoda ima ograničenja u veličini poslanih podataka i nije prikladan za slanje lozinki i povjerljivih informacija.
post - podaci iz forme se dodaju kao http zahtjev. Metoda je pouzdanija i sigurnija od geta i nema ograničenja veličine.
formnovalidate Atribut navodi da se podaci obrasca ne bi trebali provjeravati nakon slanja. Navedeno samo za gumbe tipa type="submit".
formtarget Atribut određuje u kojem će se prozoru prikazati rezultat nakon podnošenja obrasca. Navedeno samo za gumbe tipa type="submit". Nadjačava vrijednost ciljanog atributa navedenog za element .
_blank - učitava odgovor u novi prozor/karticu
_self - učitava odgovor u isti prozor (zadano)
_parent - učitava odgovor u nadređeni okvir
_top - učitava odgovor na cijelom zaslonu
framename - učitava odgovor u okvir s navedenim nazivom.
Ime Postavlja naziv gumba, vrijednost atributa je tekst. Koristi se za povezivanje s podacima obrasca nakon što je obrazac predan ili za povezivanje s danim gumbom(ima) u JavaScriptu.
tip Definira tip gumba. Moguće vrijednosti:
gumb - gumb na koji se može kliknuti
reset — gumb za reset, vraća izvornu vrijednost
pošalji - gumb za slanje podataka obrasca.
vrijednost Postavlja zadanu vrijednost koja se šalje kada se pritisne gumb.

8. Potvrdni okviri i radio gumbi u obrascima

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

Potvrdni okviri, za razliku od radio gumba, mogu se postaviti na nekoliko u jednom obrascu. Ako je označeni atribut naveden za potvrdne okvire, tada će kad se stranica učita, potvrdni okviri na odgovarajućim poljima obrasca već biti odabrani.

Element

To je tekstualno polje od jednog reda (slika 1), fizička veličina koji se može postaviti pomoću atributa SIZE, a niz znakova koji je izvorno unesen u njega pomoću atributa VRIJEDNOST.

Riža. 1. Element forme TEKST

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

TYPE="PASSWORD"

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

Element koji je jednostavan oblik izbora, uzimajući jedno od dva stabilna stanja: “provjereno” - “nije provjereno” (slika 2).

Riža. 2. Element obrasca CHECKBOX

Ovaj element operira s takozvanim Boolean varijablama, odnosno varijablama od kojih svaka može poprimiti vrijednost “TRUE” ili “FALSE”. Svaki element obrasca CHECKBOX stvara logički par vrijednosti oblika "element_name-state" i prenosi ih na poslužitelj. Za postavljanje početnog stanja elementa (provjereno ili ne) koristite atribut CHECKED.

Primjer upotrebe:

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

Riža. 3. RADIO element forme

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

Korištenje radio gumba zahtijeva eksplicitnu naznaku vrijednosti atributa VRIJEDNOST; jedan od gumba mora biti označen atributom CHECKED.

Primjer upotrebe:

<Р АLIGN="СЕМТЕR">Molimo navedite svoju dob

Prikazuje običan gumb (Sl. 4), klik na koji vodi do neke radnje poslužitelja.

Riža. 4. Element forme BUTTON

Korištenjem atributa NAME, ovom elementu se dodjeljuje jedinstveno ime; atribut VALUE omogućuje promjenu oznake prikazane na gumbu.

Primjer upotrebe:

TYPE="POŠALJI"

Definira gumb, kada se klikne, podaci iz obrasca se prenose na poslužitelj Kao iu prethodnom slučaju, oznaka prikazana na gumbu određena je atributom VRIJEDNOST.

Primjer upotrebe:

Stvara gumb koji briše pogrešno ispunjen tekstualni obrazac. Parametri i vrijednosti ovog gumba ne šalju se na poslužitelj zajedno s drugim podacima obrasca. Primjer upotrebe:

TYPE="FILE"

Generira gumb na zaslonu, kada se klikne, Windows Explorer se pojavljuje na ekranu, omogućujući vam da priložite bilo koju datoteku s lokalnog računala korisnika podacima poslanim na poslužitelj. Ovaj se element koristi uglavnom u obrascima za slanje poruka e-pošte s poslužitelja za organiziranje privitaka, kao i za učitavanje slika na poslužitelj. Obično se pokraj gumba prikazuje malo tekstualno polje u koje se automatski upisuje naziv datoteke koja se šalje i put do nje na lokalnom disku.

Primjer upotrebe:

TYPE="IMAGE"

Stvara gumb za slanje sličan elementu SUBMIT, ali koristeći grafiku koju je izradio korisnik. Obično se koristi u slučajevima kada standardni sivi pravokutni gumb "ne odgovara" dizajnu stranice. URL 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 (vidi lekciju 5), uključujući ALIGN, ALT, itd. Atributi NAME i VALUE tretiraju se na isti način kao i slični atributi elementa SUBMIT.

Primjer upotrebe:

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

Koristi se za pohranu i prijenos informacija o Trenutna država forme: kada se pritisne tipka SUBMIT, element HIDDEN formirat će logički par varijable tipa"naziv-vrijednost", koji će biti poslan poslužitelju koristeći HTTP protokol. SKRIVENI elementi služe kao pristupačna alternativa kolačići - posebne datoteke, u kojem su pohranjeni pojedinačne postavke korisnika i omogućuje, na primjer, vraćanje zadnjeg stanja obrasca kada korisnik ponovno posjeti stranicu koja sadrži ovaj obrazac.

Primjer upotrebe:

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

Već ste upoznati s atributom NAME koji definira pojedinačni naziv svakog elementa obrasca. Atributi ROWS i COLS označavaju najveći dopušteni broj redaka teksta i znakova po retku. Ako tekst koji je unio korisnik ne stane u vidljivi dio spremnika teksta, okomite i vodoravne trake za pomicanje pojavljuju se na rubovima polja za pomicanje sadržaja elementa TEXTAREA.

Primjer upotrebe:

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

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

Atribut MULTIPLE definira mogućnost da korisnik označi ne jednu, već nekoliko stavki s predloženog popisa 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