naslovna
programiranje
HTML
CSS
PHP
MySQL
jQuery
Osnove
Struktura
Reference

Obrasci na webu služe kako bi korisnici mogli upisati neke podatke u preglednik i poslati ih poslužitelju.

Ovi podaci mogu biti tekst koji se upisuje u polje za pretraživanje, ili pak podaci koje korisnik upisuje u polje za unos komentara na web stranici, online anketu, ili u sučelje web aplikacije.

Glavna značajka obrazaca na webu je dugme čijim se pritiskom uneseni podaci šalju poslužitelju.

Poslužitelj obrađuje podatke i prikazuje korisniku povratnu informaciju – rezultate pretrage, ili poruku o uspješnom spremanju podataka.

 


Najpoznatiji primjer obrasca je početna stranica tražilice Google.

 

Element <form>

 

Element <form> je glavni HTML-element web obrasca. Unutar ovoga elementa nalaze se ostali elementi obrasca.

 

 

Element <form> ima sljedeće atribute:


    method – način slanja podataka. Moguće vrijednosti su
        o get – podaci se šalju putem URL-a
        o post – podaci se šalju u tijelu HTTP zahtjeva
    action – putanja do stranice (poslužiteljske skripte) koja obrađuje podatke. Putanja može biti apsolutna ili relativna
    enctype – način enkodiranja podataka

 


Primjer:
<form method="post" action="spremiPodatke.php">
</form>

 

Polje za unos teksta

 

Najčešće korišteni element obrazaca na webu je polje za unos teksta. Većina elemenata obrazaca, pa tako i polje za unos teksta dobiva se pomoću HTML-elementa <input>.

 

Ovo su osnovni atributi koji se koriste kod polja za unos teksta:

 

  •     type – postavljen na vrijednost text
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – početni tekst upisan u polju
  •     maxlength – maksimalni dozvoljeni broj znakova
  •     placeholder – tekst koji daje primjer unosa.

 

Primjer:
<input type="text" name="ime">

 

Kod ovakvoga polja za unos teksta moguć je unos samo jedne linije teksta.

Pomoću atributa maxlength moguće je ograničiti maksimalan broj znakova koji se mogu unijeti u polje.
Atribut placeholder omogućuje prikaz teksta koji će korisniku dodatno pojasniti namjenu polja. Najčešće se radi o tekstu koji daje primjer unosa, ili dozvoljeni / preporučeni format unosa. Klikom na polje ovaj će tekst nestati, a korisnik može nesmetano unijeti željeni tekst.

 

Dugme (button i input element)

 

Obavezni element svakoga obrasca je dugme pomoću kojega se podaci uneseni u obrazac šalju poslužitelju.

Dugme za slanje obrasca može se dobiti pomoću elementa input s atributom type postavljenim na vrijednost submit, ili pomoću elementa button. 

 

Ovo su osnovni atributi koji se koriste kad se element input koristi kao dugme za slanje obrasca:

  • type – postavljen na vrijednost submit
  • name – naziv polja koji se šalje zajedno s podacima
  • value – tekst prikazan na dugmetu (i vrijednost koja se šalje ako je gumb pritisnut).


Primjer:

<input type="submit" value="Pošalji">

 

 

Glavni razlog za upotrebu elementa button umjesto elementa input je to što je unutar elementa button moguće umetnuti druge HTMLelemente te na taj način dobiti formatirani tekst ili sliku.
Također, kod elementa button vrijednost koja se šalje ako je dugme pritisnuto može biti različita od teksta prikazanog u dugmetu.

Ova vrijednost je bitna ako obrazac ima više od jednog gumba za slanje pa je potrebno utvrditi koje dugme je pritisnuto.


Kod elementa button atributi se koriste ovako:

  • type – postavljen na vrijednost submit (može se i izostaviti)
  • name – naziv polja koji se šalje zajedno s podacima
  • value – vrijednost koja se šalje ako je gumb pritisnut


Primjer:

<button>
<strong>Pošalji</strong>podatke
</button>


U radu s obrascima susreće se i druga vrsta dugmeta – dugme za čišćenje obrasca, odnosno povratak obrasca na početne vrijednosti.

Ovo dugme se može dobiti pomoću elementa input ili pomoću elementa button, kod kojih je atribut type postavljen na vrijednost reset.


Primjer:

<input type="reset" value="Očisti">

Ili:

<button type="reset">Očisti</button>


Na kraju, moguća je i treća vrsta dugmeta, koju se također može dobiti pomoću elementa input ili pomoću elementa button, kod kojih je atribut type postavljen na vrijednost button.

