HTML - Forme


Šta su HTML forme (obrazci)?

HTML obrazci potrebni su za prikupljanje različitih vrsta korisničkih unosa, kao što su podaci za kontakt poput imena, adrese e-pošte, telefonski brojevi ili detalji poput podataka o kreditnoj kartici itd. Obrazci sadrže posebne elemente koji se nazivaju kontrolama poput ulaznog okvira, potvrdnih okvira, radio-tipki, tipki za slanje itd. Korisnici uglavnom ispunjavaju obrazac mijenjanjem njegovih kontrola, npr. unos teksta, odabir predmeta itd. i predaju ovaj obrazca web serveru na daljnju obradu. Oznaka <form> koristi se za kreiranje HTML obrazca. Evo jednostavnog primjera obrazca za prijavu:

<form>
    <label>Username: <input type="text"></label>
    <label>Password: <input type="password"></label>
    <input type="submit" value="Submit">
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Jednostavna HTML forma</title>
</head>
<body>
    <form action="/examples/actions/confirmation.php" method="post">
        <label>Username: <input type="text" name="username"></label>
        <label>Password: <input type="password" name="userpass"></label>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Sljedeći koraci opisuje različite vrste kontrola koje možete koristiti za forme.



Elementi unosa

Ovo je najčešće korišteni element u HTML obrazcima. Omogućava vam određivanje različitih vrsta korisničkih polja za unos, zavisno o tipu. Unoseni element može biti od tipa teksta, polja lozinke, potvrdnog okvira, radio dugmeta, dugmeta za slanje, dugmeta za resetovanje, okvira za odabir datoteke kao i nekoliko novih tipova unosa koji su uvedeni u HTML5. U nastavku su opisane najčešće korištene vrste unosa.



Tekstualna polja

Tekstualna polja su jednoredna područja koja korisniku omogućavaju unos teksta. Jednoredne kontrole unosa teksta kreiraju se pomoću <input> elementa, čiji atribut tipa ima vrijednost text. Evo primjera unosa teksta s jednim redom koji se koristi za uzimanje korisničkog imena:

<form>
   <label for="username">Username:</label>
    <input type="text" name="username" id="username">
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Text Input polje</title>
</head>
<body>
    <form>
        <label for="user-name">Username:</label>
        <input type="text" name="username" id="user-name">
    </form>
</body>
</html> 


Polje za lozinku

Polja lozinke su slična tekstualnim poljima. Jedina razlika su znakovi koji su u polju lozinke maskirane, tj. prikazani su kao zvjezdice ili tačkice. Ovo će spriječiti da neko drugi pročita lozinku na ekranu. Ovo su takođe jednoredne kontrole unosa teksta kreirane pomoću elementa <input> čiji atribut tipa ima vrijednost password. Evo primjera unosa lozinke, koji se koristi za uzimanje korisničke lozinke:

<form>
    <label for="user-pwd">Password:</label>
    <input type="password" name="user-password" id="user-pwd">
</form>



Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Password Input polje</title>
</head>
<body>
    <form>
        <label for="user-pwd">Password:</label>
        <input type="password" name="user-password" id="user-pwd">
    </form>
</body>
</html> 


Radio dugmad

Radio dugme se koriste za omogućavanje korisniku da odabere jednu opciju iz unaprijed definisanog skupa opcija. Stvara se pomoću elementa <input> čiji atribut tipa ima vrijednost radio. Evo primjera radio dugmeta koje se mogu koristiti za prikupljanje podataka o spolu korisnika:

<form>
    <input type="radio" name="gender" id="male">
    <label for="male">Male</label>
    <input type="radio" name="gender" id="female">
    <label for="female">Female</label>
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Radio Buttons - Dugmad</title>
</head>
<body>
    <form>
        <input type="radio" name="gender" value="male" id="male">
        <label for="male">Male</label>
        <input type="radio" name="gender" value="female" id="female">
        <label for="female">Female</label>
    </form>
</body>
</html> 


Ček dugmad

Ček dugmad omogućavaju korisniku da odabere jednu ili više opcija iz unaprijed definisanog skupa opcija. Stvara se pomoću <input> elementa čiji atribut tipa ima vrijednost checkbox. Evo primjera checkbox koji se može koristiti za prikupljanje informacija o hobijima korisnika:

<form>
    <input type="checkbox" name="sports" id="fudbal">
    <label for="fudbal">Fudbal</label>
    <input type="checkbox" name="sports" id="kosarka">
    <label for="kosarka">Košarka</label>
    <input type="checkbox" name="sports" id="tenis">
    <label for="tenis">Tenis</label>
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Checkboxes</title>
</head>
<body>
    <form>
      <input type="checkbox" name="sports" id="fudbal">
      <label for="fudbal">Fudbal</label>
      <input type="checkbox" name="sports" id="kosarka">
      <label for="kosarka">Košarka</label>
      <input type="checkbox" name="sports" id="tenis">
    <label for="tenis">Tenis</label>
</form>
</body>
</html> 


File Select polje

