HTML forme : HTML forms

Html elementi forme : HTML form elements

HTML forme koristimo za izbor načina unosa korisničkih podataka. Koriste se za dostavljanje podataka serveru ili obradi pomoću JavaScripta.

HTML forma može sadržavati ulazne elemente kao što je okvir za unos teksta, okvir za unos zaporke, polja potvrde, kružiće opcija, gumb pošalji (engl. submit) ili vrati na početno stanje (engl. reset). Forma može također sadržavati padajući popis, polje za unos teksta (engl. text area) ili opis (engl. label).

Unutar elementa <form> unosimo elemente forme.

Primjer:

<form>
	<!-- input elementi -->
</form>

Web dizajn i forme

Html forme : <input> elementi

Najvažniji element forme je <input> element. Njega koristimo na različite načine ovisno o vrijednosti dodijeljene type svojstvu. Input element može biti okvir za unos teksta ili zaporke, polja potvrde, kružića opcija, gumb pošalji i drugi. Element <input> je linijski element što znači kada želimo prelazak u novi red, potrebno je umetnuti iza njega element <br /> u html dokument.

Okvir za unos teksta : Text Fields

Element <input> u kojem je svojstvu type dodijeljena vrijednost text služi za jednoredan unos teksta.

<form>
  Ime: <input type="text" /><br />
  Prezime: <input type="text" /><br />
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Zadana vrijednost širine (engl. size) polja za unos teksta je 20 znakova. Želimo li broj znakova povećati ili smanjiti trebamo dodijeliti potrebnu vrijednost svojstvu size. Možemo i odrediti maksimalan broj znakova pomoću svojstva maxlength. Naziv <input> elementa pomoću kojeg mu pristupamo u klijentskom ili serverskom programu je zadano unutar svojstva name. Želimo li dodijeliti početnu vrijednost okviru za unos teksta, trebamo dodjeliti vrijednost svojstvu value.

Tako polje za unos teksta širine 30 znakova, maksimalne duljine 10 znakova, naziva dom koji ima početnu vrijednost Nin ima slijedeći oblik:

<input type="text" size="30" maxlength="10" name="dom" value="Nin" />

Okvir za unos zaporke : Password Fields

Element <input> u kojem je svojstvu type dodijeljena vrijednost password služi za unos zaporke.

<form>
  Zaporka: <input type="password" /><br />
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Svojstva size, maxlength, name i value imaju isto značenje kao i kod okvira za unos teksta.

Kada unosimo tekst u zaporku, razlikuje se po grafičkoj oznaci kružića, zvjezdice ili oka.

Kružići opcija : Radio Buttons

Element <input> u kojem je svojstvu type dodijeljena vrijednost radio omogućava izbor samo jedne od ponuđenih mogućnosti.

<form>
  <input type="radio" name="grad" value="split">Split<br />
  <input type="radio" name="grad" value="osijek" checked>Osijek<br />
  <input type="radio" name="grad" value="rijeka">Rijeka<br />
  <input type="radio" name="grad" value="zagreb">Zagreb<br />
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Svojstvo name mora imati istu vrijednost za skupinu kružića opcija iz koje odabiremo samo jednu vrijednost. Vrijednosti value možemo pristupiti iz JavaScripta i na taj način saznati koja je opcija izabrana.

Želimo li neku od mogućnosti izbora selektirati unaprijed potrebno je umetnuti svojstvo checked kojemu ne dodjeljujemo vrijednost.

Polja za potvrdu : Checkboxes

Element <input> u kojem je svojstvu type dodijeljena vrijednost checkbox omogućava uključivanje i isključivanje svako pojedinog polja neovisno jedno o drugome.

<form>
  <input type="checkbox" name="zan" value="ucenik" 
    checked>Učenik<br />
  <input type="checkbox" name="zan" value="student">
    Student<br />
  <input type="checkbox" name="zan" value="zaposlen">
    Zaposlen<br />
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Gumb pošalji : Submit Button

Element <input> u kojem je svojstvu type dodijeljena vrijednost submit omogućava slanje podataka na server. Način na koji se podatci šalju određuje se u svojstvu method.

<form name="input" action="posalji.php" method="get">
  Korisničko ime <input type="text" name="korisnik"><br />
  Zaporka <input type="password" name="zaporka"><br />
  <input type="submit" value="Pošalji">
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Kada korisnik pritisne gumb Pošalji web preglednik pokreće php datoteku posalji.php i ona obrađuje podatke.

Gumb zadano : Reset Button

Element <input> u kojem je svojstvu type dodijeljena vrijednost reset omogućava vraćanje zadanih vrijednosti forme tj. one koje su bile kada je forma otvorena.

<form>
<input type="checkbox" name="zanimanje" 
  value="ucenik" checked>Učenik<br />
  <input type="checkbox" name="zanimanje" 
    value="student">Student<br />
  <input type="checkbox" name="zanimanje" 
    value="zaposlen">Zaposlen<br />
  <input type="reset" value="Zadano">
</form>

Ovaj primjer u web pregledniku izgleda ovako:

Ako u primjeru promjenimo stanje polja za protvrdu i nakon toga pritisnemo gumb Zadano, vratit će se početne vrijednosti polja za potvrdu. Isto vrijedi za sve elemente forme.

Padajući popis : Select Value

HTML element <select> omogućava nam izbor jedne od mogućnosti iz padajućeg popisa. Pomoću vrijednosti svojstva name elementa <form> pristupamo izabranoj vrijednosti iz JavaScripta.

Svaku od mogućnost umećemo u jedan od elemenata <option>. Između početne i završne oznake upisujemo tekst koji će se vidjeti u padajućem popisu. Ako želimo da neki element bude zadan (engl. default), kao početna vrijednost html elementu <option> dodajemo svojstvo selected bez dodjeljene vrijednosti.

<form>
<select name="voce" form="nabava">
  <option value="jabuke">Jabuke</option>
  <option value="banane" >Banane</option>
  <option value="tresnje">Trešnje</option>
  <option value="jagode" selected>Jagode</option>
</select>
</form>

Ovaj primjer u web pregledniku izgleda ovako: