BHWebmasters HTML On-Line kurs
[Pocetna stranica]
 
[HTML Kurs]
Osnove
Alati
Tekst
Linkovi
Liste
Tablice
Frameovi
CSS
Images/slike
Formulari
Layers (Razine)
Optimirano za MSIE 4.0.
 

 

HTML
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:
Vase Ime: <input name="VaseIme" size=60 maxlength=60>

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.

Unesite sifru: <input type=password name="Sifra" size=10 maxlength=10>

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.

Kako ste pronasli moj page:
<p>
<select name="kakoDoMene" size=3> <option> Yahoo <option> Lycos <option> Bosnia Online <option> Novine <option> Poznanici </select>

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:

<input type=submit value="Poslati"> <input type=reset value="Ponisti uneseno">

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.