dwcc_21-4585214

Copyright © Link group

21. 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 neki 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.

slika 21.1 - primer rada formi 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 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.

slika 21.2 - dodavanje forme Ukoliko je tom prilikom otvoren Design prikaz, Dreamweaver će uneti crvenu isprekidanu liniju u obliku pravougaonika, a u Code prikazu sledeći kod: <form id="form1" name="form1" method="post"> </form> Ukoliko smo formu dodali dok je otvoren Code prikaz, dobićemo nešto drugačiji kod, odnosno samo:


<form></form> Dreamweaver je u design prikazu uneo za nas atribute koji bi trebali da se nađu na form tagu, dok u code prikazu, očigledno podrazumeva da ćemo ih sami uneti. U oba slučaja, ukoliko selektujemo formu, bilo kroz code ili design prikaz, properties inspector će dobiti sledeći oblik:

slika 21.3 - properties inspector panel - selektovan form tag Na slici su označene sledeće opcije:

A. U ovom polju unosimo jedinstveno ime formulara (ID vrednost). Preko ID vrednosti možemo stilizovati formu, ali ID koristimo i kod programiranja skripti. B. Ovo polje postavlja CLASS vrednost, klasu forme. Koristimo za stilizaciju CSS-om. C. Method - Ovde biramo kojim metodom šaljemo serveru prikupljene podatke iz formulara.

○ Default - Ova opcija koristi podrazumevana podešavanja browsera 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. ○ GET - Podaci iz formulara se šalju GET metodom. ○ POST - Podaci iz formulara se šalju POST metodom.

D. 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. E. Postavlja title atribut forme. Retko kad se koristi. F. No validate opcija, koja ukoliko je štiklirana određuje da se ne vrši validacija forme prilikom prosleđivanja. Novina u HTML5. G. Auto Complete opcija. Po default podešavanjima je uključena. Dozvoljava browserima da pretpostave i ponude vrednosti polja na osnovu ranijih unosa i istorije. Novina u HTML5. H. Ovo polje je opciono. Kada imamo File upload polje u formularu, izabraćemo Multipart/form-data tip. I. Kao i kod linkova, 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 (i pošto korisnik prosledi formu). J. U ovom padajućem meniju određujemo encoding za podatke forme. Možemo ostaviti kako jeste.


Ukoliko Vam ova podešavanja deluju zbunjujuće, na brinite. Kasnije, kada budete ovladali JavaScript jezikom i/ili PHP-om i kada budete pisali/primenjivali skripte, mnogo toga će biti jasnije. Za sada ćemo se skoncetrisati na vizuelnu stranu sajta, odnosno formi u ovom slučaju.

Unos elemenata forme Osim prve opcije Form, Insert panel u Form kategoriji nudi mnoštvo opcija. Mnogo više elemenata (kontrola) možemo postaviti u verziji CC (koja podržava sve ili skoro sve HTML5 elemente) nego u ranijim verzijama Dw.

slika 21.4 - Insert panel u obliku insert toolbara, form kategorija

Zapamtite: Prvo smo uneli form tag, a onda zatim unosimo same elemente, kontrole forme, kao što su polja za tekst, check i radio polja i tako dalje. Njih ćemo upoznati u nastavku. Svi ti elementi moraju biti unutar form taga, nikako van njega. I pored toga, jedna forma = jedan form tag. Ukoliko postavite više form tagova, to će biti nezavisne forme.

