Elementi obrasca, kao što su polje za unos teksta, padajući izbornik, i drugi, zajedno s dugmetom za slanje podataka, definiraju se pomoću HTML oznaka input, textarea i select.

 

Ove oznake potrebno je postaviti unutar HTML oznake form koja definira sam obrazac.

 

Atributi koje je potrebno navesti za oznaku form su:

• method - način slanja podataka
• action - naziv, odnosno putanja do skripte koja će obraditi poslane podatke
• enctype – način kodiranja poslanih podataka (potrebno je navesti ukoliko se pomoću obrasca šalje datoteka, inače se može izostaviti)

 

Primjer oznake form mogao bi izgledati ovako:

 

<form method="get" action="Skripte/SpremiPodatke.php" enctype="text/plain">
    <!-- ovdje dolaze elementi obrasca -->
</form>

 

 

Polje za unos teksta

 

<input type="text" name="imeOsobe" maxlength="50" size="30" />

 

 

Polje za unos teksta ostvareno je pomoću oznake input kojoj je vrijednost atributa type postavljena na text.

 

Opcionalni atributi su:

• maxlength - maksimalni broj znakova koji se može upisati u polje
• size - vizualna širina polja

 

 

Polje za unos lozinke

 

<input type="password" name="lozinka" maxlength="50" size="30" />

 

Polje za unos lozinke ima atribut type postavljen na password.

Također može imati atribute maxlength i size.

 

 

Višelinijsko polje za unos teksta

 

<textarea name="adresa" cols="40" rows="5">
</textarea>

 

Polje za unos više linija teksta ostvareno je pomoću HTML oznake textarea.

Kod njega se ne može zadati maksimalna duljina pomoću atributa maxlength.

Vizualna svojstva poput visine i širine polja mogu se odrediti pomoću atributa rows i cols.

 

 

Dugme za odabir

 

<input type="radio" name="boja" value="crvena" checked="checked" />
<input type="radio" name="boja" value="zelena" />

 

Dugme za odabir ostvareno je pomoću oznake input kojoj je vrijednost atributa type postavljena na radio. Dugmad za odabir obično dolazi u grupama. Da bi bila povezana tako da samo jedno dugme može istovremeno biti pritisnuto, sva dugmad mora imati istu vrijednost atributa name.

 

Također, da bi skripta koja prima podatke znala koje je dugme pritisnuto, svako dugme mora imati vlastitu vrijednost atributa value. Ako se atribut checked postavi na vrijednost checked, dugme će biti unaprijed odabrano.

 

 

Kućica za označavanje kvačicom

 

<input type="checkbox" name="oznaciMe" checked="checked" />

 

Ovaj element najčešće omogućuje odabir (isključenje/uključenje) neke mogućnosti, ili unos podatka o tome da li je neki uvjet istinit ili ne.
Kućica za označavanje kvačicom može biti unaprijed označena, ako se atribut checked postavi na vrijednost checked.

 

 

Polje za odabir datoteke

 

<input type="file" name="datoteka" size="30" />

 

Ovaj element obrasca omogućava, klikom na dugme „Browse..“, odabir datoteke koja će se poslati na server zajedno s obrascem. Tekst „Browse…“ ne može se promijeniti.

Širina elementa može se namjestiti pomoću atributa size.

 

 

Padajući izbornik

 

<select name="boja">
    <option value="ff0000" selected="selected">
        Crvena
    </option>
    <option value="00ffff">
        Zelena
    </option>
</select>

 

Kod padajućeg izbornika, pojedine vrijednosti nalaze se unutar HTML oznaka option. Ako želimo da poslani podatak bude drugačiji od teksta prikazanog u izborniku, oznaci option možemo postaviti željenu vrijednost atributa value.

Ako želimo da neka vrijednost bude unaprijed odabrana, bit će potrebno postaviti vrijednost atributa selected na vrijednost selected.

 

 

Izbornik koji omogućuje odabir više elemenata

 

<select name="boja" multiple="multiple">
    <option value="ff0000">Crvena</option>
    <option value="00ff00">Zelena</option>
    <option value="ffff00">Ţuta</option>
</select>

 

Kod ovog elementa moguće je odabrati više od jedne ponuđene vrijednosti, korištenjem tipke CTRL prilikom odabira.

Ovaj element se dobiva tako da se oznaci select postavi atribut multiple na vrijednost multiple, a pojedine vrijednosti se također upisuju unutar oznaka option.

 

 

Dugme

 

