Prezentacija za dodatnu nastavu u Tehničkoj školi, Požega

1. HTML obrasci
Izrada obrazaca u XHTML i HTML5
standardima

2. Čemu služe obrasci?
 Obrazac (form) je dio stranice kojim omogućavamo
korisniku da unese (zada) neke podatke
 Nakon što korisnik ispuni podatke i klikne na (Pošalji ili
OK ili…) podaci se šalju drugoj stranici koja se
otvara, prima i obrađuje podatke
 Stranica koja prima podatke u većini slučaja je
dinamička, napisana u nekom skriptnom jeziku koji se
izvršava na poslužitelju
 Za sada se nećemo baviti obradom podataka iz
obrazaca, već samo HTML elementima za kreiranje
obrazaca i njihovih elemenata
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
2

3. Oznaka <form>
 Svaki obrazac koji predstavlja jednu cjelinu trebao bi se
nalaziti unutar oznaka <form> i </form>
 Element najčešće nije vidljiv na stranici, nego samo
predstavlja područje u koje umećemo elemente obrasca
 Oznaci form se najčešće zadaju slijedeći atributi:
» id – identifikator (ime) obrasca – potrebno je ako koristimo
Javascript
» method – određuje metodu kojom se šalju podaci. Moguće
vrijednosti su “get” i “post”
» action – relativna ili apsolutna adresa stranice koja prima
podatke iz obrasca
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
3

4. Oznaka <form>
» enctype – određuje način kodiranja podataka koji se šalju.
Moguće vrijednosti:
 application/x-www-form-urlencoded – to je najčešća vrijednost i
podrazumijeva se ako potpuno izostavimo enctype atribut.
To između ostalog znači da se svi razmaci zamjenjuju znakom +,
specijalni znakovi heksadekadskim vrijednostima itd
 multipart/form-data – ovu vrijednost koristimo ako u obrascu imamo
polje za slanje datoteke
 text/plain – rijetko se koristi
 Primjer:
<form id=”prijava” method=“post” action=“prijavi.php”>
…
</form>
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
4

5. Unos teksta
 <input type="text" name=“prezime">
Ovaj kod kreirat će element za unos teksta u jednom retku.
Koristimo ga za manje dijelove teksta, npr. ime, korisničko
ime, grad,…
 Ukoliko želimo da odmah na početku polje bude ispunjeno
nekim tekstom, tad ćemo zadati atribut value:
<input type="text" name= “prezime" value=“unesi prezime">
 Atribut value moguće je zadati većini elemenata obrasca
 On ujedno predstavlja vrijednost koja se šalje iz tog elementa
obrasca. Svaka vrijednost (varijabla) mora imati i svoje ime
koje je isto kao i ime elementa (iz atributa name)
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
5

6. …unos teksta
 <input type="password" name=“lozinka">
Ovaj kod kreirat će element za unos lozinki. Znakovi će
pri unosu biti maskirani.
 <textarea name=“opis" cols="50" rows="6"></textarea>
Ovaj element kreirati će element za unos dužeg teksta.
Atributima cols i rows možemo odrediti koliko “stupaca” i
redova teksta je vidljivo, no može se upisati i više teksta
– automatski će se uz njega pojaviti klizna traka.
Ukoliko želimo neki tekst na početku – jednostavno ga
upišemo između otvorene i zatvorene textarea oznake
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
6

7. Checkbox
 <input name="slazemse" type="checkbox" value="da">
Ovaj element kreira polje u kojemu korisnik može staviti
kvačicu i tako potvrditi neku opciju.
 SAMO AKO korisnik potvrdi opciju šalje se varijabla čije
ime odgovara imenu elementa (slazemse), a vrijednost
iz argumenta value (da)
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
7

8. Radio
 Namjena radio elemenata je da korisniku pruže izbor jedne od
nekoliko ponuđenih vrijednosti. Pogledajmo primjer:
<label>
<input type="radio" name="boja" value="B” checked>plava
</label><br />
<label>
<input type="radio" name="boja" value="G“>zelena
</label><br />
<label>
<input type="radio" name="boja" value="R“>crvena
</label>
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
8

9. …radio
 Za funkcionalnost je bitno da se svi elementi jednako
zovu (isti name)
 Šalje se varijabla čije ime odgovara imenu elemenata
(boja), a vrijednost će biti iz atributa value odabranog
elementa
 Ukoliko želimo da jedan element bude odabran na
početku (prije interakcije s korisnikom), tad tom elementu
dodamo svojstvo checked
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
9

10. Label – opis elementa obrasca
 Svim elementima obrasca može se (ne mora) dodati
opis pomoću html oznake label
 To se može učiniti na dva načina:
» Pomoću atributa for gdje zadamo ime elementa:
<label for="adresa">adresa:</label>
<input type="text" name="adresa" id="adresa">
» Ubacivanje elementa za unos unutar elementa label
<label>adresa:
<input type="text" name="adresa2" id="adresa2">
</label>
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
10

11. Padajuća lista
 Slično kao i radio element, padajuća lista služi za izbor
jedne od ponuđenih vrijednosti.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
 Vrijednosti koje vidi korisnik su unutar elemenata
option, (u ovom primjeru napisane velikim slovom), a
svaki option element ima atribut value koji određuje
vrijednost koja se šalje ako ta opcija bude izabrana.
WebGrupa - Tehnička škola, Požega - Hrvoje Mikolčević
2012. / 2013.
11