Da obnovimo malo
Svaka forma pocinjene sa <FORM> a zavrsava se </FORM> teg-om.
Form teg-ovi se nalaze unutar <BODY> tega.
Svaka forma se sastoji iz razlicitih elemenata. <INPUT> teg, sluzi
da bi se definisali elementi forme kao sto su tekst kutije,
password kutije, radio dugmici, check kutije, submit i reset dugmici.
Evo kako mozete da napravite tekst kutiju:
<INPUT> teg nema "kraj" teg a sintaksa izgleda ovako:
<INPUT TYPE="vrsta elementa" NAME="ime elementa">
Tekst Kutije
Tekst kutije su veoma cest element forme i sluze korisniku da upise
nesto u njih pomocu tastature kao sto je ime, prezime, adresa, email.
<INPUT TYPE="text" NAME="string"> ili
<INPUT TYPE="text" NAME="string" SIZE="25">
Type ili tip elementa u nasem slucaju tekst kutija ima vrednost
"text", ime tekst kutije NAME je "string" (moze biti bilo koje ime koje zelite)
a velicina SIZE=10. Ako ne navedete vrednost za size dobicete default
=20. Pogledajte sledeci primer koji ujedno predstavlja dopunu primera
iz prosle lekcije. Otvorite mojaforma.htm i izmedju <FORM> i
</FORM> upisite sledece redove:
<B>Ime:</B> <INPUT TYPE="text" NAME="ime" SIZE="30"><P>
<B>Adresa:</B> <INPUT TYPE="text" NAME="adresa" SIZE="40"><P>
<B>Grad:</B> <INPUT TYPE="text" NAME="grad" SIZE="30">
<B>Drzava:</B> <INPUT TYPE="text" NAME="drazava" SIZE="20">
<B>Pos. Broj:</B> <INPUT TYPE="text" NAME="pbroj" SIZE="8"><P>
<B>Email:</B> <INPUT TYPE="text" NAME="email" SIZE="20"><P>
Snimite fajl idalje kao mojaforma.htm i otvorite ga u vasem omiljenom browseru.
Password Kutije
Password kutije su veoma slicne tekst kutijama. Razlika je u tome
sto kada korisnik upisuje podatke u njih umesto slova ili brojeva koje kuca prikazuju
se * zvezdice. Kada se sadrzaj kutije posalje na procesiranje, umesto
zvezdica poslace se slova ili brojevi koje je korisnik ukucao. Pogledajte na
sledecem primeru. Otvorite mojaforma.htm i posle linije <B>Email:</B> <INPUT TYPE="text" NAME="email" SIZE="20">
dodajte sledecu liniju: <B>Lozinka:</B> <INPUT TYPE="password" NAME="lozinka">
Snimite fajl i otvorite ga u browseru.
Radio Dugmici Izaberi
Jedan
Dva
Tri
Radio dugmici se koriste kada korisnik treba da izabere jednu od
ponudjenih opcija na formi.
Sintaksa za kreiranje radio dugmica izgleda ovako:
<INPUT TYPE="radio" NAME="string" Value="string">
Svi radio dugmici u grupi imaju isto ime (NAME). Ovako se obezbedjuje da
korisnik moze da izabere samo jednu opciju. VALUE atribut zadaje vrednost
dugmicu tako da ako bude izabran to postaje vrednost koja se procesira.
U nasem primeru (mojaforma.htm)imamo dve grupe radio dugmica.
Obratite paznju na njihova imena i vrednosti (NAME, VALUE).
<B>Lozinka:</B> <INPUT TYPE="password" NAME="lozinka">
<P> <B> Sex:</B>
<INPUT TYPE="radio" NAME="sex" VALUE="musko"> Musko
<INPUT TYPE="radio" NAME="sex" VALUE="zensko"> Zensko
<br>
<B>Starost:</B>
<INPUT TYPE="radio" NAME="starost" VALUE="Ispod 18"> Ispod 18
<INPUT TYPE="radio" NAME="starost" VALUE="18-28"> 18-28
<INPUT TYPE="radio" NAME="starost" VALUE="29-39"> 29-39
<INPUT TYPE="radio" NAME="starost" VALUE="40-49"> 40-49
<INPUT TYPE="radio" NAME="starost" VALUE="Preko 50"> Preko 50
<P>
Check Kutije Izaberi
Jedan
Dva
Tri
Check kutije se koriste kada korisniku zelimo da dozvolimo izbor od
1,2 ili vise opcija. Sintaksa za kreiranje check kutija izgleda ovako:
<INPUT TYPE="checkbox" NAME="string" CHECKED="True">
Za razliku od radio dugmica svaka check kutija ima unikatnu vrednost (VALUE).
CHECKED atribut nije obavezan a kada se koristi zadaje vrednost check
kutiji jos pre nego sto je korisnik kliknuo na nju. U nasem primeru
(mojaforma.htm) koristicemo check kutije da proverimo koji su interesi nasih
korisnika.
<INPUT TYPE="radio" NAME="starost" VALUE="Preko 50"> Preko 50
<P>
<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>
List Kutije
Izaberi jednu od opcija
<SELECT NAME="IZBORI">
<OPTION>Jedan
<OPTION>Dva
<OPTION>Tri
<OPTION>Cetri
<OPTION>Pet
</SELECT>
List kutije se koriste kada korisnik treba da izabere jednu od opcija
koje su mu ponudjene. List kutije se prave pomocu dva teg-a, <SELECT>
i <OPTION>. Uz pomoc <SELECT> teg-a se definise ime list kutije a
uz pomoc <OPTION> teg-a se definise svaka od individualnih opcija
koje ulaze u sastav list kutije. Nastavimo nas primer (mojaforma.htm) tako
sto cemo dodati list kutiju koja trazi od korisnika da izabere kako cemu
stizati casopisi.
<LI><INPUT TYPE="checkbox" NAME="putovanja">Putovanja
</UL> <B>Kako biste zeleli da vam posaljemo casopise</B>
<SELECT NAME="IZBORI">
<OPTION>Postom
<OPTION>Email-om
<OPTION>Fax-om
<OPTION>Na CD-u
<OPTION>Nikako
</SELECT>
</FORM>
</BODY>
</HTML>
Velike Tekst Kutije
<TEXTAREA NAME="komentari" ROWS="5" COLS="60"></TEXTAREA>
Velika tekst kutija sluzi za komentare, sugestije i bilo koji drugi
tekst koji podrazumeva vise od jedne linije tekst-a. <TEXTAREA> teg
ima tri atributa NAME ili ime, ROWS predstavlja broj redova a COLS broj kolona.
U nasem primeru dodacemo veliku kutiju za evenrualne sugestije i komentare nasih
korisnika:
</SELECT>
<P>
<B> Ako biste zeleli da nam uputite neke komentare ili sugestije posluzite se prostorom ispod ove recenice.
<P>
<TEXTAREA NAME="komentari" ROWS="5" COLS="60"></TEXTAREA>
</FORM>
</BODY>
</HTML>
Tabele za organizacijju Forme
Jedan od nacina da se elementi organizuju, grupisu i prikazu lepse na
formi je da se koriste tabele. U sledecem primeru mozete videti kako
smo organizovali nasu formu (mojaforma.htm) tako da su check kutije, list kutija i velika
tekst kutija postali delovi tabele. <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> </TD>
<TD>
<B>Kako biste zeleli da vam posaljemo casopise</B>
<SELECT NAME="IZBORI">
<OPTION>Postom
<OPTION>Email-om
<OPTION>Fax-om
<OPTION>Na CD-u
<OPTION>Nikako
</SELECT>
<P>
<B> Ako biste zeleli da nam uputite neke komentare ili sugestije posluzite se prostorom ispod ove recenice.
<P>
<TEXTAREA NAME="komentari" ROWS="5" COLS="60"></TEXTAREA> </TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Kraj druge lekcije ..
Bravo !! Ako ste stigli do kraja ove lekcije savladali ste vecinu elemenata
HTML forme i sad vam jos preostaje da posalje podatke na procesiranje. Za to ce vam biti potrebni
Submit i Reset dugmici sto cete nauciti u sledecoj lekciji.
FORM Tutor