Polja datoteke omogućava korisniku da pregleda lokalnu datoteku i pošalje je kao dodatak s podacima obrazca. Web pretraživač kao što su Google Chrome i Firefox donose polje za unos datoteke s dugmetom za pretraživanje koji korisniku omogućava kretanje po lokalnom hard disku i mogućnost odabira datoteke. File Select polje se stvara pomoću <input> elementa, čiji je atributa type postavljena na file.

<form>
    <label for="file-select">Upload:</label>
    <input type="file" name="upload" id="file-select">
</form>



Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML File Select box</title>
</head>
<body>
    <form>
        <label for="file-select">Upload:</label>
        <input type="file" name="upload" id="file-select">
    </form>
</body>
</html> 


Textarea

Textarea je kontrola unosa teksta s više linija koja omogućava korisniku da unese više redova teksta. Višeredne kontrole unosa teksta kreiraju se pomoću <textarea> elementa.

<form>
    <label for="address">Komentar:</label>
    <textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Textarea</title>
</head>
<body>
  <form>
        <label for="address">Komentar:</label>
        <textarea rows="3" cols="30" name="address" id="address"></textarea>
    </form>
</body>
</html>


Okvir za odabir (Select Boxes)

Okvir za odabir je padajuća lista opcija koja korisniku omogućava da odabere jednu ili više opcija sa padajuće liste. Okvir za odabir kreira se pomoću elementa <select> i <option>. Elementi <option> unutar elementa <select> definišu svaku stavku liste.

<form>
    <label for="grad">Grad:</label>
    <select name="grad" id="grad">
        <option value="london">London</option>
        <option value="berlin">Berlin</option>
        <option value="amsterdam">Amsterdam</option>
    </select>
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Select Box</title>
</head>
<body>
    <form>
    <label for="grad">Grad:</label>
    <select name="grad" id="grad">
        <option value="london">London</option>
        <option value="berlin">Berlin</option>
        <option value="amsterdam">Amsterdam</option>
    </select>
</form>
</body>
</html> 


Dugme za slanje i resetovanje

Dugme za slanje koristi se za slanje podataka obrazca na web pretraživač. Kada se klikne dugme za slanje, podaci obrazca šalju se u datoteku navedenu u atributu radnje obrazca za obradu poslanih podataka. Dugme za resetovanje resetuje sve kontrole oblika na zadane vrijednosti. Isprobajte sledeći primjer tako da upišete svoje ime u tekstualno polje i kliknete na dugme za prijavu da biste videli kako djeluje.

<form action="action.php" method="post">
    <label for="first-name">Ime:</label>
    <input type="text" name="first-name" id="first-name">
    <input type="submit" value="Slanje">
    <input type="reset" value="Reset">
</form>

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Slanje i Reset dugme</title>
</head>
<body>
<form action="action.php" method="post">
      <label for="first-name">Ime:</label>
      <input type="text" name="first-name" id="first-name">
      <input type="submit" value="Slanje">
      <input type="reset" value="Reset">
</form>
</body>
</html> 


Grupisanje kontrola oblika

Grupisane, logički povezane kontrole i oznake unutar web obrazca kreiramo pomoću elementa <legend>. Grupiranje kontrola obrazca u kategorije, korisnicima olakšava lociranje kontrole što obrazac čini jednostavnijim za korisnika. Pokušajmo na sljedećem primjeru da vidimo kako to funkcioniše:

<form>
    <fieldset>
        <legend>Kontakt podaci</legend>
        <label>Email adresa: <input type="email" name="email"></label>
        <label>Broj telefona: <input type="text" name="phone"></label>
    </fieldset>
</form>


Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Grupna forma u HTML</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>Ime</legend>            
            <label>Ime: <input type="text" name="ime"></label>            
            <label>Prezime: <input type="text" name="prezime"></label>
        </fieldset>
        <fieldset>
            <legend>Pol</legend>            
            <label><input type="radio" name="pol" value="musko"> Muško</label>            
            <label><input type="radio" name="pol" value="zensko"> Žensko</label>
        </fieldset>
        <fieldset>
          <legend>Hobi</legend>            
            <label><input type="checkbox" name="hobi" value="fudbal"> Fudbal</label>
            <label><input type="checkbox" name="hobi" value="kosarka"> Košarka</label>
            <label><input type="checkbox" name="hobi" value="tenis"> Tenis</label>
        </fieldset>
        <fieldset>
            <legend>Kontakt podaci</legend>
            <label>Email Adresa: <input type="email" name="email"></label>
            <label>Broj telefona: <input type="text" name="telefon"></label>
        </fieldset>
    </form>
</body>
</html>


Atributi obrazca koji se često koriste

Sljedeća tabela navodi atribute forme koji se najčešće koriste:

Atribut Opis
name Određuje naziv obrazca.
action Određuje URL programa ili skripte na web poslužitelju koji će se koristiti za obradu podataka poslanih putem obrazca.
method Određuje HTTP metod koji se koristi za slanje podataka na web poslužitelj od strane pretraživača. Vrijednost može biti get (zadano) i post.
target Određuje gde će se prikazati odgovor koji je primljen nakon slanja obrazca. Moguće vrijednosti su: _blank, _self, _parent i _top.
enctype Određuje kako se podaci obrazaca trebaju kodirati prilikom slanja obrazca na poslužitelja. Primjenjivo je samo kad je vrijednost atributa metode post.