Vježba 8: Obrasci

Leon Kolarić

PRIPREMA ZA VJEŽBU

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

Obrasci na mrežnim stranicama služe za prikupljanje informacija od korisnika putem internetskog preglednika.

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

Na mrežnim stranicama možemo unositi datum, dob, ime, broj telefona i elektroničku poštu

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

Podaci koje je moguće iskoristiti za zlouporabu su podaci s bankovne kartice i osobni podaci kao OIB.

1. Obrasci

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

Tip	Opis
<input type=”text”>	Prikazuje polje za unos teksta u jednom retku
<input type=”radio”>	Prikazuje radio gumb (za odabir jednog od mnogih izbora)
<input type=”checkbox”>	Prikazuje potvrdni okvir (za odabir nula ili više od mnogo izbora)
<input type=”submit”>	Prikazuje gumb za slanje (za slanje obrasca)
<input type=”button”>	Prikazuje gumb na koji se može kliknuti

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?

<!DOCTYPE html>
<html>
<body>

<form action=”/action_page.php”>
<label for=”ime”>Ime:</label><br>
<input type=”text” id=”ime” name=”ime”><br>
<label for=”prezime”>Prezime:</label><br>
<input type=”text” id=”prezime” name=”prezime”><br><br>
<input type=”submit” value=”Submit”>
</form>

</body>
</html>

Navedite značajke za POST i GET

GET

-podaci se mogu vidjeti u URL-u stranice s koje smo poslali podatke.
-NIKAD se ne koristi za osjetljive podatke.
-maksimalna dužina je 2048 znakova

POST

-podaci nisu vidljivi u URL-u
-nema ograničenja za veličinu podataka.

3. Elementi obrasca

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

Element <form> može sadržavati input element, polje za tekst, labelu, radio gumb i potvrdni okvir.

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

Fieldset koristi se za grupiranje povezanih podatkovnih elementa u obrascu dok se legenda koristi za definiranje naslova fieldseta.

PRIMJER:

<!DOCTYPE html>
<html>
<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>

<form action=”/action_page.php”>
<fieldset>
<legend>Personalia:</legend>
<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”>
</fieldset>
</form>

</body>
</html>

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

Datelist koristi se za definiranje podataka koji će se nalaziti u padajućem izborniku.

PRIMJER:
<form action=”/action_page.php”>
  <input list=”browsers”>
  <datalist id=”browsers”>
    <option value=”Edge”>
  <option value=”Firefox”>
    <option value=”Chrome”>
  <option value=”Opera”>
    <option value=”Safari”>
  </datalist>
</form>

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

Output je element koji predstavlja rezultat računanja.

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

Ako koristimo vrijednost “password” sadržaj će se prikazivati kao zvjezdice (“*”).

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

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

Preglednik se ispisati okvir s bojom koju smo zadali.

PRIMJER:

<!DOCTYPE html>
<html>
<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type=”color”</strong> is used for input fields that should contain a color.</p>

<form action=”/action_page.php”>
<label for=”favcolor”>Select your favorite color:</label>
<input type=”color” id=”favcolor” name=”favcolor” value=”#ff0000″>
<input type=”submit” value=”Submit”>
</form>

<p><b>Note:</b> type=”color” is not supported in Internet Explorer 11.</p>

</body>
</html>

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

Preglednik će vrijednost date ispisati kao kalendar u kojem možemo odabrati željeni datum. Min i max služe nam za ograničavanje datuma.

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

Provjerava sadrži li podaci u polju tipa email znak ‘@’ i sadrži li točku.

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

Omogućuje nam da s našeg računala prenesemo datoteke na web stranicu

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?

<!DOCTYPE html>
<html>
<body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type “range” can be displayed as a slider control.</p>

</body>
</html>

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

Za unos telefonskog broje može se koristiti Input Type Tel.

5. Atributi ulaza

A. Objasnite čemu služi atribut value.

Atribut value omogućuje nam postavljanje početne vrijednosti u neko polje.

B. Objasnite čemu služi atribut maxlength.

Pomoću elementa maxlength ograničavamo broj znakova u nekom korisničkom unosu.

C. Objasnite čemu služi atribut required

Atribut required nam služi da bismo korisniku onemogućili daljnje korištenje obrasca.

6. Kreiranje obrazaca

A. Pokušajte kreirati obrasce.

<!DOCTYPE html>
<html>
<head>

<tr>
<th colspan = “2” >Prijaviti se</th>

</tr>
<tr>
<td><label for=”email”>E-mail adresa</label><br></td>
<td><input type=”email” id=”email” name=”email”><br></td>

</tr>

<tr>
<td><label for=”lozinka”>Lozinka</label><br></td>
<td><input type=”password” id=”lozinka” name=”lozinka”></td>

</tr>

</form>
</table>
</body>
</html>

<!DOCTYPE html>
<html>
<head>

}
</style>
</head>
<body>

<tr>
<th colspan = “2”; style= “background-color:orange;color:gold;text-align:left”>Prijaviti se</th>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”prezime”>Prezime</label><br></td>
<td><input type=”text” placeholder=”Unesi prezime”></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”datum”>Datum rođenja</label><br></td>
<td><input type=”date”></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”sopl”>Spol</label><br></td>
<td><input type=”radio” name =”spol”><label>Muško</label><input type=”radio” name =”spol” ><label>Žensko</label></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”drzava”>Država</label><br></td>
<td><input type=””></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”Br_tel”>Broj telefona</label><br></td>
<td><input type=”tel” placeholder=”Unesi telfonski broj”></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”Lozinka”>Lozinka</label><br></td>
<td><input type=”password”></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td style = text-align:right;><label for=”Ponovljena lozinka”>Ponovljena lozinka</label><br></td>
<td><input type=”password”></td>
</tr>

<tr style= “background-color:black;color:gold;”>
<td></td>
<td><input type=”button”><label> I Agree to the Terms of use</label> </td>
</tr>

</form>
</table>

</body>
</html>