HTML forme : HTML forms

Html elementi forme : HTML form elements

HTML forme koristimo za izbor različitih vrsta korisničkog unosa podataka. Koriste se za dostavljanje podataka serveru.

HTML forma može sadržavati ulazne elemente kao što je okvir za unos teksta, okvir za unos zaporke, polja potvrde, kružići 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ći 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:

Ime:
Prezime:

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. Ime 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 možemo dodjeljivanjem vrijednosti svojstvu value.

Tako polje za unos teksta širine 30 znakova, maksimalne duljine 10 znakova, imena dom koji ima početnu vrijednost "Nin" bi imalo 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:

Zaporka:

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

Kada unosimo tekst u zaporku on će biti prikazan pomoću oznake kružića ili zvjezdice.

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:

Split
Osijek
Rijeka
Zagreb

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.

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:

Učenik
Student
Zaposlen

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 action <form> elementa.

<form name="input" action="posalji.aspx" 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:

Korisničko ime:
Zaporka:

Kada korisnik pritisne gumb Pošalji web preglednik će pozvati metodu posalji.aspx koja će obraditi slanje poruke.

Gumb zadano : Reset Button

Element <input> u kojem je svojstvu type dodijeljena vrijednost reset omogućava vraćanje vrijednosti forme na zadane 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:

Učenik
Student
Zaposlen

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, kao početna vrijednost html elementu <option> dodajemo svojstvo selected.

<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: