HTML Osnove

Forme (form)

Na web sajtu, forma je osnovni način komunikacije sa korisnicima. Ispod je dat izgled jedne tipične forme na sajtu.

29-html-forma

Forma je sastavljena iz različitih polja za unos podataka i, po pravilu, dugmeta na dnu koje služi da se unešeni podaci pošalju. Podaci mogu biti poslati na mail ili uskladišteni u bazu podataka.

Osnovni tag za kreiranje formi naziva se form. Njegova uloga je da sve podatke koje korisnik unese u okviru forme posmatra kao celinu i kao takve ih dalje procesuira.

Nije moguće ugnjezditi jednu formu unutar druge.

Osnovni tagovi forme su input tagovi i namenjeni su unošenju podataka od strane korisnika. Postoji nekoliko tipova input polja, zavisno od vrste podataka koji se unose.

Tako postoje input polja namenjena unošenju kraćeg teksta (ime, prezime, adresa), brojnih vrednosti (telefon, matični broj), password polja, polja za unos veće količine teksta. Pored ovih, postoje i input polja specijalne namene kao što su izbor jedne od ponudjenih opcija u vidu kružića na koje korisnik klikće, čekiranje jedne ili više opcija od ponudjenih, itd.

Na kraju, poseban tip input taga je i dugme koje služi za slanje podataka nakon što korisnik pravilno popuni formu.

Sada ćemo prikazati jednu jednostavnu formu u koju korisnik unosi svoje ime i prezime. Forma izgleda ovako

<form method=”get” action=”procesuiraj.php”>

Ime: <input type=”text” name=”ime” placeholder=”unesite vase ime…”><><br>
Prezime: <input type=”text” name=”prezime” placeholder=”unesite vase ime…”><>
</form>

Ako pogledamo u pretraživaču:

30-html-forma-u-pretrazivacu

Radi preglednosti, iskopiraćemo ponovo kod formulara.

<form method=”get” action=”procesuiraj.php”>
Ime: <input type=”text” name=”ime” placeholder=”unesite vase ime…”><br>
Prezime: <input type=”text” name=”prezime” placeholder=”unesite vase ime…”>
</form>

U prvom i poslednjem redu definišemo granice forme. Sve unutar otvarajućeg i zatvarajućeg taga form biće posmatrano kao celina.

U drugom redu, pre <input> taga nalazi se tekst Ime: kako bi korisnik znao šta od podataka treba da unese. Tekst Ime: koji stoji ispred input taga nije nešto što program gleda kada procesuira formu, tj. za dalje procesuiranje unetih podataka važan je name atribut. U našem slučaju vrednost atributa name je ime, a u drugom input polju, vrednost atributa name je prezime. Ovi podaci se kasnije koriste za procesuiranje.

Vrednosti atributa name ne prikazuju se nigde unutar prozora pretraživača.

Naime, šta bi se desilo da ne postoji različito definisano ime input polja (vrednost vezana za atribut name). Server bi dobio oba podatka (ime i prezime) ali ne bi znao koji unos odgovora kom polju. Isto to zbunilo bi i developera koji treba da iskoristi te podatke. Iz tog razloga, svako polje se jednoznačno obeležava kako bi se uneti podaci kasnije pridružili adekvatnom imenu.

Dalje, u oba input polja nalazi se atribut koji definiše tip polja. U našem slučaju, očekujemo da korisnik unese kraći niz karaktera pa ćemo oba polja definisati kao type=”text”.

Ovo znači da je u njih moguće uneti neki od karaktera definisanih u ASCII ili UTF-8 standardu uključujući I naša slova.

Atribut placeholder predstavlja tekst koji se pojavljuje u delu za unos podataka i ostaje prikazan do trenutka kada korisnik klikne u to polje i počne da unosi podatke. On ustvari predstavlja dodatni opis kakav tip podataka očekujemo.

Šta nedostaje ovoj formi?

Mogućnost da nakon unošenja podataka, o tome obavestimo pretraživač. Ta akcija oličena je u dugmetu koje se nalazi pri dnu svake forme. Kod koji nam je u ovu svrhu potreban je

<input type=”submit” value=”Submit”>
Sada će kompletiran kod forme izgledati kao

<form method=”get” action=”procesuiraj.php”>
Ime: <input type=”text” name=”ime” placeholder=”unesite vase ime”><br>
Prezime: <input type=”text” name=”prezime” placeholder=”unesite vase ime”>

<input type=”submit” value=”Submit”>
</form>

31-html-forma

Akcija koja se inicira klikom na dugme Submit usko je povezana sa postojanjem method i action atributa u form tagu.

U cilju daljeg objašnjenja, pretpostavićemo da smo u polje sa atributom name=ime uneli Milan a u polje sa atributom name=prezime Petrovic.

Nakon klika na dugme Submit, pretraživač poziva fajl definisan u action atributu (u našem slučaju procesuiraj.php) a vrednosti dobijene od korisnika zapisuje u nastavku adrese u sledećem obliku:

www.primer.rs/folder_putanja/proba.html?ime=Milan&prezime=Petrovic

Ta operacija naziva se HTTP GET upit i podrazumeva da pretraživač, nakon imena stranice na koju link upućuje, doda znak pitanja (?) I nakon njega vrednosti iz input atributa name (u ovom slučaju atribut ime sa vrednošću Milan i atribut prezime sa vrednošću Petrovic) . U našem slučaju, taj niz izgleda ovako:

?ime=Milan&prezime=Petrovic

Znači, znak pitanja, pa vrednost atributa prvog input polja name, zatim znak jednako (=) iza koga sledi uneto ime. Nakon ispisanih podataka iz prvog input polja sledi znak (&) koji se automatski dodaje ukoliko sledi još jedan podatak (u našem slučaju to je atribut prezime) u ovom slučaju prezime=Petrovic

U slučaju da korisnik u polje ime ne unese ništa, adresna linija bi izgledala ovako:

www.primer.rs/folder_putanja/proba.html?ime=&prezime=Petrovic

ili za slučaj da korisnik nije ništa uneo već kliknuo na dugme Submit :

www.primer.rs/folder_putanja/proba.html?ime=&prezime=

Ono što se kasnije dešava je da navedeni file (procesuiraj.php) preuzima ove podatke i sa njima manipuliše u smislu skladištenja u bazu podataka, ispisa na ekranu, slanja na definisanu mail adresu, itd.

Pored osnovnog input taga tipa text, postoje i drugi atributi. Da bi ih lakše objasnili, pogledaćemo primere u nastavku.

 

INPUT type password

Lozinka: <input type=”password” name=”loz”>

U input polje tipa password se mogu unositi isti znakovi kao i u polju text sa tom razlikom što se karakteri koje kucamo u ovom polju ne prikazuju onako kako ih kucamo već u vidu simbola •

32-html-form-input-polje

INPUT type radio

<input type=”radio” name=”pol” value=”muski”>Muski<br>
<input type=”radio” name=”pol” value=”zenski”>Zenski<br>

Ovo polje je složenije i podrazumeva izbor samo jedne od grupe ponudjenih opcija. Grupišu se preko atributa name, znači može biti izabrana samo jedna opcija unutar grupe sa imenom pol

33-inpu-tip-radio-forme-html

INPUT type checkbox

Za razliku od tipa radio, unutar checkbox grupe polja može biti izabran nijedan, jedan ili više checkbox elemenata.

<input type=”checkbox” name=”vozilo” value=”bicikl”>Ja imam bicikl
<input type=”checkbox” name=”vozilo” value=”auto”>Ja imam auto

34-input-tip-checkbox-forme-html

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn