HTML forme (<form>) se koriste za prikupljanje podataka od korisnika na web stranici. Obično se koriste za kreiranje kontaktnih obrazaca, pretrage, registracije i mnoge druge vrste interaktivnih elemenata na web stranicama. Ovde su osnovni koncepti i elementi HTML formi:
Osnovni koncepti:
- <form> element: Osnovni okvir forme. Definiše početak i kraj forme.
- <input> element: Koristi se za unos podataka. Može biti u obliku teksta, broja, dugmeta za slanje, i drugih vrsta.
- <textarea> element: Omogućava unos više teksta u okviru forme.
- <select> element: Koristi se za izbor iz padajućeg menija. Ovo se često koristi za izbor iz niza opcija.
- <button> element: Dodaje dugme koje korisnici mogu kliknuti za slanje forme.
- <label> element u HTML-u se koristi za obeležavanje (labeliranje) drugih elemenata, često za povezivanje sa elementom za unos podataka kao što su <input>, <textarea>, ili <select>. Labeliranje elemenata poboljšava pristupačnost i korisničko iskustvo tako što omogućava korisnicima da lakše razumeju šta treba uneti u određeno polje.
Atributi forme: Formama se mogu dodati različiti atributi kao što su action (adresa za slanje podataka), method (HTTP metoda za slanje podataka, obično "GET" ili "POST"), i drugi atributi koji definišu ponašanje forme.
Primer forme:
Evo jednostavnog primera forme za unos korisničkog imena i lozinke:
<!DOCTYPE html>
<html>
<head>
<title>Prijava</title>
</head>
<body>
<h1>Prijava na sistem</h1>
<form action="procesiranje.php" method="POST">
<label for="korisnickoIme">Korisničko ime:</label>
<input type="text" id="korisnickoIme" name="korisnickoIme" required>
<label for="lozinka">Lozinka:</label>
<input type="password" id="lozinka" name="lozinka" required>
<button type="submit">Prijavi se</button>
</form>
</body>
</html>
U ovom primeru, forma sadrži dva polja za unos korisničkog imena i lozinke, kao i dugme za slanje podataka. Kada korisnik popuni formu i klikne na dugme "Prijavi se," podaci će biti poslati na adresu procesiranje.php putem HTTP POST metode (može se koristiti i GET metoda) radi dalje obrade.
HTML forme su osnovni alat za interakciju sa korisnicima na web stranicama i omogućavaju prikupljanje, obradu i slanje podataka sa web stranica.
<input> element
<input> element se koristi za unos podataka na web stranici, i može imati različite tipove u zavisnosti od vrste podataka koja se očekuje od korisnika. Ovde su neki od najčešće korišćenih tipova <input> elemenata:
Text (tekstualni unos):
<input type="text" name="ime" id="ime" value="Unesite svoje ime">
Ovaj tip omogućava korisnicima da unesu tekstualne podatke kao što su ime, prezime, ili druge informacije.
Password (lozinka):
<input type="password" name="lozinka" id="lozinka">
Ovaj tip se koristi za unos lozinke, a unos će biti sakriven zvezdicama ili tačkama radi bezbednosti.
Email (e-mail adresa):
<input type="email" name="email" id="email">
Ovaj tip se koristi za unos e-mail adrese i može automatski proveriti da li je adresa u ispravnom formatu.
Number (broj):
<input type="number" name="godine" id="godine">
Ovaj tip omogućava unos brojeva, a može se postaviti i minimalna i maksimalna vrednost.
Date (datum):
<input type="date" name="datum" id="datum">
Ovaj tip omogućava unos datuma. Korisnici mogu odabrati datum iz kalendara.
Checkbox (potvrdni okvir):
<input type="checkbox" name="uslovi" id="uslovi" value="da">
Ovaj tip omogućava korisnicima da označe/odbiju određene opcije. Može se koristiti za prihvatanje uslova ili odabir više opcija.
Radio (radio dugme):
<input type="radio" name="pol" id="muski" value="muski"> Muški
<input type="radio" name="pol" id="zenski" value="zenski"> Ženski
Ovaj tip se koristi kada korisnici trebaju da odaberu samo jednu opciju iz više ponuđenih.
File (fajl):
<input type="file" name="slika" id="slika">
Ovaj tip omogućava korisnicima da odaberu fajl sa svog uređaja.
Submit (dugme za slanje):
<input type="submit" value="Pošalji">
Ovaj tip se koristi za slanje podataka sa forme na server.
Button (obično dugme):
<input type="button" value="Klikni me">
Ovaj tip se koristi za stvaranje dugmeta koje može izvršiti JavaScript funkciju na klik.
Hidden (sakriveno polje):
<input type="hidden" name="id" value="123">
Ovaj tip omogućava sakrivanje vrednosti koja se šalje na server.
Ovo su samo neki od najčešće korišćenih tipova <input> elemenata. Svaki od njih ima svoju svrhu i koristi se u zavisnosti od potreba forme i vrste podataka koju treba prikupiti od korisnika.