Formulari u HTML-u / JavaScript-u

Napraviti web stranicu koja omogucava korisniku koji preuzima odredjeni artikl da unese svoje ime, prezime, zemlju iz koje dolazi (pri cemu se zemlja bira iz liste zemalja), svoju e-mail adresu i da na kraju odabere da li pristaje na uslove (dva radio dugmeta, pri cemu je podrazumevano ne). Napisati i JavaScript skript koji proverava korektnost svih unetih podataka. Pogledajte primer


<html>
<head>
	<title>Javascript validacija formulara na strani klijenta</title>
	<script type='text/javascript'>
	function proveriIme(ime) {
		if (ime == null || ime == '')  {
			alert('Morate uneti ime');
			return false;
		}
		return true;
	}
	function proveriPrezime(ime) {
		if (ime == null || ime == '')  {
			alert('Morate uneti prezime');
			return false;
		}
		return true;
	}
	function proveriZemlju(select) {
		if (select.selectedIndex == 0) {
			alert('Morate odabrati zemlju');
			return false;
		}
		return true;
	}
	
	function proveriLozinku(lozinka1, lozinka2) {
		if (!(lozinka1 == lozinka2)) {
			alert('Lozinke se ne poklapaju');
			return false;
		}
		if (lozinka1 == '') {
			alert('Prazne lozinke');
			return false;
		}
		return true;
	}
	
	function proveriSaglasnost(dane) {
		alert(dane);
		if (dane=='ne') {
			alert('Morate se saglasiti');
			return false;
		}
		return true;
	}
	</script>
</head>
<body>
	<form action='obradi.php' method='post' onSubmit='
		return proveriIme(this.ime.value) && 
		       proveriPrezime(this.prezime.value) &&
		       proveriZemlju(this.zemlja) &&
		       proveriLozinku(this.lozinka1.value, this.lozinka2.value) &&
		       proveriSaglasnost(this.dane)'> 
	<table border='1'>
		<tr><td>Ime: </td><td><input type='text' name='ime'></td></tr>
		<tr><td>Prezime: </td><td><input type='text' name='prezime'></td></tr>
		<tr><td>Zemlja:</td><td>
		<select name='zemlja'>
			<option>---</option>
			<option>Srbija</option>
			<option>Francuska</option>
			<option>Rusija</option>
		</select>
		</td></tr>
		<tr><td>Lozinka</td><td><input type='password' name='lozinka1'></td></tr>
		<tr><td>Potvrdi lozinku</td><td><input type='password' name='lozinka2'></td></tr>
		<tr><td colspan='2' align='center'><input type='submit' value='posalji'></td></tr>
		<tr><td>Da li se slazete: </td><td>Da <input type='radio' name='dane' value='da'> 
    Ne <input type='radio' name='dane' value='ne' checked='checked'></td></tr>
	</table>
	</form>
</body>
</html>

Napraviti formu koja ce omoguciti anketu o MATF-u 

Potrebno je da:
HTML strana (u HEAD sekciji) ima naslov, ime i prezime studenta i broj indeksa, odgovarajuce kljucne reci i opis
osnovni izgled HTML strane bude podesen koriscenjem CSS-a

forma ima minimalno sledece elemente: 3 tekstbox-a, padajucu listu, 1 grupu radio dugmica ili polja za potvrdu 
izvrsiti proveru unesenih podataka na formi koriscenjem 
JavaScripta, koji ce biti sastavni deo HTML strane
Potrebne provere:
provera - obavezan unos
provera - za brojeve
provera - za duzinu stringa
provera - na nivou forme

Pogledajte primer

Svaki formular HTML dokumenta je predstavljen u JavaScript-u objektom form koji ima isti naziv kao i vrednost atributa NAME u oznaci <form> za definisanje formulara.