Ova vrsta dugmeta nema nikakvu ugrađenu funkcionalnost, već je ponašanje dugmeta potrebno definirati pomoću JavaScripta.

 

Primjer:

<input type="button" value="Provjeri">

Ili:

<button type="button">Provjeri</button>

 

 

Polje za unos lozinke

 

Polje za unos lozinke također je ostvareno pomoću HTML-elementa <input>.

Koristi se kada je potrebno da korisnik upiše lozinku ili drugi povjerljivi podatak.


Osnovni atributi koji se koriste kod ovog polja su sljedeći:

  •     type – postavljen na vrijednost password
  •     name – naziv polja koji se šalje zajedno s unesenim podacima


Primjer:

<input type="password" name="lozinka">

 


Polje za unos broja


Polje za unos broja ostvareno je pomoću HTML-elementa <input> s atributom type postavljenim na vrijednost number.

Koristi se kada korisnik treba upisati brojčani podatak.


Osnovni atributi koji se koriste kod ovog polja su sljedeći:

  •     type – postavljen na vrijednost number
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – početna vrijednost upisana u polju
  •     min – minimalna dozvoljena vrijednost
  •     max – maksimalna dozvoljena vrijednost
  •     step – korak između dozvoljenih vrijednosti (defaultno 1).


Primjer:

<input type="number" name="dob" min="1" max="100">

 

 

 

Polja za unos e-mail adrese, URL-a i telefonskog broja


Polja za unos e-mail adrese, URL-a i telefonskog broja su, slično polju za unos broja, elementi za unos specijalne vrste podataka.


Osnovni atributi koji se koriste kod ovih polja su sljedeći:

  •     type – postavljen na vrijednost email, url ili tel
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – početni tekst upisan u polju
  •     maxlength – maksimalni dozvoljeni broj znakova
  •     placeholder – tekst koji daje primjer unosa


Primjer:

<input type="email" name="emailAdresa">
<input type="url" name="webAdresa">
<input type="tel" name="telefon">

 

 

Polje za unos datuma


Polje za unos datuma također je ostvareno pomoću HTML-elementa <input>. Koristi se kada korisnik treba unijeti, odnosno odabrati ispravan datum.


Osnovni atributi koji se koriste kod ovog polja su sljedeći:

  •     type – postavljen na vrijednost date
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – početna vrijednost upisana u polju
  •     min – minimalna dozvoljena vrijednost (u formatu yyyy-mm-dd)
  •     max – maksimalna dozvoljena vrijednost (u formatu yyyy-mm-dd)

    

Primjer:

<input type="date" name="datum" max="2050-12-31">

 

 


Polje za pretragu


Za unos teksta za pretragu može se, umjesto običnoga polja za unos teksta, koristiti posebno polje za pretragu.


Osnovni atributi koji se koriste kod ovog polja su sljedeći:
    

  •     type – postavljen na vrijednost search
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     maxlength – maksimalni dozvoljeni broj znakova
  •     placeholder – tekst koji daje primjer unosa


Primjer:

<input type="search" name="pretraga">

 

 


Dugme za odabir


Dugme za odabir (eng. radio button) upotrebljava se kada korisnik treba odabrati vrijednost s popisa vrijednosti (ali samo jedna vrijednost može
biti odabrana).


Ovo su osnovni atributi koji se koriste kod ovog elementa:

  •     type – postavljen na vrijednost radio
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – vrijednost koja se šalje poslužitelju
  •     checked – postavlja se ako dugme treba biti unaprijed odabrano (Booleov atribut)


Primjer:

<input type="radio" name="spol" value="m" checked>muški
<input type="radio" name="spol" value="f">ženski
<input type="radio" name="spol" value="n">ne želim odgovoriti

 

 


Kvačica za označavanje


Kvačica za označavanje (eng. checkbox) služi da bi se uključila ili isključila neka opcija.


Ovo su osnovni atributi koji se koriste kod ovog elementa:

  •     type – postavljen na vrijednost checkbox
  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     value – vrijednost koja se šalje poslužitelju (ne ispisuje se)
  •     checked – postavlja se ako kvačica treba biti unaprijed označena (Booleov atribut).

 

Primjer:

<input type="checkbox" name="obavijesti" value="da"> Da, želim primati obavijesti.

 

 


Polje za odabir datoteke


Polje za odabir datoteke služi kako bi korisnik mogao odabrati datoteku sa svoga računala.

Klikom na dugme za slanje obrasca, i datoteka će biti poslana na poslužitelj. Ako se koristi polje za odabir datoteke nije moguće koristiti metodu get (putem URL-a) za slanje podataka na poslužitelj.


Ovo su osnovni atributi koji se koriste kod ovog elementa:
    

  •     type – postavljen na vrijednost file
  •     name – naziv polja koji se šalje zajedno s podacima
  •     accept – lista dozvoljenih tipova datoteka (npr.. jpg,.png,.doc)
  •     multiple – postavlja se ako se dopušta odabir više datoteka (Booleov atribut).

    

Primjer:

<input type="file" name="datoteka">

 

 


Skriveno polje


Skriveno polje se koristi kada se želi poslati vrijednost koja neće biti vidljiva korisniku.

Primjer takve vrijednosti može biti identifikator zapisa iz baze ili druge vrijednosti koje su potrebne poslužitelju, a nije ih potrebno prikazati korisniku.

U tu svrhu koristi se element input s atributom type postavljenim na vrijednost hidden.


Ovo su osnovni atributi koji se koriste kod ovog polja:
    

  •     type – postavljen na vrijednost hidden
  •     name – naziv polja koji se šalje zajedno s podacima
  •     value – vrijednost koja se šalje poslužitelju


Primjer:

<input type="hidden" name="id" value="1742">

Ovo polje nije vidljivo u pregledniku.

 

 


Lista za odabir


Lista za odabir omogućuje odabir jedne (ili više) ponuđenih opcija.

U sličnu svrhu može se koristiti i dugmad za odabir (radio buttons) odnosno kvačice za označavanje (checkboxes), no ako se radi o većem broju ponuđenih vrijednosti, bolje je upotrijebiti listu za odabir.

Lista za odabir dobiva se pomoću HTML-elementa select. 


Njegovi atributi su sljedeći:

  • name – naziv polja koji se šalje zajedno s unesenim podacima
  • multiple – je li moguće odabrati više vrijednosti s liste (Booleov atribut)


Za svaku opciju unutar liste za odabir potrebno je navesti po jedan HTML-element option.


Njegovi atributi su sljedeći:

  • value – vrijednost koja se šalje na poslužitelj ako je ta opcija odabrana selected – je li ova opcija unaprijed odabrana (Booleov atribut) 

 

Tekst koji se ispisuje za svaku opciju piše se unutar elementa option

 

Primjer:

<select name="grad">
    <option value="zg">Zagreb</option>
    <option value="st" selected>Split</option>
    <option value="ri">Rijeka</option>
    <option value="os">Osijek</option>
</select>

 

 


Polje za višelinijski unos teksta


Kada je potrebno omogućiti unos većega teksta u obrazac, umjesto elementa <input type="text"> koristi se HTML-element textarea.


Ovo su osnovni atributi koji se koriste kod elementa textarea:
    

  •     name – naziv polja koji se šalje zajedno s unesenim podacima
  •     maxlength – maksimalni dozvoljeni broj znakova
  •     placeholder – tekst koji daje primjer unosa


Primjer:

<textarea name="komentar" maxlength="500"></textarea>


 

Uz svako polje u obrascu potrebno je navesti i njegov naziv tj. oznaku.

Taj tekst daje značenje pojedinom polju i poželjno ga je staviti unutar HTML-elementa label.


Osim vizualno, element label treba i u kodu povezati s odgovarajućim elementom polja, kako bi se olakšala upotreba obrasca osobama koje koriste čitače ekrana (kako bi čitač znao  ispravnu oznaku polja).

 

Ovo povezivanje postiže se tako da se na element label postavi atribut for s istom vrijednošću koju ima atribut id na odgovarajućem elementu input (ili drugom elementu obrasca).

 

<input type="radio" id="musko" name="spol" value="m">
<label for="musko">muško</label>
<input type="radio" id="zensko" name="spol" value="z">
<label for="zensko">žensko</label>
<input type="radio" id="ostalo" name="spol" value="n">
<label for="ostalo">ne želim odgovoriti</label>

 

 

Kako bi obrasci koji sadrže puno polja bili pregledniji, potrebno je vizualno grupirati srodne elemente u odvojene cjeline.
Takve cjeline dobivaju se upotrebom elementa fieldset, unutar kojega se navode elementi obrasca koji pripadaju toj cjelini.
Kao prvi element unutar elementa fieldset može doći element legend, unutar kojega se navodi naslov pojedine cjeline.


Primjer:

<fieldset>
    <legend>Osobni podaci</legend>
    <label for="ime">Ime i prezime:</label>
    <input id="ime" type="text" name="ime">
    <br><br>
    <label for="adresa">Adresa:</label>
    <input type="text" id="adresa" name="adresa">
</fieldset>