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