html forme

HTML forme

Elemente koje želimo prikazati u formi umećemo unutar <form> elementa. Svojstva: action = URL - gdje formu obrađujemo nakon pritiska gumba Submit method = get | post - http metoda pomoću koje se šalju podatci onsubmit - naziv funkcije za obradu pritiska gumba Submit onreset - naziv funkcije za obradu pritiska gumba Reset name - služi pristupu elementima forme kod skriptiranja

Elementi za unosa podataka

Vrijednost svojstva type <input> elementa određuje način unosa: - tekst (svojstvo type="text") - zaporka (svojstvo type="password") - polje za potvrdu (svojstvo type="checkbox") - kružić opcija (svojstvo type="radio") - sumbit gumb (svojstvo type="submit") - reset gumb (svojstvo type="reset") - skriveni podatak (svojstvo type="hidden")

Svojstva elementa <input>

type - vrsta elementa za unos podataka name - šalje se kao dio forme value - koristi se kod polja za potvrdu i kružića opcija checked - koristi se kod polja za potvrdu i kružića opcija size - specifično za svaku vrstu elemenata maxlength - maksimalan broj znakova za tekstne elemente tabindex - položaj u prebacivanju elemenata tipkom tab onfocus - funkcija koja se poziva kada element dobije fokus onblur - funkcija koja se poziva kada element izgubi fokus onchange - funkcija koja se poziva nakon promijene vrijednosti

Unos teksta (type="text")

<script language="javascript" type="text/javascript"> //<![CDATA[ function unos() { if (document.mojaforma.ime.value == "Ivan") document.mojaforma.prezime.value = "Horvat"; } //]]> </script> <form name="mojaforma"> Ime: <input type="text" name="ime" size="30" onblur="unos();" /> Prezime: <input type="text" name="prezime" maxlength="8" /> </form>

Unos zaporke (type="password")

<script language="javascript" type="text/javascript"> //<![CDATA[ function unos() { var zaporka = document.mojaforma.pass1.value; if(zaporka.trim().length <= 5) alert("Zaporka je prekratka!"); } //]]> </script> <form name="mojaforma"> Password: <input type="password" name="pass1" maxlength="8" /> Again: <input type="password" name="pass2" onfocus="unos();" /> </form>

Polja za potvrdu (type="checkbox")

<script language="javascript" type="text/javascript"> //<![CDATA[ function unos() { if (document.mojaforma.puno.checked == true && document.mojaforma.vozacka.checked == true) alert("Osoba je punoljetna i ima vozačku dozvolu."); } //]]> </script> <form name="mojaforma"> Punoljetna: <input type="checkbox" name="puno" checked /> Vozačka dozvola: <input type="checkbox" name="vozacka" onchange="unos();" /> </form>

Kružići opcija (type="radio")

<script language="javascript" type="text/javascript"> //<![CDATA[ function unos() { if(document.mojaforma.dob[0].checked) document.getElementById('box').style.visibility = 'visible'; else document.getElementById('box').style.visibility = 'hidden'; } //]]> </script> <form name="mojaforma"> Mladost: <input type="radio" name="dob" onchange="unos();" /> Zrelost: <input type="radio" name="dob" onchange="unos();" checked /> <div id="box" style="visibility:hidden;">Vrijeme odrastanja.</div> </form>

Padajući popis - select

<script language="javascript" type="text/javascript"> //<![CDATA[ function unos() { if (document.mojaforma.grad[1].selected == true) alert("Nima Splita do Splita"); } //]]> </script> <form name="mojaforma"> <select name="grad" onchange="unos();"> <option>Zagreb</option> <option>Split</option> <option selected>Rijeka</option> <option>Osijek</option> </select> </form>



Hvala na pozornosti!


Pitanja?