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 formePogledajte 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.
<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.