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 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:

<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.
    • 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.
    • 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.
     

 

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).

 

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. Možemo uneti jedno slovo koje će postati prečica u kombinaciji sa CTRL tasterom. Na primer ukoliko unesemo slovo "B" možemo koristiti CTRL+B u browseru. Na Windows sistemu i Internet Exploreru tastaturna prečica je ALT+access key, u Firefoxu je ALT+SHIFT+access key, a na Mac Safari browseru je CMD+access key.

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 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.
  • Init val – Postavlja default vrednost.
  • Class – Definiše klasu nad poljem.
  • Type – Biramo tip polja.
    • Single line – Ovo polje je postavljeno pošto smo uneli Text Field na početku, obično tekstualno polje.
    • 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>
    • 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.

  

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.

 

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>


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.


 

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.

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 e-mail 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).

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Forme 1
  • Forme 2
  • Forme 3