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?