Input polje Pošto smo uneli form tag na stranicu, upoznaćemo se sa elementima, poljima koja su dostupna. Sledeća opcija posle form u insert panelu / toolbaru je Text polje. Kao što mu samo ime govori, postavlja jednostavno tekstualno polje. I oko toga postoji razlika ukoliko kliknemo na text kroz design, odnosno code prikaz. Kroz design prikaz dobićemo: <label for="textfield">Text Field:</label> <input type="text" name="textfield" id="textfield"> dok bi kroz code prikaz dobili samo: <input type="text"> Kao što vidite, radom u design prikazu, dobijamo kompletnije polje, koje je Dw već pripremio za nas, dok kroz kod moramo sami uneti name i id tagove, ali i label tag ako želimo. Zadržaćemo se malo na tim tagovima. Input tag je veoma svestran tag koji najčešće koristimo u formama. On je samozatvarajući (koristimo HTML5, zato nema znaka / na kraju). Obavezan je atribut type koji određuje tip polja, ali i potrebno je postaviti i atribute name i id, koji određuju ime polja, odnosno ID vrednost. Type atribut nije proizvoljan, a za name i id možemo uneti šta želimo (bez razmaka, naših slova i sl). Preporuka je da se unosi isto u oba (name i id), što i Dw čini, kao što ćemo videti u nastavku. Label tag nije obavezan ali


služi da korisniku pojasni polje. Upisujemo tekst unutar njegovog početnog i krajnjeg taga, i pored toga, atribut for koji ga vezuje za polje preko id vrednosti. U našem primeru, Dw je sam postavio sve te atribute za nas, a možemo ih promeniti kroz kod, ili putem properties inspector panela. Kada selektujemo polje, pomenuti properties insp. izgleda ovako:

slika 21.5 - properties inspector panel - selektovano input polje (text) U njemu možemo veoma lako podesiti naše tekstualno polje. Opcije su:

A. Određuje ime (name atribut) polja. Dreamweaver automatski istu vrednost upisuje i u ID atributu. Primetićete da ne postoji posebno polje za unos ID vrednosti. B. Izbor klase. C. Definiše maksimalan broj karaktera u polju. Ukoliko npr. upišemo 5, korisnik neće moći da unese više od 5 karaktera. D. Definiše dužinu polja, tačnije širinu same kontrole. Preporuka je da se ovaj atribut izbegava, i da se širina određuje CSS opisom. E. Postavlja default vrednost. F. Definiše placeholder atribut za polje. Placeholder tekst se pojavljuje u polju pre nego što korisnik unese svoju vrednost. Nije podržano od Internet Explorera 9 i njegovih ranijih verzija. G. Podešavanja title atributa koji pruža dodatnu informaciju o polju. Najčešće se pojavljuje kao tooltip. H. Disabled “isključuje” polje. Korisnik neće moći da promeni polje i biće prikazano sivom bojom. Takođe, ne prosleđuje se na submit. I. Auto focus postavlja da se prilikom učitavanja, odmah focus postavi na ovom polju. Nije podržano od Internet Explorera 9 i njegovih ranijih verzija. J. Required postavlja da je polje obavezno za unos. Nije podržano od Internet Explorera 9 i njegovih ranijih verzija, kao i od Safarija. K. Postavlja polje na read only. Slično kao disabled, ali može da se postavi focus na njega, i prosleđuje se na submit. L. Auto complete opcija na elementu je slična istoimenoj opciji za celu formu, samo se odnosi na jedan element. M. Form opcija omogućava da povežemo određeni element sa form tagom, ako se on nalazi van njega. Ranije smo pomenuli da svi elementi moraju biti unutar form taga, što i dalje stoji, jer ova opcija nije podržavana ni od najnovijih verzija IE, tako da je praktično neupotrebljiva. N. Možemo postaviti regular expression (regularni izraz) kao šablon za polje. I ova opcija ne radi u svim verzijama IE. O. Određuje redosled po kome se može polju pristupiti korišćenjem Tab tastera.


P. Povezuje input polje sa posebnim datalist tagom u kome se nalaze određene vrednosti. U list polju postavljamo ID vrednost datalist taga. Još uvek nije podržano od većine browsera.

Ako ste radili u ranijim verzijama, primetićete da je properties inspector panel drastično izmenjen sada u verziji CC. I nazivi polja više nisu isti. Mnogo toga je dodato iz HTML5 i dobar deo opcija nije realno upotrebljiv. Pored ovog tekstualnog elementa, skoro sve ostale kontrole koriste potpuno isti input element, samo uz drugačiju vrednost type atributa. Na primer, pogledajmo sledeći kod: <form method="post" name="kontaktFrm" id="kontaktFr m"> <label for="ime">Ime:</label> <input type="text" name="ime" id="ime"><br> <label for="email">Email:</label> <input type="email" name="email" id="email"><br> <label for="username">Username:</label> <input type="text" name="username" id="username"> <br> <label for="password">Password:</label> <input type="password" name="password" id="passwo rd"><br><br> <input type="submit" name="prijava" id="prijava" value="Prijavi se"> </form>

