Lekcija3

FORM Tutor

Lekcija 1

Lekcija 2

Lekcija 3

iDragstor Lab

mojaforma.htm

mojaforma KOD

Procesiranje Formi

Submit i Reset dugmici
Kada korisnik ispuni formu ona se salje na dalje procesiranje pomocu dva dugmica Submit i Reset:

<INPUT TYPE="submit" VALUE="Posalji">
<INPUT TYPE="reset" VALUE="Izbrisi">
Submit dugmence se koristi kada zelimo da posaljemo podatke. Sadrzaj forme ce se procesirati prema instrukcijama METHOD i ACTION atributa iz FORM teg-a. U sledecoj sekciji cemo pogledati ova dva atributa detaljnije. Reset dugmence se koristi za brisanje sadrzaja iz elementa forme. <INPUT> se koristi da bi se definisalu dugmici. TYPE odredjuje tip dugmica a VALUE tekst koji ce se pojaviti. Dodajte ove dve linije u nasoj vezbi (mojaforma.htm):
<TABLE WIDTH=100%>
<TR>
<TD>
<B>Interesi (Naznacite sve opcije koje vam odgovaraju)</B>
<UL>
<LI><INPUT TYPE="checkbox" NAME="checkutija" VALUE="computer">Kopjuteri
<LI><INPUT TYPE="checkbox" NAME="checkutija" VALUE="biznis">Biznis
<LI><INPUT TYPE="checkbox" NAME="checkutija" VALUE="rekreacija">Rekreacija
<LI><INPUT TYPE="checkbox" NAME="checkutija" VALUE="kuvanje">Kuvanje
<LI><INPUT TYPE="checkbox" NAME="checkutija" VALUE="putovanja">Putovanja
</UL>

<INPUT TYPE="submit" VALUE="Posalji">
<INPUT TYPE="reset" VALUE="Izbrisi"><br>

</TD>
<TD>
<B>Kako biste zeleli da vam posaljemo casopise</B>
<SELECT NAME="IZBORI">

ACTION i METHOD atributi
Kao sto smo napomenuli gore, sadrzaj forme se salje na procesiranje uz pomoc dva atributa iz form <FORM> tega, METHOD i ACTION. Pogledajte sintaksu:
<FORM METHOD="vrednost metoda" ACTION="URL adresa gde se vrsi procesiranje">
Primer: <FORM METHOD="GET" ACTION="http://www.iDragstor.com/Tutori/Procesiranje.asp">
METHOD atribut. Kada korisnik klikne na Submit dugmence svi elementi, tj. njihove vrednosti se prikupljaju uz pomoc METHOD atributa. On moze imati dve vrednosti GET ili POST. Razlika je u tome kako se salju podaci kada korisnik pritisne Submit dugme.
U slucaju GET metoda podaci iz forme se salju tako sto se nanizu jedan iza drugog nakon URL-a koji se naznaci u ACTION metodi. Znaci rezultat je jedan dugacki string koji sadrzi adresu procesiranja podataka URL i nakon toga vrednosti iz elementa forme.
POST metod se koristi kada zelimo da razdvojimo URL od podataka sa forme. Pomocu POST metoda podaci sa forme se organizuju u blok podataka i salju odvojeno od URL-a.
ACTION atribut se koristi da se odredi adresa ili URL od skripte ili servera na kojem ce se procesirati forma. Skripte koje se nalaze na serveru i vrse procesiranje podataka se zovu CGI skripte (Common Gateway Interface) i mogu se pisati u razlicitim jezicima, C++, Visual Basic, Perl. Pored CGI skripti procesiranje podataka moze da se izvrsi pomocu drugih tehnologija na serveru kao sto su ASP (active server pages)ili JSP(java server pages). U nasem primeru procesiranje podataka se vrsi pomocu ASP skripte koja ce isprintati elsemete forme nakon sto ih korisnik posalje. Pogledajte nas primer i promenite FORM teg tako da ima METHOD i ACTION atribute. <HTML>
<HEAD>
<TITLE>Forma o kupcima</TITLE>
</HEAD>
<BODY BGCOLOR="lightyellow" TEXT="maroon">
<H1>Forma o kupcima</H1>
<P> Molimo vas da tacno ispunite ovu formu da bi vam sto pre poslali nas mesecni casopis koji se odnosi na vasa interesovanja. </P>
<FORM METHOD="GET" ACTION="http://www.iDragstor.com/Tutori/Procesiranje.asp">
<B>Ime:</B> <INPUT TYPE="text" NAME="ime" SIZE="30"><P>

Procesiranje podataka pomocu JavaScript-a
Veoma je korisno izvrsiti validasciju podataka koje saljemo na procesiranje da bi kvalitet informacija bio bolji. Cesto je procesiranje na serveru prilicno koplikovano pa je veoma dobra ideja da se validacija podataka izvrsi na klientu (masini sa koje se salje forma) i to se vrsi uz pomoc JavaScript programiranja. Ako niste upoznati sa JavaScript programiranjem i zelite da naucite vise mozete pogledati nas tutor o JavaScript-u u sedam lekcija. U sledecem primeru koristicemo JavaScript da potvrdimo da je korisnik uneo sve podatke sa forme. Ako je korisnik uneo sve podatke forma ce biti poslata na procesiranje a ako nije dobice poruku da treba da ispuni odredjeno polje. Pogledajte primer i dopunite mojaforma.htm sa linijama JavaScript kod-a.
<HTML>
<HEAD>
<TITLE>Forma o kupcima</TITLE>

<SCRIPT LANGUAGE = "JavaScript">

</SCRIPT>
</HEAD>
<BODY BGCOLOR="lightyellow" TEXT="maroon">
<H1>Forma o kupcima</H1>
<P> Molimo vas da tacno ispunite ovu formu da bi vam sto pre poslali nas mesecni casopis koji se odnosi na vasa interesovanja. </P>
<FORM METHOD="GET" ACTION="http://www.iDragstor.com/Tutori/Procesiranje.asp" onSubmit="return Validacija()">
<B>Ime:</B> <INPUT TYPE="text" NAME="ime" SIZE="30"><P>
Testirajte procesiranje forme
Sada je sve spremno da testirate procesiranje vase forme (mojaforma.htm). Kada ispunite sva polja i kliknete na "Posalji" dugme podaci se prikupljaju pomocu GET metoda, METHOD="GET", i salju na URL adresu odredjenu pomocu ACTION atributa, u nasem primeru ACTION="http://www.iDragstor.com/Tutori/Procesiranje.asp". Kada ASP stranica na serveru primi podatke ona onda vrsi procesiranje elementa forme tako sto prikazuje njihove vrednosti. Ako do sada niste zavrsili formu mozete pogledati "source code", ali vam preporucujemo da izgradite formu korak po korak tako sto cete proci kroz ceo tutor.

Na kraju tutora
Bravo. Ako citate ove redove stigli ste do kraja tutora (ukoliko niste preskocili stvari). Nadamo se da ovaj tutor nije bio suvise dosadan i da vam je dao osnove o pravljenju formi. Savetujemo vam da pogledate druge tutore o JavaScript na nasim stranicama ili drugim prezentacijama na internetu. Znanje iz JavaScript-a ce vam pomoci u validaciji ili proveri tacnosti forme i pomoci vam u daljem programiranju na internetu. Ako imate neke utiske, komentare, zalbe ili bilo sta drugo da kazete u vezi ovog tutora posaljite mi poruku na brasic@iDragstor.com. Jos jednom vam se zahvaljujemo na paznji.

Predhodna Lekcija

Pocetak