Cilj vježbe:
Učenik će moći oblikovati i primijeniti obrasce za prikupljanje podataka korisnika prilikom uređivanja sadržaja mrežnih stranica, učenik će razlikovati vrste elemenata koji čine obrazac i njihove atribute.

Priprema za vježbu:

Zadatak 1: Čemu služe obrasci na mrežnim stranicama?
Odgovor: Oni služe za unos podataka od strane korisnika te se ti podaci šalju na server da se obrade.

Zadatak 2: Navedite primjere za najmanje pet vrsta podataka koji se mogu unositi na mrežnim stranicama.
Odgovor: Brojevi (cijeli, decimalni), riječ (ime, prezime...), znak (spol(M,Ž)), datum, link, email...

Zadatak 3: Navedite najmanje dva primjera za osjetljivost i moguće zloporabe podataka koji se unose na mrežnim stranicama.

Odgovor: Hakerski napadi, krađa identiteta i novaca.

Vježba:

1. Obrasci:

Primjer obrasca:

HTML element <form> koristi se za stvaranje HTML obrasca za korisnički unos:

<form>
.
form elements
.
</form>

Element je spremnik za različite vrste ulaznih elemenata: tekstualna polja, polja za označavanje, radio tipke, tipka “submit” i dr. Najčešće korišteni HTML element je , a može biti prikazan na različite načine ovisno o vrijednosti atributa type.

A. Navedite najmanje pet primjera sa objašnjenjima za vrijednost atributa type (pomoć: https://www.w3schools.com/html/html_forms.asp).

"text" - jedna linija u koju se upisuje tekst (najčešće jedna riječ)

"radio" - gumb(i) za odabir jednog od ponuđenih odgovora

"checkbox" - odabir niti jednog ili više ponuđenih odgovora

"submit" - prikazuje gumb za potvrdu

"button" - prikazuje gumb koji je moguće pritisnuti

B. Napišite HTML kod za obrazac koji će od korisnika tražiti da upiše ime i prezime u dva odvojena tekstualna polja. Uočite važnost međusobne povezanosti oznake “label” sa elementom “input” za “for”, “id” i “name”. Kolika je podrazumijevana dužina tekstualnog polja?

Duljina svakog od polja iznosi 20 znakova.

Radio tipke dozvoljavaju korisniku da bira JEDAN iz ograničenog broja izbora.

<input type="submit"> definira tipku za slanje podataka iz obrasca tzv. form-handler-u, tipično datoteci na poslužitelju koja sadrži skriptu za procesiranje ulaznih podataka. Form-handler se specificira u atributu action obrasca.

Uočite kako svako ulazno polje treba imati atribut name da bi ga se moglo poslati. Ako je taj atribut izostavljen, vrijednost ulaznog polja neće uopće biti poslana.

2. Atributi obrasca

Atribut action definira akciju koja će se izvesti nakon slanja obrasca. Obično se podaci obrasca, nakon što korisnik pritisne tipku submit, šalju datoteci na poslužitelju. Sa <form action="/action_page.php"> podaci koje sadrži popunjeni obrazac šalju se datoteci sa navedenim nazivom. Ta datoteka sadrži skriptu na poslužiteljskoj strani koja će obraditi podatke iz obrasca. Ako se taj atribut izostavi, akcija se postavlja na tekuću stranicu.

Atribut target određuje gdje će biti ispisan odgovor koji će biti primljen nakon slanja obrasca, a može imati vrijednosti: _blank, _self (podrazumijevano, otvara se u trenutnom prozoru), _parent, _top.

Primjer:

Atribut method određuje HTTP metodu koja će se koristiti kod slanja podataka iz obrasca. Ti se podaci mogu poslati kao URL varijable (method="get") ili kao HTTP post transakcija (method="post"). Podrazumijevani HTTP način kod slanja podataka iz obrasca je GET.

Primjer korištenja:

A. Navedite značajke za POST i GET (pomoć: https://www.w3schools.com/html/html_forms_attributes.asp). Ako podaci iz obrasca sadrže osjetljive ili osobne informacije, uvijek koristite POST!

Method je način na koji se potvrđuje vrsta podataka. Postoje dvije vrste potvrđivanja, a to su POST i GET:

POST:

dodaje podatke unutar HTTP zaglavlja, podaci URL-a nisu u URL-u
nema limita i mogu se poslati podaci bilo koje veličine
nema oznaka

GET:

prikazuje podatke u obliku URL-a
ne koristi se za slanje osjetljivih podataka
limitiran URL (2048 znakova)
koristan kad je potrebno označiti podatke
moguće označavanje

Atribut autocomplete uključuje ili isključuje opciju autocomplete. Kada je ta opcija uključena, preglednik će automatski upotpuniti vrijednosti prema vrijednostima koje je korisnik unio prije.

Primjer korištenja:

3. Elementi obrasca

A. Navedite bar pet različitih elemenata koje mogu sadržavati HTML elementi: <form>

<input>

<label>

Element <select> definira tzv. drop-down listu (padajuću listu).

Primjer:
<label for="auti">Odaberi auto:</label>
<select id="auti" name="auti">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Element <select> definira tzv. drop-down listu (padajuću listu).

Primjer:

   <label for="auti">Odaberi auto:</label>
   <select id="auti" name="auti">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="fiat">Fiat</option>
   <option value="audi">Audi</option>
   </select>

Elementi <option> definiraju mogućnosti koje mogu biti izabrane. Podrazumijevano je odabrana
prva stavka liste, no to se može promijeniti atributom selected: <option value="fiat"
selected>Fiat</option>. Atributom size može se promijeniti broj vidljivih vrijednosti: <select
id="cars" name="cars" size="3">. Atributom multiple može se dozvoliti korisniku da odabere više
od jedne vrijednosti: <select id="cars" name="cars" size="4" multiple>

Element textarea određuje ulazno polje sa više redova (tekstualno ulazno polje):

Ovdje unesite poruku.
</textarea>

Atribut rows određuje vidljivi broj linija u tekstualnom polju, a atribut cols određuje vidljivu širinu.

Element button određuje tipku koja se može pritisnuti: <button type="button" onclick="alert('Pozdrav svima!')">Klikni!</button>

B. Proučite primjer i odgovorite čemu služe elementi fieldset i legend:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_form_legend

Element fieldset služi za definiranje obrasca, a legend naslov obrasca.

C. Proučite primjer i odgovorite čemu služi element datalist:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_datalist

Element datalist služi za definiranje padajućeg izbornika i pomoću njega se lakše unose podaci.

D. Proučite primjer i odgovorite čemu služi element output:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_output

Element output služi za prikazivanje podataka.

4. Tipovi ulaza

A. Navedite bar deset različitih tipova ulaza za atribut type. Koja mu je podrazumijevana vrijednost?
Kako se ispisuje ako navedemo vrijednost „password“?

Podrazumijevana vrijednsot mu je tekst.

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password (ispis je maskiran)
radio
range
reset
search
submit
tel
text
time
url
week

B. Napišite kako se definira reset tipka koja sve vrijednosti unesene u obrazac resetira na njihove
podrazumijevane vrijednosti.

<input type="reset">

C. Što će preglednik ispisati ako se za tip postavi vrijednost „color“?

Preglednik će ispisat birač boja.

D. Što će preglednik ispisati ako sa za tip postavi vrijednost „date“? Čemu služe atributi min i max?

Ispisat će se birač datuma, a min i max određuju granice upisa.

E. Kako preglednik tretira tip „email“? Za koji će se tip preglednik ponašati slično?

Stvara polje za upis email adrese.

F. Što omogućuje tip „file“?

Omogućuje odabir datoteke s računala te stvara tipku browse za pronačaženje datoteke.

G. Kako ćete ispisati obrazac u kojem će biti dozvoljeno za količinu naručenih stvari unijeti samo
brojke i to od 1 do 5?

Potrebno je definirati granice unosa na sljedeći način: <input type="range" min="1" max="2"...>

H. Koji se tip može primijeniti za unos telefonskog broja?

Možemo primjeniti tip number.

5. Atributi ulaza

A. Objasnite čemu služi atribut value.

Služi za odabir tipa podataka.

B. Objasnite čemu služi atribut maxlength.

Definira najdulju dopuštenu duljinu unosa.

C. Objasnite čemu služi atribut required.

Označuje da je unos u to polje obavezan.

5. Kreiranje obrazaca

A. Pokušajte kreirati obrasce (bez oblikovanja, tekst treba biti na hrvatskom jeziku) na stranici
https://www.ankitweblogic.com/html/formexercise.php

Cilj vježbe: Učenik će moći oblikovati i primijeniti obrasce za prikupljanje podataka korisnika prilikom uređivanja sadržaja mrežnih stranica, učenik će razlikovati vrste elemenata koji čine obrazac i njihove atribute.

Priprema za vježbu:

​

Zadatak 1: Čemu služe obrasci na mrežnim stranicama? Odgovor: Oni služe za unos podataka od strane korisnika te se ti podaci šalju na server da se obrade.

​

Zadatak 2: Navedite primjere za najmanje pet vrsta podataka koji se mogu unositi na mrežnim stranicama. Odgovor: Brojevi (cijeli, decimalni), riječ (ime, prezime...), znak (spol(M,Ž)), datum, link, email...

​

Zadatak 3: Navedite najmanje dva primjera za osjetljivost i moguće zloporabe podataka koji se unose na mrežnim stranicama.

Odgovor: Hakerski napadi, krađa identiteta i novaca.

​

​

Vježba:

​

1. Obrasci:

​

Primjer obrasca:

​

A. Navedite najmanje pet primjera sa objašnjenjima za vrijednost atributa type (pomoć: https://www.w3schools.com/html/html_forms.asp).

​

"text" - jedna linija u koju se upisuje tekst (najčešće jedna riječ)

"radio" - gumb(i) za odabir jednog od ponuđenih odgovora

"checkbox" - odabir niti jednog ili više ponuđenih odgovora

"submit" - prikazuje gumb za potvrdu

"button" - prikazuje gumb koji je moguće pritisnuti

​

B. Napišite HTML kod za obrazac koji će od korisnika tražiti da upiše ime i prezime u dva odvojena tekstualna polja. Uočite važnost međusobne povezanosti oznake “label” sa elementom “input” za “for”, “id” i “name”. Kolika je podrazumijevana dužina tekstualnog polja?

​

Duljina svakog od polja iznosi 20 znakova.

Radio tipke dozvoljavaju korisniku da bira JEDAN iz ograničenog broja izbora.

<input type="submit"> definira tipku za slanje podataka iz obrasca tzv. form-handler-u, tipično datoteci na poslužitelju koja sadrži skriptu za procesiranje ulaznih podataka. Form-handler se specificira u atributu action obrasca.

​

Uočite kako svako ulazno polje treba imati atribut name da bi ga se moglo poslati. Ako je taj atribut izostavljen, vrijednost ulaznog polja neće uopće biti poslana.

​

2. Atributi obrasca

​

Element <select> definira tzv. drop-down listu (padajuću listu).

Primjer: <label for="auti">Odaberi auto:</label> <select id="auti" name="auti"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

​

4. Tipovi ulaza

​

A. Navedite bar deset različitih tipova ulaza za atribut type. Koja mu je podrazumijevana vrijednost? Kako se ispisuje ako navedemo vrijednost „password“?

​

Podrazumijevana vrijednsot mu je tekst.

​

button

checkbox

color

date

datetime-local

email

file

hidden

image

month

number

password (ispis je maskiran)

radio

range

reset

search

submit

tel

text

time

url

week

​

B. Napišite kako se definira reset tipka koja sve vrijednosti unesene u obrazac resetira na njihove podrazumijevane vrijednosti.

​