Vježba 8: Obrasci

PRIPREMA ZA VJEŽBU

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

HTML obrazac na web stranici omogućuje korisniku unos podataka koji se šalju poslužitelju na obradu.

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

Integer.
Floating-point number.
Character.
String.
Boolean.

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

Podatke mogu iskoristiti hakeri koji mogu pristupiti svim dijelovima web stranice. Podaci mogu biti osjetljivi ako se radi o osobnim informacijama koje ne bi trebale biti izložene na web sjedištu.

IZVOĐENJE VJEŽBE

1. Obrasci

<input type="radio">Definira gumb.

Radio gumbi omogućuju korisniku odabir jednog od ograničenog broja izbora.

for Atribut <label>tag bi trebao biti jednak ID atributu <input> elementa kako bi ih povezali zajedno.

2. Atributi obrasca

GET

GET je dobar za nesigurne podatke, poput nizova upita na Googleu
Korisno za podnošenje obrazaca kada korisnik želi označiti rezultat
Dodaje podatke obrasca URL-u, u parovima ime / vrijednost
Duljina URL-a je ograničena

POST

Dodaje podatke obrasca unutar tijela HTTP zahtjeva (poslani podaci obrasca nisu prikazani u URL-u)
POST nema ograničenja veličine i može se koristiti za slanje velike količine podataka.
Podnesci obrazaca s POST-om ne mogu se označiti

3. Elementi obrasca

A. Elementi:

<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

Element skupa polja koristi se za grupiranje povezanih podataka u obliku, a element legenda definira naslov za element polja.

Datalist element navodi popis unaprijed definiranih opcija za ulazni element.

Izlazni element predstavlja rezultat izračuna.

4. Tipovi ulaza

<Input type = “reset”> definira gumb za resetiranje koji vraća sve vrijednosti obrasca na početne vrijednosti.

Kvadrat u kojem se nalazi value reset ispunit će se crnom bojom te kada kliknemo dobit ćemo paletu boja.

Kvadrat u kojem se nalazi value reset ispunit će se tekstom “dd.mm.yyyy” te klikom na njega dobivamo kalendar.

Atribut max specificira maksimalnu vrijednost za element <input>.

Atribut min navodi minimalnu vrijednost za element <input>.

<a style=”margin: 0px; padding: 0px; border: 0px; color: #3d7e9a; text-decoration: none; font-family: Arial, x-locale-body, sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: -0.04448px; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;” title=”HTML element koristi se za stvaranje interaktivnih kontrola za web-obrasce kako bi se prihvatili podaci od korisnika; dostupan je širok izbor vrsta ulaznih podataka i kontrolnih dodataka, ovisno o uređaju i korisničkom agentu.” href=”https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input”><input>elementi tipa email koriste se za dopuštanje korisniku unosa i uređivanja adrese e-pošte unutar web preglednika. Preglednik će se slično ponašati za tip text.

<Input type = “file”> definira polje za odabir datoteke i gumb “Browse” za prijenos datoteka.

Koristiti ćemo Value=range

Tel vrijednost

5. Atributi ulaza

Atribut value specificira vrijednost elementa <input>.

Atribut maxlength specificira maksimalni broj znakova dopušten u elementu <input>.

Atribut required je logički atribut.

Kad je prisutan, određuje da se polje za unos mora ispuniti prije slanja obrasca.

6. Kreiranje obrazaca

<html>
<head>
<title>HTML Form Exercise 2</title>
<style>
li
{
text-transform:uppercase;
letter-spacing:2px;
}
body
{
font-family:Comic Sans MS;
}
</style>
</head>
<body bgcolor=”#CCFF99″>
<form>

<div style=”margin:auto; width:800px;”>
<fieldset style=”width:700px; height:500px; border:double; background-color:#0F6; padding:20px”>
<legend style=”font-size:24px; text-align:center; letter-spacing:5px”>Korisnički obrazac</legend>
<div style=”width:30%; padding:20px; float:left”>
<p><li>Ime</li>
<p><li>Lozinka</li>
<p><li>Spol/Rod</li>
<p><li>Adresa</li>
<p style=”height:60px;”><li>Datum rođenja</li>
<p><li>Odaberite sport </li>
<p><li>Bračni Status</li>
</div>

<div style=”width:55%;padding:20px; float:left;”>
<p><input type=”text” class=”textbox” />
<p><input type=”password” class=”textbox”/>
<p><input type=”radio” name=”r1″ /> M<input type=”radio” name=”r1″ />Ž <input type=”radio” name=”r1″/>Drugo
<p style=”height:100px”><textarea rows=”5″ cols=”20″ name=”description” class=”textbox”></textarea>
<p><select><option>Jan</option><option>Feb</option><option>Mar</option><option>Apr</option><option>May</option><option>Jun</option><option>Jul</option><option>Aug</option><option>Sep</option><option>Oct</option><option>Nov</option><option>Dec</option></select>
<select><option>1</option><option>2</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option></select>
<select><option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option></select>
<p><input type=”checkbox” name=”Nogomet”> Nogomet<input type=”checkbox” name=”Odbojka”> Odbojka<input type=”checkbox” name=”Rukomet”> Rukomet<input type=”checkbox” name=”Košarka”> Košarka
<p><input type=”radio” name=”r2″/>U braku<input type=”radio” name=”r2″/>Izvan braka
<p><input type=”Submit” value=”Podnesi”><input type=”Reset”>
<br><br>
<input type=”checkbox”/>Prihvaćam uvjete korištenja
</div>
</fieldset>
</form>

</body>
</html>