MULTIMEDIJI I GLOBALNI MEDIJI
HTML I CSS
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Uvod
Forme su osnovni element koji je omogućio da Web postane interaktivan i koristan. Forme su interaktivne zato što traže da vi kao korisnik komunicirate
sa njima u cilju izvršenja nekog zadatka. Zadatak koji se pominje može na primer biti:
•
•
•
•
Unos informacija u onlajn bankarski sistem, tako da možete svojim računom da upravljate preko Interneta
Slanje imena i informacija o vama da biste postali član nekog onlajn servisa(gmail,yahoo...)
Kupovina avionske karte ili turističkih usluga
Kupovina dobara i usluga preko Interneta
Bez formi, nijedna od ovih mogućnosti nam ne bi bila na raspolaganju, a ni sam Web ne bi stigao tako daleko u smislu obezbeđivanja interaktivnih
usluga. Danas se i druge tehnologije koriste za ono što su nekad radile HTML forme.
Flash, na primer, podržava bogate forme koje su vrlo brze i koje se ažuriraju na istoj strani. To ne znači da su HTML forme prestale da se koriste, lako
Flash forme mogu biti korisne, one se ne mogu pretraživati i njima se ne može pristupati na način na koji je to moguće sa HTML formama. Prema tome, čak i
sajtovi na kojima se koriste Flash forme često kao alternativu nude HTML forme. Postoje i druge tehnologije koje pokušavaju da forme učine još bogatijim, ali
su one još u povoju, tako da HTML forme ostaju standardan način za dodavanje interaktivnosti i funkcionalnosti na vaše web saj-tove.
Sa formama se relativno lako radi, u najmanju ruku sa strane HTML-a. Da bi se forma ponašala na određeni način, potrebno je programiranje, a programiranje formi na strani servera nije oblast kojom se ova knjiga bavi.
Ovde ćete naučti kako da napravite HTML forme i kako da ih učinite logičnim i dostupnim. Takođe ću pomenuti resurse koje treba imati na umu da biste bili
svesni mogućnosti koje postoje kada dođe do skriptova na strani servera, koji treba da provere te forme i obrade ih.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Element form
Sve forme počinju elementom form.
<form>
</form>
Element form ima dva obavezna atributa, koje morate da ubacite da bi forma funkcionisala. To su:
method - Ovaj atribut definiše način na koji forma komunicira sa web serverom. Moguće vrednosti su get i post.
action - Ovaj atribut definiše putanju do mesta gde se forme obraduju (videti primer 5.1).
Primer 5.1 Ubacivanje atributa method i action u element form
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
</form>
KVANTNI SKOK
Sa svojim ISP (Internet Servis Provajder) provajderom treba da proverite koji metod treba da koristite ako se forme obrađuju skriptovima koje on nudi.
Većina ISP provajdera nudi različite skriptove za obradu formi, ali nisu svi načini pouzdani onoliko koliko vam je potrebno.
Ako želite da napravite jednostavnu formu za kontakt, ne bi trebalo da imate problema. Sa druge strane, ako je to skript za potrošačku korpu, potrebno
je dodatno programiranje i prilagođavanje. Važno je napomenuti da neće svi ISP provajderi ponuditi napredne skriptove, tako da morate da uradite svoj domaći
da biste dobili ono što tražite.
U ovom trenutku, markup koji ste napravili ništa ne radi. Forme rade sa kontrolama. Kontrole su polja i dugmad koja se prikazuju u HTML formama.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Ubacivanje polja za unos teksta
Polja za unos teksta se koriste u različite svrhe, uključujući trenutke kada želite da neko unese svoje ime, adresu, itd. Polje za unos teksta ćete napraviti
pomoću elementa input, kod kojeg je vrednost atributa type, text (videti primer 5.2)
Primer 5.2 Ubacivanje polja za unos teksta
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
Ime: <input type=”text”/><br/>
Prezime: <input type “text” /><br/>
Telefon: <input type “text” /><br/>
</form>
Kao što se vidi na slici 5.1 element input sa vrednošću atributa type text daje formu čiji vam je izgled sigurno poznat.
Slika 5.1 Forma sa poljima za unos teksta
Naravno da ste primetili da nije sve najbolje uređeno i dovoljno atraktivno. Ovo ćemo popraviti kasnije pomoću CSS-a, ali pre nego što to uradimo,
moramo pomenuti još neke tehničke detalje. Najvažnije je kako razlikovati jedno polje na formi od drugog. Element input pravi polje za unos teksta, ali biće
potrebno da identifikujete svako polje, tako da možete da definišete ponašanje i izgled svakog od njih. Identifikacija polja na formi se vrši pomoću atributa
name i id, odnosno njihovih vrednosti. Ako stavite oba atributa, forma će biti kompatibilna sa prethodnim verzijama pretraživača, a istovremeno ćete moći da
identifikujete određene oblasti radi postavljanja stilova, skriptova i dostupnosti. Naredni korak je podešavanje veličine polja za unos teksta. Uz pomoć atributa
size možete deflnisati širinu za svako polje. Možete i da zadate broj karaktera koji se može uneti u tom polju. Ovo se radi pomoću atributa maxlength (videti
primer 5.3).
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Primer 5.3 Ubacivanje atributa method i action u element formPnmer 5.4 Identifikacija polja za unos teksta pomoću imena i id-ja, promena polja za unos teksta
pomoću atributa size i maxlenght
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
Ime: <input type=”text” name=”ime” id=”ime” size=”25”
maxlength=”40”/><br/>
Prezime: <input type “text” name=”prezime” id=”prezime” size=”25”
maxlength=”40”/><br/>
</form>
Kad je maxlength podešen na 0, broj karaktera koji se može uneti nije ograničen. Ako se unese konkretan broj, onda se može uneti toliko karaktera. Na
slici 5.2 su prikazana polja za unos teksta sa zadatom veličinom, koja je veća nego u primeru 5.1.
Slika 5.2 Promena veličine polja za unos teksta i definisanje broja karaktera koji se može uneti.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Ubacivanje polja za potvrdu i radio dugmadi
Polja za potvrdu su sjajan način da se od posetilaca sajta sakupe informacije na osnovu unapred defmisanog skupa mogućnosti. Prednost polja za potvrdu je u tome da posetilac može da izabere više opcija i to je i najbolji način upotrebe, posebno kada postoji mogućnost više odgovora. Polja za potvrdu se prave
pomoću elementa input sa atributom type checkbox (videti primer 5.5).
Primer 5.4 Ubacivanje polja za potvrdu na formu
<p>Molimo vas izaberite vaš omiljeni način za opuštanje</p>
<input type=”checkbox” name=”čitanje” id=”čitanje”/>Čitanje<br/>
<input type=”checkbox” name=”sport” id=”sport”/>Sport<br/>
<input type=”checkbox” name=”kompjuterske igre” id=”kompjuterske igre”/>Kompjuterske igre<br/>
<input type=”checkbox” name=”televizija” id=”televizija”/>Televizija<br/>
<input type=”checkbox” name=”bioskop” id=” bioskop”/>Bioskop<br/>
<input type=”checkbox” name=”slušanje muzike” id=” slušanje muzike”/>Slušanje muzike<br/> Korisnik sada može da bira ono što želi (videti sliku 5.3)
Slika 5.4 Korisnik iz liste polja za potvrdu može da izabere više opcija.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Radio dugmad su slična poljima za potvrdu u tome da korisnik može da bira neku od ponuđenih opcija. Razlika je u tome što kod radio dugmadi posetilac može da izabere samo jednu opciju, a ne više njih. Ovo se postiže time Što se koriste iste vrednosti za atribut name (u ovom slučaju gender (pol)), a onda se
pomoću atributa value pravi razlika između opcija. Kod radio dugmadi morate da koristite atribut value, ili mogućnost jednoznačnog izbora neke opcije neće
raditi (videti primer 5.6).]
Primer 5.6 Ubacivanje radio dugmadi na formo
<form method=”get” action=”http: //www.ntyserver.com/cgi-bin/niailscript/ “>
<h2>Izaberite pol:</h2>
<input type=”radio” value=”muški” name=”Izaberite pol” id=”muški” />muški<Dr /><br/>
<input type=”radio” value=”ženski” name=”Izaberite pol” id=”ženski” />ženski<br />
</form>
Na slici 5.5 je prikazan niz radio dugmadi, koja su opisana u primeru 5-6.
Slika 5.4 Izbor jedne od opcija predstavljenih radio dugmadima
Polja za potvrdu i radio dugmad se mogu koristiti u bilo kojoj kombinaciji koju smislite. Osnovno što treba zapamtiti je da se polja za potvrdu koriste
kada je potreban izbor više mogućnosti, dok se radio dugmad koriste kada je potreban izbor samo jedne stavke.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Meniji sa formama
Postoje dve vrste ovih menija. To su padajuća lista i lista. Obe vrste su izuzetno korisne i mogu se modifikovati na različite načine u skladu sa onim što
vam je potrebno.
Jedan od najpopularnijih načina za postavljanje opcija na formu su poznati padajući meniji. Ova vrsta menija je posebno korisna kada ima više opcija.
Obično se koristi kod menija u kojima se biraju zemlje, države, cena i slično.
Padajući meniji se prave kombinacijom elemenata select i option (videti primer 5.7).
Prrmer 5.7 Padajući meni na formi
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
<h2>Izaberi grad:</h2>
<select>
<option value=”Beograd” >Beograd</option>
<option value=”Beograd” >Beograd</option>
<option value=”Novi Sad” >Novi Sad</option>
<option value=”Niš” >Niš</option>
<option value=”Kragujevac” >Kragujevac</option>
<option value=”Užice” >Užice</option>
<option value=”Šabac” >Šabac</option>
<option value=”Valjevo” >Valjevo</option>
<option value=”Loznica” >Loznica</option>
</select>
</form>
Rezultat je prikazan na slici 5.5.
Slika 5.5 Izbor stavke iz padajuće liste
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Možete i da napravite meni sa listom. Ovaj meni se priprema na potpuno isti način kao padajući meni, ali se dodaje atribut size. Njegova vrednost je
broj, koji govori koliko se stavki iz liste prikazuje. Ovaj atribut se dodaje oznaci select:
<select size=”6”>
Atribut selected možete da dodate bilo kojoj opciji za koju želite da bude izabrana.
Dodatna mogućnost koju nudi lista je da se omogućava izbor vise stavki.
U tom slučaju možete da dodate atribut multiple.
Ovaj atribut se dodaje oznaci select.
<select size=”6” multiple=”multiple”>
Meni sada postaje lista, tako da posetioci mogu da biraju više stavki (videti sliku 5.6).
Slika 5.6 Meni lista
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Forme za unos teksta
U nekim slučajevima će vam biti potrebna neka forma za povratnu informaciju ili unos, koja nudi više fleksibilnosti u odnosu na klasično polje za unos
teksta, kod kojeg je podržan samo jedan red teksta. Forme za unos teksta su savršeno rešenje.
Forma za unos teksta se prave pomoću elementa textarea. Tu su i atributi rows i cols koji definisu vidljivi deo. Za razliku od tabela, vrste i kolone u
ovom slučaju definišu kako se rukuje oblašću za unos teksta. Vrste definisu broj redova koji je dozvoljen kod unosa teksta, a kolone definisu širinu polja (videti
primer 5.8).
Primer 5.8 Kreiranje oblasti za unos teksta
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
<h2>Specijalni zahtevi<h2>
<textarea rows=”10” cols=”25”>
</textarea>
</form>
Rezulttujuća forma za unos teksta će imati 10 vrsta i 25 kolona (videti sliku 5.8). Na slici sam dodaoi nešto teksta, tako da vidite kako izgleda kada posetilac
unese nešto u ovo polje.
Slika 5.7 Oblasti za unos teksta olakšavaju posetiocima da unose dodatne komentare, bez ograničenja koja postoje kod polja za unos teksta, polja za potvrdu,
radio dugmadi i ostalih kontrola.
.
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Dugmad reset i submit
Kontrole za resetovanje i slanje su ugrađene u HTML, tako da ne morate da se mnogo trudite da biste te funkcije koristili, a čak i prilagodili do izvesne
mere, a da pri tome čak i ne koristite slike i stilove.
Dugme reset, kada se klikne, čisti formu. Dugme submit šalje podatke sa forme. Podaci se šalju na server, a atributi method i action određuju kako se i
gde šalju.Primer 5.9 pokazuje kako se prave dugmad reset i submit.
Primer 5.9 Kreiranje dugmadi reset i submit
<form method=”get” action=”http://www.myserver.com/cgi-bin/mailscript/”>
<input type=”reset” value=”reset” />
<input type=”submit” value=”submit” />
</form>
Na slici 5.8 je pokazano kako atribut value određuje informacije koje će se prikazati na dugmadima
Slika 5.8 Dugmad reset i submit se automatski kreiraju.
Pošto za dugmad na formi možete da menjate vrednosti, možete i da ih malo prilagodit tako da na njima stoji tekst koji želite (videti sliku 5.9).
Slika 5.9 Prilagođavanje dugmadi reset i submit
dipl.ing. Aleksandar Rikalović M.Sc.
Kreiranje formi
multimediji i globalni mediji
Prilagođavanje i napredne stvari kod formi
U ovom poglavlju ste naučili sve što je potrebno da biste pravili efikasne, korisne i dostupne forme. Iako u ovom trenutku nisu bas sjajne, njihov izgled
ćete moći da doterate kada naučite da koristite CSS.
Sada treba da preduzmete dva bitna koraka. Prvi je da napravite kompletnu formu, od početka do kraja. Upotrebite što više polja za unos teksta, formi za
unos teksta, polja za potvrdu, radio dugmadi i listi.
Posle toga, naravno, treba da vodite računa o tome kako će se forma obraditi. Obrada forme može biti jednostavna ili složena, u zavisnosti od onog što
vam treba. Obrada formi se vrši na različitim tipovima servera, tako da tehnologije mogu biti različite, a ono što tehnologije mogu da urade sa vašim formama
(i koliko daleko mogu da idu) takođe varira. Srećom, postoji puno besplatnog materijala koji mogu da pomognu da forme efikasno implementirate.
Naučite više o formama
Ako želite da naučite više o obradi formi, posetite FAG (pitanja) iz grupe Web Design, na adresi http://www.htmlhelp.com/faq/html/forms.html.
Za listu hostova namenjenih obradi formi, proverite CGI Resource, na adresi http://cgi.resourceindex.com/Remotely_Hosted/From_Processing.
PHP skriptove za obradu formi možete pronaći na adresi http://php.resourceindex.com/Complete_Scripts/Form_Proccessing.
Vise podataka o obradi formi na Microsoftovoj .NET platformi možete pronaći u članku http://www.ondotnet.eom/pub/a/dotnet/2003/01/06/formsauthpl.html.
dipl.ing. Aleksandar Rikalović M.Sc.
Download

Vežba 5 - Dr. Dubravko Ćulibrk