Uvod
  • HTML forme ili Formulari služe za prikupljanje informacija od posetilaca stranice.
  • Često se koristi se i termin web forme (malo složeniji termin) u šta spadaju HTML forme i sve ono sa čime se povezuju.
  • Engleski naziv je Form, pa se često u svakodnevnom govoru koristi i samo naziv "forme".

( .... Inače, ovo bi trebalo da je obrađivano u okviru predmeta Web dizajn, u toku drugog razreda, i predmeta Web programiranje, u prvom polugodištu, pa se stoga ovde neće objašnjavati svi detalji. Umesto toga će biti postavljena samo neka kratka objašnjenja i smernice kako da se podsetite najvažnijih pojmova - reference i/ili tutorijali .... )

Šta je HTML forma?

HTML forma je deo web stranice koji omogućava korisnicima da unesu podatke i pošalju ih na obradu. Obrada je najčešće na serveru, ali može da bude i na strani klijenta. 

Element forme definiše se pomoću HTML taga <form>.

<form>
 .
   form elements
 .
</form>

Unutar <form> se postavljaju polja za unos podataka: input elementi, kao što je unos teksta, checkbox, radio button, submit button, ...

(Link za kompletnija objašnjenja na web sajtu w3schools-a: HTML Forms)

Zadatak:   

Kreirati formu sa jednim poljem za unos imena i dugmetom za slanje podataka.

 Nastavljamo rad direktno na web serveru:

- slika: veza od korisnika do web servera. Ispod piše: Web server je softver koji korisnicima šalje web stranice -

Da bi bolje prikazali kako sve ovo radi, u nastavku ćemo da radimo direktno na lokalnom web serveru. 
Web server koji ćemo da koristimo je Apache i on se nalazi u okviru XAMPP-a.

  • Napomena: u školi u učionici 17 koristimo portable varijantu u verziji 7.4.27, koji se nalazi na D:\xampp   - NIJE INSTALIRANO i ne pokušavajte tražiti među aplikacijama!

  • Iza sledećeg dugmeta je vizuelno demonstrirano pokretanje XAMPP, Apache i kako da se radi direktno na lokalnom web serveru:

Redosled rada u učionici:

  1. Pokrenite XAMPP, i na njemu pokrenite Apache web server (nema potrebe pokretati bilo šta drugo na XAMPP-u)
  2. Unutar foldera htdocs kreirati folder u kojem će se raditi (npr. webAca) i u njemu podfolder forme
  3. Otvoriti taj folder sa VS Code i u njemu kreirati fajl index.html :
    • Nakon unosa html šablona postaviti naslov: "Rad sa formama" i ispod njega jednostavnu formu: 
      <form>
    <label for="name">Ime:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Pošalji</button>
</form>
    • Sačuvati fajl
  4. U browseru kucati: localhost/webAca/forme (umesto webAca koristiti naziv vašeg foldera)

Web root folder je onaj folder koji je početna web lokacija za vaš web server. Kada se kuca adresa servera, to je folder koji se otvara!

Ako se web server nalazi u lokalu (na vašem računaru) dovoljno je samo kucati localhost.

U našem slučaju, pošto koristimo portable XAMPP, koji se nalazi na D:\xampp, unutar njega se već nalazi folder htdocs koji je web root folder (ako ništa nije menjano od podrazumevanih vrednosti).

Unutar foldera htdocs kreiran je folder u kojem će se raditi - naziv foldera treba da sadrži deo imena učenika (webAca).

Kucanjem u browseru: localhost smo označili da idemo na lokalni web server, a dodavanjem /webAca znači da idemo u taj folder koji se otvara i prikazuje se šta ima u njemu, i tako dalje...

Ako se u otvorenom folderu ni jedan fajl ne zove index, browser ne zna odakle da krene, pa samo ispiše koji su sve fajlovi unutra

Ako postoji index.html ili index.php onda se automatski otvara taj fajl.

Pitanje: Šta se dešava kada se unesu podaci i pritisne dugme?

Podaci se "šalju": polje za unos teksta se isprazni, a ono što se unese se "šalje" na obradu

 Form tag (<form>)

  • Koristi se za definisanje forme.
  • Unutar njega se postavljenu web kontroe za unos podataka
  • Ima atribute action, method, target, ...
    • Dva ključna atributa su:
      • action: URL adresa gde će podaci biti poslati.
      • method: Način slanja podataka (GET ili POST).

Nastavak zadatka - prvi deo:  Izmeniti prethodnu formu tako da se doda atribut action:

<form action="obrada.php">
    <label for="name">Ime:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Pošalji</button>
</form>

U istom folderu kreirati fajl obrada.php u kojem će se napisati samo jedna linija teksta: "Ovde su podaci poslati".

 

Pitanje: Šta se dešava kada se unesu podaci i pritisne dugme?

Pošto je navedeno action="obrada.php", podaci se šalju u obrada.php, a sve što je u poljima se obriše, 

S obzirom da metod nije naveden, podrazumevano je GET, što znači da je sve što se unese uglavljeno u URL-u (URL varijabla).

Server će da "sažvaće" sve što treba i da korisniku pošalje rezultate - u ovom slučaju samo jednu liniju teksta.

 

Nastavak zadatka - drugi deo: Izmeniti prethodnu formu tako da se doda atribut method:

<form action="obrada.php" method="post">
    <label for="name">Ime:</label>
    <input type="text" id="name" name="name" required>
    <button type="submit">Pošalji</button>
</form>

  Pitanje: Šta se dešava kada se unesu podaci i pritisne dugme?

Pošto je navedeno action="obrada.php", podaci se šalju u obrada.php, a sve što je u poljima se obriše, 

Pošto je method="post" , to znači da je se podaci ne šalju kao URL varijabla, već kao HTTP post transakcija - sigurnija varijanta

Server će da "sažvaće" sve što treba i da korisniku pošalje rezultate - u ovom slučaju samo jednu liniju teksta.

 

Nastavak zadatka - treći deo: Izmeniti prethodnu formu tako da se doda i atribut target="_blank" 

Pitanje: Šta se sada dešava?

(LINK za objašnjenja za sve atribute forme: HTML Form Attributes)



Spoljašnji linkovi:

Last modified: Tuesday, 16 December 2025, 9:21 AM