<input type="submit" value="Pošalji" />
<input type="reset" value="Počisti" />
<input type="button" value="Povratak" />

 

Svaki obrazac na dnu ima dugme za slanje podataka (dugme tipa submit).

Pritiskom na njega, upisani podaci se šalju skripti na serveru koja će ih obraditi.

Ovo dugme je predodabrano dugme na obrascu. Ako pritisnemo <ENTER>, učinak će biti isti kao da smo mišem kliknuli na to dugme.

 

Obrazac ne može imati dva dugmeta tipa submit.

Dugme tipa reset briše sve podatke upisane u obrazac, bez slanja podataka skripti na serveru.
Dugme tipa button nema nikakvu predodređenu funkcionalnost, već je njegovo ponašanje potrebno posebno isprogramirati (na primjer, povratak na prethodnu stranicu.)
Dugmetu tipa submit, reset ili button vrijednost atributa value označava tekst koji će pisati na dugmetu.

 

 

Skriveno polje za unos podataka

 

<input type="hidden" name="skrivenoPolje" />

 

Pomoću ovog elementa moguće je skripti koja obrađuje podatke poslati neki podatak koji nije upisao korisnik (već je stvoren u kodu ili pročitan iz baze podataka), i to bez korisnikovog znanja.

Preglednik ne prikazuje ovaj element.

 

 

Podaci uneseni u obrazac šalju se na poslužitelj pritiskom na dugme za slanje podataka (dugme tipa submit).

PHP skripta kojoj se podaci šalju navedena je kao vrijednost atributa action, dok je način ili metoda prijenosa podataka određena atributom method.

 

Postoje dvije metode slanja podataka koje su dio HTTP protokola – metoda GET i metoda POST.

 

 

GET

 

Kod metode GET, podaci se šalju unutar URL adrese. Nedostatak je što su podaci tada vidljivi u navigacijskoj traci preglednika, a i dužina URL adrese je ograničena pa se veća količina podataka ne može poslati.

Obrazac kod kojeg se koristi GET metoda imat će vrijednost atributa method postavljenu na get:

 

<form method="get" action=" SpremiPodatke.php" >
</form>

Prijenos podataka GET metodom koristi se najčešće odvojeno od obrasca kad je potrebno nekoj skripti poslati malu količinu podataka. Većinom se susreće u linkovima, kada se npr. u URL adresi skripte koja prikazuje vijest proslijedi identifikator vijesti u bazi.

 

 

Takva URL adresa izgledala bi ovako:

ImeSkripte?nazivParametra=vrijednost

 

 

Primjer:

index.php?id=28

 

 

Ako se u URL adresi prosljeđuje više od jedne vrijednosti, koristi se znak & za dodavanje novog parametra:

ImeSkripte?naziv1=vrijednost1&naziv2=vrijednost2

Primjer:

index.php?id=28&backPID=28

 

 

 

POST

 

Kod metode POST, podaci se šalju unutar tijela HTTP zahtjeva i ne postoji ograničenje na količinu podataka koja se može poslati.

 

Obrazac koji šalje podatke metodom POST, mora imati vrijednost atributa method postavljenu na post:

 

<form method="post" action="SpremiPodatke.php" >
</form>

 

 

PHP skripta koja obrađuje podatke (dakle skripta koja je navedena u action atributu) mora dohvatiti poslane podatke kako bi se s njima izvršile daljnje akcije: spremanje u bazu podataka, slanje e-poštom, izračun rezultata.

Unutar te skripte, poslani podaci bit će dostupni u polju $_GET ili u polju $_POST, ovisno o korištenoj metodi prijenosa podataka. To su asocijativna polja čijem se članu može pristupiti preko vrijednosti atributa name željenog elementa obrasca.

 

Pretpostavimo da obrazac izgleda kao u ovom primjeru:

 

<form method="metodaSlanja" action="Skripta.php" >
    <input type="text" name="imeOsobe" />
    ...
</form>

 

U skripti koja obrađuje obrazac (Skripta.php) ovako će se dohvatiti vrijednost upisana u polje za unos teksta:

 

• za metodu GET:

$imeOsobe = $_GET['imeOsobe'];

 

• za metodu POST:

$imeOsobe = $_POST['imeOsobe'];

 

 

Osim polja $_GET i $_POST, postoji i polje $_REQUEST preko kojeg se može pristupiti podacima poslanim bilo metodom GET, bilo metodom POST. No, ono se rjeđe koristi.