Alternativno se moze koristiti niz forms za pozivanje formulara. Ovaj niz sadrzi specificnosti svakog element pocev od indeksa nula. Na primer, ako prvi formular ima nayiv form1, onda se moze imenovati na sledeca dva nacina
document.form1 ili
document.forms[0]

Svaki form objekat poseduje atribute ili osobine determinisane oznakom <form>, kao na primer:
action vreednost atributa ACTION
encoding MIME tip odredjen atributom ENCTYPE (ako je uopste potreban)
length ukupan broj elemenata formulara
method metoda za predavanje formulara GET/POST
target odredjuje prozor u kom se prikazuje rezultat formulara

Objekat form ima dve procedure za obradu dogadjaja onSubmit i onReset. Iskazi koji su odredjeni za onSubmit dogadjaj pozivaju se pre podataka formulara koji se predaju na obradu.

Datoteka prf1.htm

<html>
<head>
<title>Primer Formulara u JavaScript-u</title>
<script LANGUAGE="JavaScript">
function validate() {
     if (document.form1.ime.value.length < 1) {
         alert("Unesite ime.");
         return false;
     }
    if (document.form1.adresa.value.length < 3) {
        alert("Unesite svoju adresu.");
        return false;
    }
    if (document.form1.tel.value.length < 4) {
        alert("Unesite broj telefona.");
        return false;
    }
    return true;
}
</script>
</head>
<body>
<h1>Primer formulara u JavaScript-u sa proverom unosa</h1>
<p>Molimo Vas da unesete zahtevane podatke. Nakon što potvrdite unos tasterom Submit, podaci ce biti provereni (u smislu duzine unosa: za ime bar 1 karakter, za adresu bar 3 karaktera, za telefon bar 4 karaktera), a potom i poslati e-postom na adresu
zzz@zzz.zzz
</p>
<form name="form1" action="mailto:zzz@zzz.zzz" enctype="text/plain"
onSubmit="return validate();">
<p><b>Ime:</b> <input TYPE="TEXT" LENGTH="20" NAME="ime">
</p>
<p><b>Adresa:</b> <input TYPE="TEXT" LENGTH="30" NAME="adresa">
</p>
<p><b>Tel: </b> <input TYPE="TEXT" LENGTH="15" NAME="tel">
</p>
<p><input TYPE="SUBMIT" VALUE="Submit"></p>
</form>
</body>
</html>

Skript u ovom primeru vršu proveru na dužinu unosa pre nego se unos korisnika prosledi e-mailom.
Provera podataka u svakom polju formulara se vrši u f-ji validate. Ako su svi unos u polja odgovarajuće dužine, validate vraća true i formular može biti potvrđen. Inače, potvrđivanje se zaustavlja, validate vraća false i prikazuje se poruka upozorenja koja može biti
        alert("Unesite ime.");   ili
        alert("Unesite svoju adresu."); ili
        alert("Unesite broj telefona.");

Adresa zzz@zzz.zzz se navidi kao vrednost atributa ACTION protokola mailto
<form name="form1" action="mailto:zzz@zzz.zzz" enctype="text/plain"
onSubmit="return validate();">
Tag <form> koristi proceduru onSubmit za obradu dogadjaja za pozivanje validate funkcije.
Naredba return obezbedjuje da rezultat f-je validate bude odredjen pri predaji formulara.
Mesto onSubmit procedure za obradu dogadjaja za proveru brasca je unutar form oznake.

Korisna vezba:
1. Modifikovati datoteku prf1.htm tako da nakon poruke o gresci, kursor bude pozicioniran na polje nekorektnog unosa. Savet: izmeniti f-ju validate da sadrzi metod focus za odgovarajuce polje formulara.
2. Modifikovati datoteku prf1.htm tako da proveri korektnost e-mail adrese odredista u smislu da li sadrzi bar 5 karaktera i da li sadrzi simbol @. Savet: izmeniti f-ju validate da sadrzi metod focus za odgovarajuce polje formulara.