Formulari su danas jedan od sastavnih dijelova interaktivnih stranica na WWW-u.
Sad se mozda pitate sto je to interakcija, to je mogucnost da korisnik aktivno sudjeluje u vasim
stranicama (da se tako izrazim). Posjetiteljima se daje mogucnost da unose razne informacije na vasim stranicama
koje se onda pojavljuju na vasoj domacoj stranici.
Jedan primjer su Knjige gostiju. To naravno nije moguce rijesiti samo u html-u i sa formularima. Tu u igru
dolaze cgi-skripte o kojima cemo uskoro pisati (ili php ili asp), tako da ono sto posjetitelj unese ide direktno na vas server i putem
jedne skripte se ti podaci upisuju u odredjeni html dokument.
No kao sto rekoh o tome cemo vise pisati u sekciji o CGI-Skriptingu, ovdje nam je cilj nauciti kako kreirati formulare.
Slijedi Konkretan primjer!:
<form action="mailto:bhwebmasters@kvesko.de" method=post
enctype="text/plain">
..Ovdje slijede elementi formulara kao sto su dugmici, tekst polja
ili areali, izborna polja itd. ...
</form>
Ovdje vidite jedan osnovni formular. Formular zapocinjete sa ovim tagom: <form ...>, sve sto se nalazi
izmedju ovoga taga i </form> tag-a pripada tom formularu. Najucestaliji elementi formulara su dugmici,
zatim tekst polja i tekst areali za unos podataka, tzv. chek boxes i drugi. Konkretni primjeri slijede.
Kao sto vidite u gornjem primjeru iza form slijedi uvijek action="NekaAkcija", tu navodite sta ce se dogoditi sa podacima
kada posjetitelj klikne na dugme posalji (ili submit). Tu mozete navesti e-mail adresu (kao o gornjem primjeru), ili neki cgi-skript
na vasem serveru. Kojem ce ti podaci biti predani kao parametri. Kao sljedece birate metodu sa method="nesto".
Tu imate dvije mogucnosti:
method=post, onda ce podaci biti na serveru pomocu "stdin" biti predani za dalju obradu. I cgi-program ce taj podatak
tretirati kao da je ukucan na komandnoj liniji.
method=get, u tom slucaju ce podaci na http serveru biti pohranjeni u standardnu varijablu QUERY_STRING, odakle ih CGI-program
mora procitati, za dalju obradu.
Ukoliko podatke saljete na neku E-Adresu, onda preporucujem da koristite method=post. Osim toga preporucuje se
da navedete i ovo untar <form> taga, enctype="text/plain", to omogucuje da podatke koji su poslati
preko novijih pretrazivaca budu korektno formulirani, jer ako to ne navedete, dobit cete podatke koji su za ljudsko oko teze citljivi. Ali su
za razne cgi skripte kao stvoreni..
Slijede konkretni elementi formulara, a nakon toga i pojasnjenja:
Dakle ovo je jedan obican tzv. text-field ili ti na nasem tekstualno polje. definirate pomocu gornje naredbe.
size=xx daje velicinu polja koja je prikazana, a maxlenght=xx maksimalna velicina unesenih podataka, moze biti i vece od size.
Kada stavite type=password, umjesto unesenih znakova pojavljivat ce se samo zvijedzice. Sluzi za unosnje (logicno) sifri/passwords.
Tekst Area!
To je polje sa vise redaka izvorni kod izgleda ovako:
Sta mislite o Clintonovoj aferi sa Monikom:
<p>
<textarea name="Clinton_Monika" rows=10 cols=50></textarea>
Ovo polje ce imati 10 redaka i 50 znakova u svakom redku..omogucava unosenje nekog komentara ili naprimjer kratak
opis stranice koja se unosi u neku link-listu. Opcionalno mozete unutar <textarea> </textarea> mozete napisati neki
tekst koji ce na www stranici unutar tog teksta biti prikazan nakon ucitavanja stranice.
Osim toga unutar ovog taga za textarea mozete unijeti atribut wrap=virtual|physical. Virtual wrap (za novi red), daje pri ukucavanju
automatski novi red kada je red pun, ali se podaci prenose bez tzv. braek-a. physical ima istu funkciju pri pisanju, a pri slanju se podaci
takodje prenose dalje..(mislim novi redovi..to je naravno korisnije). Izborne liste!
Izborne liste se takodje cesto koriste, npr mozete postaviti pitanje "Kako ste me nasli". Slijedi jedan
listing a zatim i objasnjenje.
Dakle pojavljuje se jedan select box, u kojem izabirate jednu od opcija. Kad podaci budu poslani, primate jedno
od ovih imena, ono koje je posjetitelj selektirao. I ovdje se moze naci jedan niz atributa:
name : ime, netreba biti predugo, razmak je zabranjen, stavite ga unutar navodnika.
size : velicina, tim odlucujete koliko ce unosa biti vidljivo, ako lista ima vise elemenata, onda posjetitelj
moze skrolati da bi vidio ostatak liste.
multiple : dozvoljava izabir vise elemenata odjednom. Dovoljno je napisati samo multiple unutar ovog SELECT taga.
selected : ovo navodite unutar <option> taga, tada je taj elemenat liste vec selektiran.
value="xx" : dozvoljava da se umjesto teksta koji se nalazi iza option taga salje text koji stoji umjesto xx (moze
biti i neki broj), npr broj artikla za neki On-Line ducan.
Konkretan primjer izgleda ovako:
Kako ste nasli ovu Mreznu Stranicu:
Gumbovi/Dugmadi!
Bez dugmadi nista neradi, jer nekako morate reci pretrazivacu da sve unesebo posalje.
Za to su tu standardni gumbovi (ili dugmici kako vec hocete), koji sluze da se procedura slanja
pokrene. Osim toga tu je i standardni gumb/dugme RESET, koji ponistava sve uneseno, ovako izgleda taj HTML-kod:
Dakle type atribut je u ovom slucaju kljuchna tocka, ako je on =submit (posalji od engl. op.a.)
onda pretrazivac pokrece akciju koju ste naveli na samom pocetku u <form ..>-tagu. Value atribut
sadrzi tekst koji ce biti prikazan na dugmetu. type=reset nadam se netreba poblize objasnjavati, tim se sva polja
"ciste" tako reci..
Tu su jos i individualni gumbici, kod kojih uz kombinaciju sa JavaScriptom mozete izvesti neku operaciju, primjer slijedi dole.
Te takozvani file-buttons, koji se koriste da vam posjetitelji posalju neku datoteku..taj html-kod izgleda ovako:
Posaljite nam .txt ili .html datoteku!
<input type=file size=50 maxlength=66 name="Datei" accept="text/*">
Ukoliko je Java ukljucena onda ovaj gumbic/dugme ima istu funkciju kao i BACK-dugme
vaseg internet pretrazivaca:
<input type=button value="Natrag" onClick="history.back()">
Radio Buttons
Sluze za izbor jedne opcije, kod izgleda ovako:
Na koji nacin zeli platiti?:
&tl;input type=radio name="Nacinplacanja" value="Mastercard"> Mastercard
<input type=radio name="Nacinplacanja" value="Visa"> Visa
<input type=radio name="Nacinplacanja" value="AmericanExpress"> American Express
Dakle jedan Radio-Button zapocinjete sa <input> zatim slijedi atribut type=radio. Svakom
radio-button-u morate dati jedno interno ime (name="nekoime"). Sva dugmad sa istim imenom spadaju u jednu te istu grupu.
Dakle iz te grupe posjetitelj moze izabrati tocno jednu. Pomocu atributa VALUE dajete internu vrijednost
datom radio-button-u. Ta se vrijednost prenosi kada posjetitelj pritisne dugme POSALJI.
Tako, to bi bile osnove u vezi sa formularima, ukoliko jos uvijek imate nekih pitanja onda bi vas
molio da me kontaktirate putem E-Poste.
Rado odgovaram sva pitanja i pomazem. P.S.: svaki od ovih primjera lako mozete isprobati tako sto markirate zeljeni dio koda lijevim dugmetom misa
zatim stisnete strg+c zajedno, i onda sve to kopirate u vas editor sa strg+v (zajedno)
by BHWebMasters 2000.
Sva prava su zadrzana.
Za pitanja ili savjete: bhwebmasters@kvesko.de
Posaljite nam E-Postu.