LV08 HTML Obrasci

Vježba 8: HTML Obrasci

Nika Bevanda, Bruno Blašković 3.C

 

 

PRIPREMA ZA VJEŽBU

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

 

Obrasci na mrežnim stranicama koriste se za prikupljanje podataka od korisnika. Oni omogućuju interakciju između korisnika i web stranice, olakšavajući obavljanje različitih radnji kao što su registracija, prijava, pretrage, narudžbe ili komunikacija s podrškom. Obrasci omogućuju unos informacija koje mogu biti obrađene za različite svrhe, kao što su:

  • Registracija korisnika (npr. kreiranje računa na web stranici),
  • Upitnici ili ankete (npr. prikupljanje povratnih informacija),
  • Kupovina ili narudžbe (npr. unos podataka za dostavu),
  • Kontakt obrazac (npr. za postavljanje pitanja ili zahtjeva),
  • Prijava na newsletter (npr. prijava na e-mail obavijesti).

 

 

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

 

  • Osobni podaci: ime, prezime, datum rođenja, adresa.
  • Kontakt podaci: e-mail adresa, broj telefona.
  • Podaci o plaćanju: broj kreditne kartice, podaci o računu, CVV kod.
  • Podaci o preferencijama ili interesima: omiljeni proizvodi, preferirani stilovi ili teme.
  • Pristupni podaci: korisničko ime, lozinka.

 

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

 

Krađa identiteta: Ako se osobni podaci poput imena, adrese, broja osobne iskaznice ili broja kreditne kartice neosigurano unesu na mrežnu stranicu, mogu biti ukradeni i iskorišteni za neovlaštene aktivnosti.

Phishing i prevara: Web stranice koje izgledaju kao legitimne mogu pokušati prikupiti osjetljive podatke.

 

 

 

 

 

IZVOĐENJE VJEŽBE

  1. Obrasci
  • Navedi najmanje pet primjera sa objašnjenjima za vrijednost atributa type:

type=”text”  -Koristi se za definiranje tekstualnog polja u kojem korisnici mogu unositi jednostavan tekst.

type=”password” -definira polje u kojem uneseni podaci neće biti vidljivi, već će se prikazivati kao zvjezdice ili točkice. Koristi se za unos lozinki.

type=”email” -Omogućuje unos e-mail adrese i obično uključuje automatsku provjeru ispravnosti formata e-mail adrese.

type=”number” -omogućava unos samo numeričkih vrijednosti, a preglednik može automatski prikazivati odgovarajuće tipke za povećanje ili smanjenje broja.

type=”date” -omogućava unos datuma u standardnom formatu (npr. yyyy-mm-dd). Prikazuje datumni odabir (kalendarski alat) u modernim preglednicima.

 

 

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

Podrazumijevana dužina za <input type=”text”> je oko 20 znakova u većini preglednika. Ovo znači da će se polje širiti da može unijeti do 20 znakova uobičajene širine.

 

 

  1. Atributi obrasca
  • Navedi značajke za POST i GET:

Metode POST i GET koriste se za slanje podataka između klijenta (obično web preglednika) i poslužitelja u HTTP protokolu.

GET metoda:

Vidljivost podataka: Podaci su vidljivi u URL-u.

Sigurnost: Manje sigurno (podaci se mogu vidjeti u adresnoj traci).

Ograničenje veličine: Ograničeno (oko 2000 znakova).

Upotreba: Za dohvaćanje podataka (npr. pretrage, filtriranje).

Idempotentnost: Da (ponovno izvođenje ne mijenja stanje na serveru).

 

POST metoda:

Vidljivost podataka: Podaci su u tijelu zahtjeva, nisu vidljivi.

Sigurnost: Sigurnije (podaci nisu vidljivi u URL-u).

Ograničenje veličine: Nema ograničenja (osim onih postavljenih na serveru).

Upotreba: Za slanje podataka koji mijenjaju stanje na serveru (npr. obrasci, prijave, upload datoteka).