Ovo je jedna forma sa unetim poljima za ime, email, username i password. Uneto je i dugme koje prosleđuje podatke. Primećujemo da su sva polja, pa čak i dugme submit, input tagovi. Razlikuje se samo type atribut koji određuje tip polja, i dodatni atributi. Npr dugme sadžri atribut value koji određuje šta piše na njemu. Kao što je već pomenuto, input tag je najsvestraniji tag koji nalazimo u formama. U ovoj tekstualnoj jedinici nećemo posebno redom obrađivati svako input polje, jer su međusobno veoma slična, a njihovi nazivi dovoljno govore čemu služe. Ali ćemo ukazati na neke razlike i obraditi ona koja su drugačija. Ako se vratimo na properties inspector panel, kod drugih kontrola, možemo naći neka dodatna podešavanja kao što su: Value određuje vidljivu vrednost. Kod dugmića je to tekst na njima. Multiple checkbox omogućava da polje prihvati više od jedne vrednosti. Min, Max i Step vrednosti određuju maksimalnu, odnosno minimalnu dozvoljenu vrednost, kao i korak između vrednosti. Nije podržano od Firefoxa i ranijih verzija IE. Neka specifična input polja su:

Hidden polje Hidden polje je, pretpostavili ste, <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; ?>"/>

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="obave stenja" /> <label for="obavestenja">Newsletter?</label>

slika 21.6 - 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.

Checkbox group Izborom ove opcije pozivamo dijalog u kome možemo odmah kreirati više checkbox polja.

slika 21.7 - 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.

Slika 21.8 - Radio grupa (sa labelama) u browseru

Select 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. Na primer: <label for="gender">Select:</label> <select name="gender" size="1" id="gender"> <option value="1" selected>male</option> <option value="2">female</option> </select> U properties inspector panelu, podešavanja su:

Slika 21.9 - Podešavanja select polja Na slici, označeno je:

A. Veličina polja. Ukoliko je uneto 1, pojavljuje se padajući meni, ukoliko je broj veći od 1, pojavljuje se lista za izbor. Ukoliko je u tom slučaju broj manji od broja ponuđenih opcija, pojavljuje se scroll uz desnu ivicu. B. Podešavamo default vrednost od unetih.


C. Pozivamo dodatni dijalog (prikazan na slici ispod) u kome podešavamo moguće opcije i njihove vrednosti. Item label kolona prikazuje opcije koje će biti ispisane korisniku, dok kolona Value sadrži njihove vrednosti, nevidljive korisniku. Možemo dodavati/brisati upotrebom opcija +, odnosno -, a možemo menjati i redosled pomoću strelica u desnom delu.

slika 21.10 - List Values dijalog

Textarea polje Veoma slično input tagu, posebno text polju, ali nešto drugačije je textarea polje, koje koristimo za duže tekstove. Specifično je to što se ne koristi input, već textarea tag, koji pritom nije samozatvarajući, što znači da kod izgleda, na primer, ovako: <textarea name="textarea" id="textarea"></textarea> Takođe, unosimo name i id vrednosti, dok u properties inspector panelu možemo naći slične vrednosti kao kod inputa:

slika 21.11 - properties inspector panel - selektovano textarea polje Ono što se razlikuje je označeno na slici iznad, a to su opcije:

A. Rows i Cols polja definišu broj redova i kolona unutar polja. Iako možda deluje čudno jer se ne radi o tabeli već o tekstualnom polju, ove vrednosti određuju širinu i visinu polja. Preporuka je da se ne koriste, već da se CSS opisom definišu dimenzije.


