HTML forma

Forme (ili "formulari") su osnova interaktivnosti HTML-a i web aplikacija, i u upotrebi su još pre nastanka HTML5 standarda. Ulazni elementi su suštinski sva ona polja za unos, padajuće liste, radio dugmići (radio buttons) i polja za štikliranje (checkboxes). Pomoću ulaznih elemenata korisnik može unositi podatke koji se onda mogu obrađivati na klijentu, zahvaljujući JavaScriptu ili se mogu proslediti serveru. Možemo reći da je postojanje formi omogućilo kreiranje prvih web aplikacija.

Da bismo napravili formu na web stranici, koristimo oznaku <form>. Ova oznaka "grupiše" ulazne elemente, koji onda pripadaju toj formi. Na jednoj stranici, naravno, možemo imati koliko god formi nam je potrebno.

Takođe, ni sama forma na našoj stranici neće izgledati kao prozor alikacije iz ere Windowsa 95. Unutar forme možemo imati sve uobičajene HTML elemente - pasuse, blokove, tabele, linkove... Svi ti elementi, zatim sama forma, pa i ulazni elementi forme (bar donekle) mogu biti formatirani korišćenjem CSS-a.

Inače, po defaultu, sama forma je nevidljiva, u smislu da se neće prikazati nikakav okvir ili bilo šta slično oko naših ulaznih elemenata.

Elemenat forme ima nekoliko parametara, ali dva su od suštinskog značaja:

Akcija forme

Ako koristimo formu, znači da imamo nameru da podatke prosleđujemo serveru. Na strani servera se može naći CGI program, PHP, ASP, JSP ili slična stranica, koja pored HTML elemenata sadrži i program koji obrađuje prosleđene podatke.

To znači da u stvari forma predstavlja link ka nekoj drugoj, dinamičkoj, stranici, s tim što, za razliku od "pravog" <a> linka, uz poziv stranice, ka serveru "idu" i podaci koji se nalaze unutar ulaznih elemenata forme. Forma može biti povezana i za običan HTML dokument, ali to i nema mnogo smisla, pošto obična HTML stranica ne može da primi parametre (iako bi JavaScript mogao da "ulovi" podatke koji se prosleđuju putem URL-a).

Kao što je već rečeno, parametar action sadrži URL stranice/programa kome se prosleđuju podaci.

<form action="stranica.php" method="GET"> ...elementi unutar forme </form>

Kada se forma aktivira, korisnikov web čitač otvara navedenu stranicu. Pošto je skoro uvek u pitanju dinamička web stranica, njen izgled i sadržaj će zavisiti od prosleđenih podataka.

Verovatno se pitate, ako je forma kao link, na šta korisnik onda klikne da bi web čitač sledio taj link? Pa i za to postoji specijalan ulazni element tipa "submit" koji se takođe umeće unutar forme i se korisniku prikazuje kao dugmence na koje klikne kada završi unos podataka. Formu možemo aktivirati i pomoću JavaScript-a, tako da u tom slučaju možemo i da izbegnemo Submit dugmence.

Način slanja podataka

HTTP standard definiše dva moguća načina za prosleđivanje zahteva serveru - GET i POST. Upravo zbog toga u formi moramo obavezno da odredimo i način na koji će se podaci prosleđivati. To radimo pomoću parametra method.

<form action="stranica.php" method="GET"> ...elementi unutar forme </form>

Metod GET sve podatke iz forme "nakači" na URL, tako da korisniku izgleda da se učitala web stranica sa jako dugom i komplikovanom adresom. Ovaj metod je manje bezbedan, hakeri ga mogu koristiti za neke vrste napada, ali je istovremeno i jednostavniji za klijentske web aplikacije.

Ako stranica na serveru prima podatke putem GET metoda, možemo napraviti čak i običan <a> link koji prenosi neke parametre serveru. Kao što je već pomenuto, ovim podacima može pristupiti čak i JavaScript program unutar stranice, pa se podaci mogu obraditi i na klijentu.

Nije loše da znamo da se podaci u ovom slučaju prenose u obliku liste parova naziva i vrednosti. Lista počinje znakom ?, a svaki par se odvaja znakom &. To izgleda ovako:

http://www.sajt.com/stranica.php?naziv1=vred1&naziv2=vred2&...

Vodite računa da ni dužina URL-a ne može biti prevelika. Generalni savet je da se držite u nekom rangu do 2000 znakova. To znači da za bilo kakvu veću količinu podataka morate koristiti metod POST, pošto on ne ubacuje podatke u URL.

Sa druge strane, metod POST može biti malo komplikovaniji kada pravimo web aplikaciju, ali se zato podaci šalju "u pozadini" i tada nismo ograničeni maksimalnom veličinom URL-a (ipak, i ovde mogu postojati ograničenja, ali na serveru).

Kada radite sa formom koja prosleđuje podatke serveru, uvek usklađeno pravite bar dve stranice. Prva je "front-end", odnosno HTML stranica sa formom za unos podataka, a druga je "back-end", stranica sa serverskim programom koja prima i obrađuje podatke.

Stvar je u tome da kada forma prosleđuje podatke, oni moraju biti imenovani, jer se na serveru razlikuju upravo po tim imenima. Dakle, ako na serveru primamo podatke koji se zovu "ime" i "prezime", u našoj formi polja za unos takođe moramo nazvati "ime" i "prezime".

Svaki ulazni element zbog toga mora imati jedinstven (na nivou forme u kojoj se nalazi) naziv, zadat u parametru name, ali o tome ćemo više diskutovati kada se budemo bavili ulaznim elementima. Za sada pogledajte donji primer.

Primer

Ovo je deo HTML dokumenta unutar koga postoji forma. Forma poziva PHP stranicu biblioteka.php i prosleđuje joj vrednosti GET metodom.

Unutar forme se nalaze tri ulazna elementa: padajuća lista (<select>), polje za tekstualni unos (<input type="text">) i dugmence za "aktiviranje" forme, odnosno, poziv PHP strance i prosleđivanje podataka (<input type="submit">). 


  <form action="biblioteka.php" method="GET">
  
    Zanr: <select name="zanr"> 
      <option value="hor">horor</option>
      <option value="fan">fantastika</option>
      <option value="ist">istorijski</option>
      <option value="dra">drama</option>
    </select>

    <input type="text" name="pisac" value="" />

    <input type="submit" value="prikaz" />
   
  </form>

Podaci su "imenovani" prema name parametru koji poseduje svaki elemenat forme. To znači da će izabrani žanr biti označen kao zanr, a uneti pisac kao pisac. Podaci se prosleđuju GET metodom, tj. unutar URL-a stranice koja se poziva. Tako bi za npr. izabran žanr "hor" i uneto ime pisca "Barker", URL glasio:

biblioteka.php?zanr=hor&pisac=Barker

Vidimo da se niz vrednosti "kači" na stranicu dodavanjem znaka pitanja, a međusobno se povezuju znakom ampersend.

Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.