Idempotentnost: Ne (ponovno izvođenje može promijeniti stanje na serveru).

 

 

  1. Elementi obrasca
  • Navedi bar pet različitih elemenata koje mogu sadržavati HTML elementi <form> :

 <input> – Omogućuje unos različitih vrsta podataka, kao što su tekst, lozinka, broj, e-mail itd.

<textarea> – Koristi se za unos višerednog teksta, npr. za komentare ili duže odgovore.

<select> – Stvara padajući izbornik s različitim opcijama koje korisnik može odabrati.

<button> – Kreira dugme za slanje obrasca ili za aktivaciju drugih radnji (npr. za izvršavanje funkcija).

<label> – Povezuje opisni tekst s određenim unosom u obrascu, poboljšavajući pristupačnost i jasnoću za korisnike.

 

  • Prouči primjer i odgovori čemu služe elementi fieldset i legend:

Elementi <fieldset> i <legend> koriste se u HTML-u za grupiranje i označavanje povezanih elemenata unutar obrazaca, čime se poboljšava organizacija i pristupačnost.

<fieldset> kada se koristi, obično dodaje okvir oko grupe elemenata unutar obrasca, čime se korisnicima daje vizualni znak da su ti podaci povezani.

Tekst unutar <legend> elementa obično se prikazuje na vrhu okvira koji stvara <fieldset>, čime se poboljšava preglednost obrasca.

 

  • Prouči primjer i odgovori čemu služi element datalist:

Element datalist navodi popis unaprijed definiranih opcija za ulazni element.

 

  • Prouči primjer i odgovori čemu služi element output:

Izlazni element predstavlja rezulatat izračuna.

 

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

Evo deset različitih tipova koji se mogu koristiti za atribut type u HTML-u:

text – za unos običnog teksta.

password – za unos lozinki (uneseni tekst se prikazuje kao zvjezdice ili točkice).

email – za unos e-mail adresa; preglednik može automatski provesti osnovnu validaciju.

number – za unos brojeva, s mogućnošću definiranja minimuma i maksimuma.

date – za unos datuma (prikazuje kalendar).

color – za odabir boje (prikazuje sučelje za odabir boje).

file – za odabir datoteka s računala korisnika.

checkbox – za unos potvrde ili odjave (pomoću kutije za potvrdu).

radio – za unos jedne opcije iz skupine (radio tipke).

range – za unos broja unutar određenog raspona pomoću klizača (slider).

 

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

Reset tipka se koristi za vraćanje svih vrijednosti unesenih u obrazac na njihove podrazumijevane vrijednosti.

type=”reset” stvara gumb koji resetira sve unosene podatke u obrascu na njihove početne vrijednosti.

 

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

Ako se za type postavi vrijednost color, preglednik će prikazati sučelje za odabir boje, kao što je paleta boja ili okvir za unos heksadecimalnog koda boje. Korisnici mogu kliknuti na boju ili unijeti vlastitu.

 

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

Ako se za type postavi vrijednost date, preglednik će prikazati sučelje za odabir datuma. Obično se pojavljuje kalendar u kojem korisnik može odabrati datum.

Atributi min i max omogućuju definiranje minimalnog i maksimalnog datuma koji korisnik može odabrati.

 

 

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

Ako se za type postavi vrijednost email, preglednik:

Validira uneseni tekst kako bi provjerio je li ispravan format e-mail adrese.

Ako uneseni podatak nije validan, preglednik može prikazati upozorenje i onemogućiti slanje obrasca.

Sličan tip je url, koji omogućuje unos URL-a i također provodi validaciju kako bi provjerio ispravan format.

 

  • Što omogućuje tip „file“?

Ako se za type postavi vrijednost file, preglednik omogućuje korisniku da odabere jednu ili više datoteka s računala koje će se poslati zajedno s obrazcem.

 

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

Ako želimo omogućiti unos brojeva između 1 i 5 u obrascu, koristit ćemo <input type=”number”> s atributima min i max.

 

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

Za unos telefonskog broja koristi se tip tel.

Omogućuje unos broja telefona, a preglednik može omogućiti samo unos brojeva, ali ne provodi nužno specifičnu validaciju.

 

 

  • Top of Form
  1. Atributi ulaza
  • Objasni čemu služi atribut value.

Atribut value koristi se za definiranje ili prikazivanje početne vrijednosti HTML elementa, najčešće u elementima kao što su <input>, <button>, <option>, i drugi.

 

  • Objasni čemu služi atribut maxlength.

Atribut maxlength definira maksimalnu broj znakova koji korisnik može unijeti u tekstualno polje, kao što je <input type=”text”> ili <textarea>. Ovaj atribut pomaže u ograničavanju unosa korisnika kako bi se spriječilo prekomjerno unosanje podataka koji nisu prihvatljivi ili koji mogu uzrokovati probleme u aplikaciji.

 

  • Objasni čemu služi atribut required.

Atribut required označava da je određeno polje obavezno za unos i da korisnik mora unijeti podatke u to polje prije nego što obrazac bude poslan. Ako je polje označeno s required, preglednik neće dopustiti slanje obrasca dok polje ne bude ispunjeno.

 

  1. PRAKTIČNI DIO: Kreiranje obrazaca
  • Na istoj stranici oblikuj bar dva od navedenih primjera obrazaca:

<!DOCTYPE html>
<html>
<body>

<h2>ZADATAK</h2>

<form action=”/action_page.php”>
<label for=”fname”>Ime</label><br>
<input type=”text” id=”fname” name=”fname” value=”John”><br>
<label for=”lname”>Prezime:</label><br>
<input type=”text” id=”lname” name=”lname” value=”Doe”><br><br>
<input type=”submit” value=”Potvrdi”>
</form>

</body>
</html>

 

<!DOCTYPE html>
<html lang=”hr”>
<head>
<title>ZADATAK 6</title>
</head>
<body>
<h2>ZADATAK 6</h2>
<form action=”/submit” method=”POST”>
<label for=”ime”>Ime:</label>
<input type=”text” id=”ime” name=”ime” required maxlength=”50″>
<br><br>

<label for=”prezime”>Prezime:</label>
<input type=”text” id=”prezime” name=”prezime” required maxlength=”50″>
<br><br>

<label for=”datumrodjenja”>Datum Rođenja:</label>
<input type=”date” id=”dat” name=”datum” required>
<br><br>

<p>Odaberite spol:</p>

<label for=”muski”>
<input type=”radio” id=”muski” name=”spol” value=”Muški”>
M
</label>

<label for=”zenski”>
<input type=”radio” id=”zenski” name=”spol” value=”Ženski”>
Ž
</label>
<br><br>

<label for=”drzava”>Država <select name=”drzava”>
<option value=”hrvatska”>Hrvatska</option>
<option value=”srbija”>Srbija</option>
<option value=”bosna”>Bosna i Hercegovina</option>
</select>
<br><br>

<label for=”telefon”>Telefonski broj:</label>
<input type=”tel” id=”telefon” name=”telefon” required >
<br><br>

<label for=”email”>E-mail:</label>
<input type=”email” id=”email” name=”email” required>
<br><br>
<label for=”lozinka”>Lozinka:</label>
<input type=”password” id=”lozinka” name=”lozinka” required>
<br><br>
<label for=”lozinka-potvrda”>Potvrdite lozinku:</label>
<input type=”password” id=”lozinka-potvrda” name=”lozinka-potvrda” ” required minlength=”8″>
<br><br>
<label for=”raz”>
Pristajem na sve uvjete upotrebe</label>
<input type=”checkbox” id=”1″ name=”1″ value=”Yes”>
<br><br>
<button type=”submit”>Pošaljite</button>
</form>
</body>
</html>