18. Forme
Formulari, forme predstavljaju odličan alat za sakupljanje informacija od posetilaca web
sajta. Formulari dozvoljavaju korisnicima da pošalju komentare i pitanja, zatraže neku
informaciju, prijave se za Newsletter, popune Online aplikaciju ili unesu informacije za
plaćanje kako bi kupili neki proizvod.
Sami po sebi formulari ne pružaju nikakvu funkcionalnost, već samo neku vrstu šablona za
prikupljanje informacija. Kada korisnik popuni formular prikazan na sajtu, prikupljeni podaci
se prosleñuju skripti na drugoj strani koja će obaviti sav posao.
Koncept funkcionisanja formulara
Videćemo na primeru. Strana kontakt.html sadrži formular na kome korisnik unosi svoje
podatke i poruku. Pošto potvrdi formu, forma poziva kontakt_slanje.php stranu, na kojoj se
nalazi skripta i koja prikupljene podatke obrañuje i šalje e-mailom na podešenu adresu. Ovo
je samo jedan od primera, skripta može poslati e-mail, upisati/pročitati podatke iz baze ili
uraditi nešto treće što je definisano.
Svaka forma sadrži action atribut koji definiše kome će se proslediti podaci, kojoj strani i
skripti na njoj. U našem primeru je to bila strana kontakt_slanje.php.
Atribut method je takoñe obavezan i on definiše na koji način će podaci biti prosleñeni.
Postoje dve opcije:
•
•
GET metod - Podaci iz fome se ovom opcijom šalju na server kroz URL. Informacije
koje se prosleñuju na ovaj način su transparente i podložne napadima hakera. Pošto
URL može da ima maksimum 8.192 karaktera, ovaj metod nije podesan za duže
formulare. Takoñe, može doći do transliteracije ili transkripcije i neki karakteri se
mogu promeniti ili izgubiti.
POST metod - Ovaj metod pakuje podatke formulara unutar HTTP zahteva. Podaci
nisu šifrovani i stoga su (iako sigurniji nego u GET metodu) ipak podložni napadima
Copyright © Link group
hakera, tako da, ako sakupljamo personalne informacije kao što su korisnička imena,
lozinke ili brojevi kreditnih kartica, moramo osigurati bezbednu konekciju do
sigurnog servera.
U ovom kursu se nećemo baviti skriptama koje procesuiraju i obrañuju podatke iz
formulara, jer je to posebna oblast i spada u domen programiranja.
Kreiranje formulara
Da bismo kreirali formular u Dreamweaveru, postavićemo kursor na mesto gde želimo da ga
unesemo. Izabraćemo Insert > Form > Form iz padajućih menija. Drugi način je preko
Insert panela, izborom kategorije Form i klikom na Form dugme.
Kreiranje osnove formulara
Ukoliko je tom prilikom otvoren Design prikaz, Dreamweaver će uneti crvenu isprekidanu
liniju u obliku pravougaonika, a u Code prikazu sledeći kod:
Copyright © Link group
<form id="form1" name="form1" method="post" action="">
</form>
Ukoliko smo formu dodali dok je otvoren Code prikaz, pre samog postavljanja na stranu,
pojaviće se sledeći dijalog:
Podešavanja forme prilikom dodavanja u Code prikazu
U ovom dijalogu možemo uneti razna podešavanja pre postavljanja. Većinu opcija odavde
možemo naći u Properties Inspectoru, kada je forma selektovana u Design prikazu.
Ako već nismo, otvorićemo Design prikaz i izabrati našu formu klikom unutar nje, unutar
crvene isprekidane linije. Properties Inspector će postati kao na slici:
Podešavanja forme
•
•
•
•
Form ID - U ovom polju unosimo jedinstveno ime formulara. Preko ID vrednosti
možemo stilizovati formu, ali ID koristimo i kod programiranja skripti.
Action - U ovom polju unosimo ima skripte/stranice koja će procesirati formular.
Možemo ručno uneti ili locirati skriptu klikom na folder ikonicu desno od polja.
Target - Omogućava da odredište bude drugi prozor ili frame u odnosu na tekući. U
tom drugom okviru se prikazuje HTML strana koja se dobija nakon obrade podataka.
Method - Ovde biramo kojim metodom šaljemo serveru prikupljene podatke iz
formulara.
o Default - Ova opcija koristi difoltna podešavanja čitača da bi poslala
informacije sa formulara. Default metod je obično, ali ne i uvek, GET metod.
Preporučuje se postavljanje neke od druge dve vrednosti.
Copyright © Link group
GET - Podaci iz formulara se šalju GET metodom, kako smo pojasnili ranije.
POST - Podaci iz formulara se šalju POST metodom, kako smo pojasnili
ranije.
Enctype - Ovo polje je opciono i po default podešavanju je prazno. Kada imamo File
upload polje u formularu, izabraćemo Multipart/form-data tip.
Class – Definiše klasu formulara.
o
o
•
•
Unos elemenata forme
Osim prve opcije Form, Insert panel u Form kategoriji nudi mnošto opcija.
Insert panel, Forms kategorija
Text Field polje
Klikom na opciju Text Field opciju dodajemo input tekstualno polje (sve ove opcije možemo
naći i u padajućem meniju Insert > Forms).
Copyright © Link group
Input podešavanja
Ovaj dijalog koji vidite na slici iznad će biti prikazan uvek kada izaberemo neko input polje u
formularima, bilo da se radi o Text Field, Textarea, Checkbox i tako dalje.
ID – unosimo id vrednost polja
Label – Postavljamo tekst koji će biti vidljiv van polja i koji će dati korisniku
informaciju/uputstva za polje.
Style – Biramo način postavljanja label opcije.
• Attach label tag using ‘for’ attribute – Postavlja labelu u posebnom tagu i
povezuje sa poljem putem for atributa. Preporučen način jer možemo razdvojiti
fizički delove (labelu i polje) a da pri tom ostanu povezani.
• Wrap with label tag – Postavlja label tag oko polja. Tekst labele ide neposredno
pre polja.
• No label tag - Tekst labele postavlja neposredno pre polja. Ne postavlja tag.
Position – Postavlja labelu pre ili posle polja.
Access key – Opciono polje. Koristimo ukoliko želimo da definišemo tastaturnu prečicu za
polje. Na Windows sistemu i Internet Exploreru potrebno je pritisnuti Alt + accesskey, u
FireFoxu Alt + Shift + accesskey. Na većini Mac browsera je Cmd + accesskey.
Tab index – Opciono polje. Koristimo ga ukoliko želimo korigovati default tab redosled koji
kreira browser. Unošenjem brojeva za različita polja u formi možemo definisati redosled.
Pritiskom tastera Tab, korisnikov fokus će preči na polje sa narednom vrednošću. Možemo
Copyright © Link group
unositi 1,2,3,4.. ili 10,20,30,40.. Brojevi ne moraju biti zaredom, bitno je da su različiti i
veći od 0.
Ukoliko unesemo vrednosti kao sa slike iznad, dobićemo polje u formi koje će u dizajn
prikazu i browseru izgledati ovako:
Forma i jedno polje sa labelom u dizajn prikazu
Isti elementi u browseru
U Code prikazu, HTML kod će izgledati poput sledećeg:
<form action="kontakt_slanje.php" method="post" name="formaKontakt"
id="formaKontakt">
<label for="ime">Vaše ime:</label>
<input type="text" name="ime" id="ime" />
</form>
Primetićemo da je u kodu tag našeg polja <input>, a da je type atribut postavljen na text.
U formama različiti tipovi polja koriste isti tag, ali različit type atribut, kako ćemo videti u
nastavku.
Kada selektujemo naše input polje, Properties Inspector će prikazati moguća podešavanja:
Properties Inspector za input polje
•
•
•
•
•
TextField – ID vrednost koju smo uneli u dijalogu prilikom kreiranja polja.
Char width – Definišemo broj karaktera u polju. Preporučujem da izbegavate ovo
polje i da definišete putem CSS-a.
Max Chars - Definišemo maksimalan broj karaktera u polju.
Disabled – Možemo isključiti (Disable) polje i načiniti ga nedostupnim, ali vidljivim.
Read-only – Postavlja polje na read-only stanje. Sva interaktivnost je dostupna, ali
se ne može ništa upisati u polje.
Copyright © Link group
•
•
•
Init val – Postavlja default vrednost.
Class – Definiše klasu nad poljem.
Type – Biramo tip polja.
o Single line – Ovo polje je postavljeno pošto smo uneli Text Field na početku,
obično tekstualno polje.
o Multi line – Konvertuje obično tekstualno polje u tekstualno polje sa više
redova. Ukoliko postavimo ovu vrednost ranije pomenuta Max Char vrednost
postaje Num Lines, gde možemo podesiti broj redova. U tom slučaju, u
kodu, <input> tag se pretvara u <textarea>
o Password – Potpuno isto kao obično Single line tekstualno polje, osim što u
browseru prikazuje tačke ili zvezdice prilikom upisa, kako bi sakrilo šifru.
Atribut type postaje password umesto text.
Hidden polje
Hidden polje je, kao i prethodno, <input> tag. Koristimo ga kad želimo da postavimo neku
vrednost, a ona ne bi trebalo da bude vidljiva. Možemo uneti u startu ili se može učitati i
pomoću skripti. Na primer, možemo učitati iz baze id broj kupca koji je trenutno prijavljen
na sajtu, i taj broj proslediti kroz formular:
<input type="hidden" name="hdnCustId"
value="<?php echo $strCustomerId; ?>"/>
Text Area polje
Ovo polje je potpuno isto kao Text Field, sa tom razlikom da može sadržati više redova
teksta. Klikom na ovu opciju ista su podešavanja kao za Text Field.
Checkbox
Izborom ove opcije kreiramo takoñe <input> tag, samo što je atribut type postavljen na
checkbox. Ne postoji mogućnost unosa vrednosti, već polje može imati samo dve vrednosti
- checked ili unchecked. Sledi prikaz u kodu i u browseru:
<input type="checkbox" name="obavestenja" id="obavestenja" />
<label for="obavestenja">Da li želite da primate obaveštenja
emailom?</label>
Checkbox i labela u browseru
Po default vrednosti, labela se smešta iza polja kako bi sama kontrola bila levo, a tekst u
nastavku desno. U Properties Inspectoru možemo definisati default stanje (označeno ili ne) i
koju vrednost prosleñuje formular.
Copyright © Link group
Checkbox group
Izborom ove opcije pozivamo dijalog u kome možemo odmah kreirati više checkbox polja.
Checkbox Group dijalog
•
•
•
Name - Unosimo naziv grupe od koga će u nizu biti kreirane ID vrednosti za polja.
Checkboxes – U ovom središnjem delu kreiramo polja unosom Label vrednosti (za
labele koje se prikazuju korisniku) i Value vrednosti (koje korisnik ne vidi, ali se
prosleñuju kroz formular). Takoñe, opcijama +/- dodajemo/brišemo polja, a
strelicama gore/dole ureñujemo redosled.
Lay out using – Biramo da li će polja u grupi biti rasporeñena pomoću line break
vrednosti ili pomoću tabele.
Radio Button i Radio Group
Radio elementi su potpuno isti kao checkbox, sa jednom bitnom razlikom. Ukoliko se nalaze
više u grupi (i imaju isti name atribut), moguće je izabrati samo jedno polje. Ukoliko se
izabere drugo, prethodno se isključuje, što nije slučaj kod checkbox.
Select (List/Menu)
Ova opcija nam dozvoljava da kreiramo padajući meni ili listu za izbor. Početni dijalog je isti
kao za input polja, ali kreira <select> tag u koji se smešta po jedan <option> tag za svaku
ponuñenu vrednost.
Copyright © Link group
Podešavanja Select polja u Properties Inspectoru
•
•
Type – možemo izabrati tip polja, da li će biti u obliku padajućeg menija ili liste.
Ukoliko izaberemo List, možemo definisati visinu u polju Height, kao i dozvoliti
selektovanje više opcija istovremeno kroz Allow multiple.
List Values.. – Veoma bitna opcija, jer klikom na dugme otvaramo dijalog u kome
definišemo moguće vrednosti.
Podešavanja dozvoljenih vrednosti
Kod izgleda poput sledećeg:
<select name="pol" id="pol">
<option value="zenski">Ženski</option>
<option value="muski" selected="selected">Muški</option>
</select>
Copyright © Link group
Jump menu
Ova opcija je vrlo slična prethodnoj, sa tom razlikom da nam omogućava da se oizvrši akcija
posle selekcije.
Image Field
Ponaša se vrlo slično kao Submit dugme, o čemu ćemo pričati uskoro. Razlika je u tome što
se može postaviti slika umesto standardnog ili stilizovanog dugmeta.
File Field
Opcija koja kreira polje za postavljanje/upload fajlova. Takoñe je <input> tag, ali sa
atributom type podešenim na file.
File Field polje u Design prikazu
Iako neraskidiva celina (jedan input tag), vizuelno je predstavljeno iz dva dela. Vidimo polje
slično običnom tekst input polju i dugme browse, kojim korisnik poziva dijalog za izbor fajla.
Prilično je teško stilizovati ovo polje, a tekst Browse.. ne možemo promeniti.
Button
Kreira dugme forme. Postoje tri tipa:
•
•
•
Submit – Prosleñuje sve podatke forme skripti koju smo definisali putem action
atributa forme, na način koji smo definisali putem method atributa forme
(GET/POST). Drugim rečima, korisnik unosi podatke, ali tek kada izabere submit
opciju, formular čini ono za šta je namenjen, tj. prosleñuje podatke dalje.
Reset – Resetuje sva polja u formi u kojoj se nalazi što ponekad može prilično
iznervirati korisnika ako je slučajno izabrao ovu opciju umesto submit. Koristiti sa
oprezom.
None – Postavlja dugme koje samo po sebi nema nikakvu funkcionalnost. Obično se
postavlja JavaScript koji će izršiti neku radnju pošto se dugme aktivira.
Value vrednost u Properties Inspectoru definiše vidljiv tekst.
Copyright © Link group
Podešavanja za selektovano dugme u Properties Inspectoru
Label
Postavlja labelu, ali ne vezuje za odreñeno polje putem for atributa, kako smo pomenuli
ranije. Postavlja kod:
<label>Nova labela</label>
Fieldset
Pomoću Fieldset opcije možemo grupisati odreñena polja. Na primer, možemo imati u
formularu grupe za opšte informacije, informacije o plaćanju i tako dalje. Kreira <fieldset>
tag u koji smeštamo sva polja koja želimo da grupišemo, i <legend> na samom početku
grupe, a koji sadrži naziv. Sam naziv pluta na liniji koja okružuje grupu. Kod izgleda poput
sledećeg:
<fieldset><legend>Opšte informacije</legend>
.....
</fieldset>
U browseru, fieldset koji okružuje dva tekstualna polja izgleda poput slike:
Fieldset i dva text field polja
Spry validacija
Poslednjih sedam opcija se odnosi na Spry validaciju. Pojavljuju nam se dva nova termina
koja do sada nismo upoznali – spry i validacija.
Copyright © Link group
Spry opcijama ćemo se baviti u nekoj od narednih lekcija, za sada je bitno da znamo da je
to JavaScript koji će nam DW sam kreirati po potrebi.
Validacija (u ovom kontekstu) je proces u kome se proverava da li je forma pravilno
popunjena od strane korisnika. Na primer, možemo proveriti da li je korisnik uneo obavezna
polja, da li je potvrdio checkbox u kome se slaže sa pravilima korišćenja, da li je uneo email adresu u pravilnoj formi i tako dalje. Validacija može biti client-side ili server-side.
Client side znači da se vrši u browseru korisnika I, tek ako je sve ok, prosleñuje skripti na
dalju obradu. Server side validacija prosleñuje formu, odnosno njene podatke odmah
skripti, koja tek onda validira formu.
Ovih poslednjih sedam opcija su ponovljena polja o kojima smo pričali, ali uz dodatak
validacije. Sve su client-side. Možemo uneti, na primer, Text Field polje i podesiti da
prihvata samo datume u obliku dd/mm/gggg (dan/mesec/godina).
Copyright © Link group
Download

7.18 Forme.pdf