B. Određuje da li će se prilikom prosleđivanja forme zadržati novi redovi (hard) ili ne (soft). Ako se koristi hard opcija, cols vrednost je potrebna. C. Value određuje inicijalnu vrednost polja.

Ostalo Tu su još neki elementi, odnosno tagovi, koje možemo postaviti kroz form deo insert panela. 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, ukoliko postavimo dva fieldset-a (za dve grupe polja), stranica može izgledati ovako:

slika 21.12 - kontakt forma


Stilizacija formi Stilizacija formi i uopšte uređenje njihovog izgleda može predstavljati problem. Svaki browser, manje više, prikazuje forme i njihove elemente drugačije. Da bi to uočili na primeru, pogledajmo kako bez ikakve stilizacije, neki popularni browseri prikazuju isto dugme: <input type="button" name="button" id="button" valu e="Button">

slika 21.13 - različiti browseri različito prikazuju elemente formi Donekle možemo ujednačiti prikaz pozivanjem normalize css fajla (koji smo pomenuli ranije) ili neke slične osnove, ali da bismo bili sigurni da elementi izgledaju isto, ili barem slično, moramo dodati svoje CSS opise. Za prethodni primer, submit dugme, možemo upisati klasu dugme u html-u: <input type="button" name="button" id="button" valu e="Button" class="dugme"> i postaviti sledeći CSS: .dugme { padding:5px; margin:0; background:#CCC; border:1px solid #000; font-size:10px; line-height:14px; color:#333; } U istim browserima kao malopre bi dobili ovakav prikaz:

slika 21.14 - prikaz stilizovanog dugmeta u različitim browserima Na taj način, donekle smo ujednačili prikaz jer smo ponovo definisali izgled različitih detalja dugmeta. Ponovo smo sami definisali delove box modela, ali i neke druge detalje. Ukoliko postavite svojstvo samo za npr border, ostali detalji će i dalje dobijati stilizaciju browsera.

Selektori kod formi


Kada želimo da CSS-om stilizujemo određeni deo forme, moramo znati i kako da pogodimo određeni element. ID Možemo koristiti već postojeće ID vrednosti koje se nalaze na samim elementima. Na primer, postavili smo: <input type="text" name="username" id="username"> tada, CSS može biti: #username { ... } CLASS Unos preko pojedinačnih ID vrednosti može biti zamoran, i umesto toga možemo postaviti klase i na jednom mestu stilizovati više elemenata. Na primer: <input type="text" name="first_name" id="first_name " class="frm-txt"> <input type="text" name="last_name" id="last_name" class="frm-txt"> <input type="text" name="username" id="username" cl ass="frm-txt"> <input type="password" name="password" id="password " class="frm-txt"> a u CSS-u: .frm-text { ... } Tag Možemo koristiti i uopštenu varijantu: input { ... } ili #mojaForma input { ... }


ali upotrebom opštijih selektora se stvara problem. Input se koristi i za tekstualna polja, i za dugmiće, i za check i radio kontrole i tako dalje. A svi oni ne mogu imati istu stilizaciju, zato preporučujem da ovaj način izbegavate. Input - type selektor Tu je i nešto noviji (CSS3) type selektor koji pišemo ovako: input[type="text"] { ... } Možemo dakle unutar uglastih zagrada postaviti ključnu reč type i pod znacima navoda postaviti tip koji želimo da stilizujemo. Tako će samo taj tip inputa biti stilizovan. Možemo i kombinovati sa drugim selektorima, na primer: #mojaForma input[type="text"] { ... } U video materijalu uz ovu jedinicu, prikazano je nekoliko primera za stilizaciju formi.

Da li svi browseri po osnovnim podešavanjima podjednako prikazuju sve elemente formi?

● Ne ● Da

Sažetak Dw omogućava unos formi i elemenata formi direktno kroz dizajn prikaz, bez potrebe za ručnim unosom koda. Takođe, sada su uneti i elementi formi koji su se pojavili u HTML5 jeziku. Forme i elemente možemo stilizovat CSS opisima.

dwcc_21-4585214

Documents