LV8.

LV 8. Obrasci

Petar Lovaković i Filip Marangunić

Priprema

1. Čemu služe obrasci na mrežnim stranicama?

2. Navedite primjere za najmanje pet vrsta podataka koji se mogu unositi na mrežnim stranicama.

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

Obrasci na mrežnim stranicama služe za prikupljanje različitih informacija od korisnika ili posjetitelja web mjesta. Ovi obrasci često sadrže polja koja korisnici popunjavaju s različitim podacima koji se zatim šalju na server web stranice radi daljnje obrade ili pohrane.

Primjeri vrsta podataka koji se mogu unositi na mrežnim stranicama uključuju:

a. Osobni podaci: Ime, prezime, adresa, datum rođenja.

b. Kontakt informacije: E-mail adresa, broj telefona.

c. Financijski podaci: Broj kreditne kartice, podaci o bankovnom računu.

d. Korisnički računski podaci: Korisničko ime, lozinka.

e. Sadržajni podaci: Tekstualni unos, slike, videozapisi.

Primjeri osjetljivosti i mogućih zloupotreba podataka koji se unose na mrežnim stranicama:

a. Financijski podaci: Ako se neosigurani podaci o kreditnim karticama ili bankovnim računima ne štite odgovarajućim sigurnosnim protokolima, postoji rizik od krađe identiteta ili financijske prijevare.

b. Osobni podaci: Nepravilna obrada ili zloupotreba osobnih podataka, poput prodaje ili distribucije podataka trećim stranama, može rezultirati kršenjem privatnosti i potencijalno pravno odgovornošću za organizaciju koja prikuplja te podatke.

Izvođenje vježbe

A Navedite najmanje pet primjera sa objašnjenjima za vrijednost atributa type

"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 Dužina tekstualnog polja iznosi 20.

3. A Navedite najmanje pet primjera sa objašnjenjima za vrijednost atributa type.

<input> elementi:

<input type="text"> - za unos teksta.

<input type="password"> - za unos lozinke.

<input type="checkbox"> - za checkbox.

<input type="radio"> - za radio dugmadi.

<input type="submit"> - za dugme za slanje forme.

<select> i <option> elementi:

<select> - za izbor iz padajuće liste.

<option> - za definisanje pojedinačnih opcija unutar <select> elementa.

<textarea> element:

<textarea> - za unos više redova teksta.

<button> element:

<button> - za definisanje dugmeta koje korisnici mogu kliknuti da bi poslali formu ili izvršili neku drugu akciju.

<label> element:

<label> - za označavanje teksta koji opisuje određeni unos (kao što je ime ili lozinka). Povezuje se s određenim <input> ili drugim form elementom pomoću atributa for ili stavljajući ih unutar <label> elementa.

B Proučite primjer i odgovorite čemu služe elementi fieldset i 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:

Element datalist navodi popis unaprijed definiranih opcija za ulazni element.

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

Izlazni element predstavlja rezultat izračuna.

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

Deset različitih tipova ulaza za atribut type: Text, Password, Reset, Color, Date, Email, File, Number, Range, Tel. Podrazumijevana vrijednost za atribut type je "text".

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

Ova linija koda stvara gumb koji, kad se pritisne, resetira sve vrijednosti unesene u obrascu na njihove podrazumijevane vrijednosti.

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

Ako se za atribut type postavi vrijednost "color", preglednik će prikazati kontrolu za odabir boje, obično polje koje omogućuje odabir boje pomoću paleta.

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

Ako se za atribut type postavi vrijednost "date", preglednik će prikazati kontrolu za unos datuma. Atributi min i max postavljaju minimalni i maksimalni dopušteni datum.

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

Ako se za atribut type postavi vrijednost "email", preglednik će očekivati unos e-mail adrese. Slično će se ponašati i za "tel" tip, ali za unos telefonskog broja.

F Što omogućuje tip „file“?

Tip "file" omogućuje korisnicima odabir datoteke s njihovog uređaja i slanje na poslužitelj putem obrasca.

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?

Za unos brojeva od 1 do 5 možete koristiti atribut type kao "number" i dodati atribute min i max, gdje je min=1, a max=5.

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

Za unos telefonskog broja možete koristiti atribut type kao "tel".

A Objasnite čemu služi atribut value.

Atribut value se koristi za postavljanje početne vrijednosti ili trenutne vrijednosti elementa unosa (input) u HTML formi. Ovaj atribut definira zadano ili prethodno uneseno stanje elementa. Na primjer, ako imate unos teksta, možete postaviti value kako biste predložili početni tekst ili, ako je korisnik već unio nešto, prikazali to u polju.

B Objasnite čemu služi atribut maxlength.

Atribut maxlength se koristi za postavljanje maksimalnog broja znakova koji korisnik može unijeti u određeno polje. Ovaj atribut pomaže u postavljanju ograničenja duljine unosa i koristi se često kod polja za unos teksta gdje želite kontrolirati duljinu unesenog sadržaja.

C Objasnite čemu služi atribut required.

Atribut required se koristi za označavanje da je određeno polje obavezno unijeti prije slanja obrasca. Ako je atribut prisutan, korisnici neće moći poslati obrazac dok ne unesu vrijednost u polje koje je označeno kao obavezno.

6. Pokušajte kreirati obrasce (bez oblikovanja, tekst treba biti na hrvatskom jeziku)

<!DOCTYPE html>

<head>

<title>Obrazac</title>

<style>

th{

font-size:30px;

background-color:#CBC;

color:red;

}

td{

padding: 2 15px;

background-color:#1RF;

}

input, textarea, select{

background-color:#CBB;

}

table

{

padding:0;

margin:20px;

width:50%;

background-color:#FDF;

}

.ma{

width:100%;

}

font-size:14px;

}

</style>

</head>

<body>

<form>

<tr> <th colspan="2"> Korisnicki obrazac </th> </tr>

<tr> <td> Upisi ime </td>

</tr>

<tr> <td> Upisi lozinku </td>

<tr> <td> Unesi adresu </td>

<tr> <td>Odaberi igru</td><td>

<input type="checkbox" />Hokej <br />

<input type="checkbox" />Nogomet<br />

<input type="checkbox" />Badminton<br />

<input type="checkbox" />Kriket<br />

<input type="checkbox" />Odbojka

</td></tr>

<input type="radio" name ="s1" checked="true" /> Musko

<input type="radio" name ="s1"/> Zensko

</td></tr>

<tr> <td> Odaberi svoje godine</td><td>

<option> odaberi </option>

</select>

</td></tr>

</td></tr>

</div>

</center>

</td></tr>

</table>

</form>

Page updated

Google Sites

Report abuse

LV8.

"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​

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