1. Uvod – Šta je web forma?

Web forma je deo web stranice koji omogućava korisniku da unese podatke. Te podatke možemo poslati serveru na obradu ili ih obraditi pomoću JavaScript-a. Bez web formi, web stranice bi bile samo informativne – ne bismo mogli da komuniciramo sa njima.

Primeri iz svakodnevnog života su na primer: registracija na društvenim mrežama, prijava na e-mail, online kupovina, kontakt forma na sajtu, ...

2. Kako se kreira web forma?

Web forma se pravi pomoću HTML tag-a form

<form>
    <!-- Ovde se nalaze polja za unos -->
</form>

Element <form> predstavlja okvir unutar kojeg se nalaze kontrole za unos podataka.

Kada korisnik klikne na dugme za slanje (Submit), podaci iz forme se šalju ka web serveru.

3. Osnovni elementi web forme

Najvažniji elementi su:

🔹 1. input

Ovo je najčešće korišćen element za unos podataka.

Primer:

<input type="text">

Atribut type određuje vrstu unosa.

Najčešći tipovi:

  • text – unos teksta
  • password – unos lozinke
  • email – unos email adrese
  • number – unos broja
  • radio – izbor jedne opcije
  • checkbox – izbor više opcija

( LINK (na w3schools): HTML Form Input Types )

🔹 2. label

Koristi se za opis polja.

<label>Ime:</label>
<input type="text">

Bolja praksa je povezivanje:

<label for="ime">Ime:</label>
<input type="text" id="ime">
🔹 3. textarea

Za unos dužeg teksta.

<textarea></textarea>
🔹 4. select

Padajuća lista.

<select>
    <option>Beograd</option>
    <option>Novi Sad</option>
    <option>Niš</option>
</select>
🔹 5. button

Dugme za slanje forme.

<button type="submit">Pošalji</button>

4. GET i POST metoda

Forma može slati podatke na dva načina:

🔹 GET

  • Podaci se vide u URL adresi
  • Koristi se za pretrage

Primer nakon unosa imena Marko i klika na dugme, u URL liniji se vidi:  www.sajt.com?ime=Marko 

 

🔹 POST

  • Podaci se ne vide u URL-u
  • Bezbedniji način
  • Koristi se za registracije i prijave

5. Primer – Registraciona forma

Otvorite VS Code i napravite fajl: forma.html

Kreirati web formu za registraciju korisnika, u kojoj treba da se nalaze: ime, prezime, email, lozinka, pol, hobi, grad, komentar i dugme Pošalji

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Registracija</title>
</head>
<body>

    <h2>Registraciona forma</h2>

    <form >

        <label for="ime">Ime:</label><br>
        <input type="text" id="ime" name="ime"><br><br>

        <label for="prezime">Prezime:</label><br>
        <input type="text" id="prezime" name="prezime"><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email"><br><br>

        <label for="lozinka">Lozinka:</label><br>
        <input type="password" id="lozinka" name="lozinka"><br><br>

        <label>Pol:</label><br>
        <input type="radio" name="pol" value="muski"> Muški
        <input type="radio" name="pol" value="zenski"> Ženski
        <br><br>

        <label>Hobi:</label><br>
        <input type="checkbox" name="hobi" value="sport"> Sport
        <input type="checkbox" name="hobi" value="muzika"> Muzika
        <input type="checkbox" name="hobi" value="programiranje"> Programiranje
        <br><br>

        <label>Grad:</label><br>
        <select name="grad">
            <option>Beograd</option>
            <option>Novi Sad</option>
            <option>Niš</option>
        </select>
        <br><br>

        <label>Komentar:</label><br>
        <textarea name="komentar"></textarea>
        <br><br>

        <button type="submit">Pošalji</button>

    </form>

</body>
</html>

Sačuvajte fajl i otvorite ga u web browseru.

Objašnjenje nekih važnijih atributa:

  • name – koristi se za slanje podataka serveru

  • id – koristi se za povezivanje sa label i JavaScript-om

  • method – određuje način slanja podataka

  • type – određuje vrstu polja

Bez atributa name, podaci se ne mogu poslati ka serveru.

📝 VEŽBE

🔹 Vežba 1 (lakša)

Dodati sledeće elemente u formu: datum rođenja (type="date"), broj telefona (type="tel"), dugme za reset (type="reset")

🔹 Vežba 2 (srednja)

Napraviti novu formu pod nazivom Kontakt forma koja sadrži: Ime, Email, Naslov poruke, Poruku i Dugme na kojem piše: Pošalji

🔹 Vežba 3 (napredna)

Napraviti formu za naručivanje proizvoda koja sadrži: ime kupca, proizvod (select lista), količina (number), način plaćanja (radio), dodatne opcije (checkbox) i Dugme Pošalji

Linkovi:

Na nama razumljivom jeziku:

Na engleskom jeziku:

Last modified: Thursday, 26 February 2026, 8:53 PM