Vježba 8 – Obrasci

Posted on by josip-cvitkovic

Nastavni predmet – SKRIPTNI JEZICI I WEB PROGRAMIRANJE 

Naslov cjeline – HTML 

Naslov jedinice – Vježba 8: Obrasci 

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 

HTML obrazac koristi se za prikupljanje korisničkih ulaznih podataka. Ti se podaci obično šalju 

poslužitelju na obradu. Odgovorite na pitanja pisano u bilježnicu: 

 1. Čemu služe obrasci na mrežnim stranicama? 
HTML obrasci koriste se za prikupljanje korisničkih unosa. Korisnički unos se najčešće šalje poslužitelju na obradu. 

 2. Navedite primjere za najmanje pet vrsta podataka koji se mogu unositi na mrežnim stranicama. 
Može se unositi tekst, izbornik za jedan izbor, izbornik za 0 ili više izbora, opcija za slanje obrasca, gumb koji se može kliknuti.  

 3. Navedite najmanje dva primjera za osjetljivost i moguće zloporabe podataka koji se unose na mrežnim stranicama. 
Ako se na mrežne stranice unesu nečiji osobni podaci, oni mogu biti zloupotrebno iskorišteni. 
 

IZVOĐENJE VJEŽBE 

  1. Obrasci

 Primjer obrasca: 

 

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

<form> 

. 

form elements 

. 

</form> 

 

 Element <form> 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 <input>, 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, radio, checkbox, submit, button. 

 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? 
 

<html> 

<body> 

 

<h2>HTML Forms</h2> 

 

<form action=”/action_page.php”> 

  <label for=”fname”>First name:</label><br> 

  <input type=”text” id=”fname” name=”fname” value=”John”><br> 

  <label for=”lname”>Last name:</label><br> 

  <input type=”text” id=”lname” name=”lname” value=”Doe”><br><br> 

  <input type=”submit” value=”Submit”> 

</form>  

 

<p>If you click the “Submit” button, the form-data will be sent to a page called “/action_page.php”.</p> 

 

</body> 

</html> 

 

 Tip ulaza “radio” <input type=”radio”> definira radio tipku: 

<form> 

 <input type=”radio” id=”male” name=”spol” value=”musko”> 

 <label for=”musko”>Muško</label><br> 

 <input type=”radio” id=”female” name=”spol” value=”zensko”> 

 <label for=”zensko”>Žensko</label><br> 

 <input type=”radio” id=”drugo” name=”spol” value=”drugo”> 

 <label for=”drugo”>Ostalo</label> 

</form> 

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

 Kod <input type=”checkbox”> definira okvir za označavanje koji dozvoljava korisniku da bira nula 

ili više mogućnosti iz ograničenog broja izbora: 

<form> 

 <input type=”checkbox” id=”vozilo1″ name=”vozilo1″ value=”Bicikl”> 

 <label for=”vozilo1″> Imam bicikl</label><br> 

 <input type=”checkbox” id=”vozilo2″ name=”vozilo2″ value=”Auto”> 

 <label for=”vozilo2″> Imam auto</label><br> 

 <input type=”checkbox” id=”vozilo3″ name=”vozilo3″ value=”Brod”> 

 <label for=”vozilo3″> Imam brod</label> 

</form> 

 <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. 

  1. 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: <form action=”/action_page.php” target=”_blank”> 

 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: <form action=”/action_page.php” method=”get”>. 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! 

 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: <form action=”/action_page.php” autocomplete=”on”> 

  1. Elementi obrasca

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

 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): 

<textarea name=”message” rows=”10″ cols=”30″> 

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 koristi se za grupiranje povezanih podataka u obrascu, a element legende definira natpis za element fieldset. 

 

 C. Proučite primjer i odgovorite čemu služi element datalist: 

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

Element datalist navodi popis unaprijed definiranih opcija za ulazni element. 

 

 D. Proučite primjer i odgovorite čemu služi element output: 

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

Izlazni element predstavlja rezultat izračuna. 

 

  1. Tipovi ulaza
  2. Navedite bar deset različitih tipova ulaza za atribut type. Koja mu je podrazumijevana vrijednost?

Kako se ispisuje ako navedemo vrijednost „password“? 

accept-charset, action, autocomplete, enctype, method, name, novalidate, rel, target 

 

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

podrazumijevane vrijednosti. 

<input type=”reset”> definira gumb za resetiranje koji će vratiti sve vrijednosti obrasca na njihove zadane vrijednosti. 

 

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

<input type=”color”> koristi se za polja za unos koja trebaju sadržavati boju. 

Ovisno o podršci preglednika, birač boja može se pojaviti u polju za unos. 

 

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

<input type=”date”> se koristi za polja za unos koja trebaju sadržavati datum. Ovisno o podršci preglednika, birač datuma može se pojaviti u polju za unos. 

 

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

<input type=”email”> se koristi za polja za unos koja trebaju sadržavati e-mail adresu. 

Ovisno o podršci preglednika, adresa e-pošte može se automatski potvrditi nakon slanja. 

Neki pametni telefoni prepoznaju vrstu e-pošte i dodaju “.com” na tipkovnicu kako bi odgovarali unosu e-pošte. 

 

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

<input type=”file”> definira polje za odabir datoteke i gumb “Pregledaj” za učitavanje datoteka. 

 

  1. Kako ćete ispisati obrazac u kojem će biti dozvoljeno za količinu naručenih stvari unijeti samo

brojke i to od 1 do 5? 

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

<input type=”tel”> se koristi za polja za unos koja trebaju sadržavati telefonski broj. 

 

 

  1. Atributi ulaza
  2. Objasnite čemu služi atribut value.

Atribut ulazne vrijednosti navodi početnu vrijednost za polje za unos. 

  1. Objasnite čemu služi atribut maxlength.

Atribut maxlength navodi najveći broj znakova dopuštenih u polju za unos. 

 

  1. Objasnite čemu služi atribut required.

Atribut potreban unos navodi da se polje za unos mora ispuniti prije podnošenja obrasca. 

  

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

josip-cvitkovic

Komentari

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *