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?