Obiectul Form – 1 10
Formularele sunt elemente HTML care dau viata unor pagini statice deoarece asigura o interfata prin care vizitatorii pot interactiona, cu ajutorul controalelor (elemente ale formularului).
Obiectul Form este mijlocul prin care se poate interactiona cu acest element HTML in scripturile JavaScript.
1. Metode si proprietati ale obiectului form
Dupa cum ati invatat in lectiile precedente, obiectele JavaScript au proprietati si metode.
Proprietatile obiectului „Form” sunt urmatoarele:
- action – contine atributul „action” din eticheta <form>, specifica adresa URL unde este trimis formularul
elements – matricea care contine toate elementele din <form>
encoding – contine atributul „enctype” din <form>, specifica o codificare MIME a formularului
length – numarul de elemente continute in formular
method – contine atributul „method” din <form>, defineste felul in care formularul este trimis serverului (get sau post)
name – contine atributul „name” al unei etichetei <form>
target – contine atributul „target” al etichetei <form>, specifica fereastra in care serverul ar trebui sa returneze informatiile. Daca nu este specificata, serverul afiseaza rezultatele in fereastra care a expediat formularul.
Obiectul „Form” are urmatoarele metode:
- handleEvent() – apeleaza handlerul de eveniment specificat
reset() – readuce elementele formularului la valorile prestabilite
submit() – declanseaza un eveniment „submit” care trimite datele spre programul specificat in atributul „action” al etichetei <form>
2. Trimiterea formularelor spre server
Limbajul JavaScript permite prelucrarea datelor introduse in formular inainte ca acestea sa fie trimise spre procesare la programul (scriptul) de pe server.
Puteti expedia dadele unui formular utilizand una din cele doua modalitati:
- 1. – Prin apelarea metodei „submit()” a obiectului „Form”.
- 2. – Prin click pe un buton Submit care trimite automat datele din formularul de care apartine.
Multe din proprietatile obiectului „Form” se ocupa de informatiile suplimentare care sunt trimise la server prin intermediul formularului. Aceste proprietati sunt:
– action – specifica adresa URL a programului catre care vor fi trimise datele din formular
Exemplu:
- <form name=”f1″ action=”http://www.discant.net/script.php” method=”post”>
Pentru formularele care folosesc metoda „post” puteti preciza in atributul „action” ca datele sa fie trimise prin e-mail, folosind urmatoarea sintaxa:
- <form name=”f2″ action=”mailto:adresa_de_email” method=”post”>
– Cand expediati formularul, se va deschide un client de e-mail ce contine, printre altele, si perechile de „nume-valoare” ale elementelor (casetelor) cuprinse in formular.
– enctype – specifica o codificare MIME a formularului, valoarea prestabilita este „application/x-www-form-urlencode„.
O metoda de verificare a acestei codificari este urmatoarea:
if(f1.enctype == „application/x-www-form-urlencode”) {
alert(„Tipul de codificare e normal”);
}
Un alt tip de codificare des folosit este „text/plain„.
Iata un exemplu:
<form method=”post” name=”f3″ action=”mailto:adresa_de_mail” enctype=”text/plain”>
Va place site-ul? <br>
<input name=”alege” type=”radio” value=”1″ checked>Da <br>
<input name=”alege” type=”radio” value=”2″>Nu <br>
<input name=”alege” type=”submit” value=”Trimite”>
</form>
– Proprietatea „enctype=”text/plain”” este folosita pentru a trimite text neformatat. Prin aceasta, mailul va fi mai usor de citit, in cadrul mesajului va apare optiunea aleasa. Fara specificarea acestei proprietati mailul va avea ca atasament un fisier cu optiunea aleasa.
– method – defineste modul in care datele formularului sunt expediate. Se poate folosi valoarea „get” sau „post„.
Pentru formularele care folosesc metoda „get”, in majoriatea site-urilor este disponibil un program CGI de testare, numit „test-cgi” furnizat impreuna cu serverul (locatia fisierului „test-cgi” poate fi diferita, intrebati administratorul serverului). Folositi urmatoarea sintaxa:
- <form action=”http://nume_site/cgi-bin/test-cgi” method=”get”>
Veti primi o pagina care va contine, printre altele, si valorile elementelor din formular.
Pentru incepatori, mai putin cunoscatori, si pentru folosirea cu scripturi PHP, este recomandata metoda „post”.
Pentru formularele care folosesc metoda „post”, in majoriatea site-urilor este disponibil un program CGI de testare, numit „post-query” furnizat impreuna cu serverul (locatia acestuia poate fi diferita, intrebati administratorul serverului). Daca doriti sa verificati ce date trimite formularul, folositi urmatoarea eticheta:
- <form action=”http://nume_site/cgi-bin/post-query” method=”post”>
– Cand trimiteti formularul veti primi, printre altele, si perechile de „nume-valoare” corespunzatoare elementelor din formular.
Puteti verifica tipul metodei de trimitere a datelor si cu un script JavaScript, ca in exemplul urmator:
<script type=”text/javascript”>
<!–
var tip_metoda;
tip_metoda = formular.method;
alert(„Tipul metodei pt. acest formular e :” +tip_metoda);
//–>
</script>
Daca doriti sa faceti o verificare a datelor din formular inainte ca acestea sa fi expediate la server, puteti folosi evenimentul „onSubmit„. – onSubmit – este folosita pentru a valida formularul inainte de a fi trimis.
Metoda „onSubmit” se introduce in interiorul etichetei <form>, ca in exemplul urmator:
<script type=”text/javascript”>
<!–
// Verifica daca input OK
function validare() {
if (inputOK) return true;
else return false;
}
//–>
</script>
…
<form method=”post” name=”nume_form” action=”script.php” onSubmit=”return validare()”>
…
Obiectul Form – 2
1. Utilizarea metodei focus si select
Cu metodele focus() si select() puteti adauga formulaului anumite efecte grafice si sa selectati casetele dorite.
Puteti defini care element sa atraga atentia la inceput.
Puteti transmite navigatorului sa revina în locul din formular unde au fost introduse datele gresite, astfel browser-ul va pozitiona cursorul în elementul din formular specificat. Acest lucru se poate face printr-un script ca cel din exemplul urmator
<script type=”text/javascript”>
<!–
function setfocus () {
document.nume_form.nume_camp.focus();
}
//–>
</script>
– Unde „nume_form” este numele formularului specfificat in atributul „name” din eticheta <form> iar „nume_camp” este numele campului din formular unde va fi pozitionat cursorul (specificat in atributul „name” din eticheta campului respecftiv).
Daca doriti sa atrageti atentia sau sa pozitionati cursorul asupra unui anumit element din formular atunci cand pagina este incarcata, adaugati o proprietate „onload” in eticheta <body>, ca in exdemplu urmator :
- <body onload=”setfocus()”>
Iata un al exemplu in care campul dorit dintr-un formular atrage atentia si este si selectat :
<html>
<head>
<title>Titlu</title>
<script type=”text/javascript”>
<!–
function setfocus () {
document.form1.camp2.focus();
document.form1.camp2.select();
}
//–>
</script>
</head>
<body onload=”setfocus()”>
<form name=”form1″>
<input type=”text” name=”camp1″ value=”un text”> <br>
<input type=”text” name=”camp2″ value=”text selectat”>
</form>
</body>
</html>
– Daca adaugati codul de mai sus intr-un document HTML, cand il veti deschide cu un browser va fi selectat automat textul din campul doi.
2. Validarea si verificarea datelor introduse in formular
De cele mai multe ori folosim formulare pentru ca datele introduse in acestea sa fie trimise inapoi la server pentru procesare sau prin posta electronica catre un cont de email.
Cu ajutorul JavaScript datele introduse intr-un formular pot fi cu usurinta verificate inainte de a fi transmise, astfel putem usura traficul si in plus ne putem asigura ca s-au transmis date corecte. De exemplu: sa nu se transmita inputuri fara date în ele, sau ca o adresa e-mail sa contina caracterul @.
Pentru a intelege mai bine vom folosi un exemplu ce contine un formular cu 2 elemente text: „nume” si „email” si un buton „Submit” pt. trimiterea datelor. Vizitatorul trebuie sa introduca numele în primul text si adresa de e-mail în al doilea. Pentru verificarea este adaugat un script JavaScript care verifica datele introduse inainte ca acestea sa fie trimise la server.
<html>
<head>
<title>Titlu</title>
<script type=”text/javascript”>
<!–
function verifica(form) {
if (form.nume.value == „”) {
alert(„Va rog introduceti numele dvs.”);
return false;
}
else if (form.email.value == „” || form.email.value.indexOf(‘@’, 0) == -1 || form.email.value.indexOf(‘.’, 0) == -1) {
alert(„Scrieti corect adresa de e-mail !”);
return false;
}
return true;
}
// –>
</script>
</head>
<body>
<form name=”form1″ action=”test.php” method=”post”>
Scrieti numele dvs.:<br>
<input type=”text” name=”nume”> <br>
Adaugati adresa de e-mail :<br>
<input type=”text” name=”email”> <br>
<input type=”submit” name=”submit” value=”Trimite” onClick=”return verifica(this.form)”>
</form>
</body>
</html>
– Functia „verifica()” este apelata in eticheta butonului submit prin metoda „onClick=”return verifica(this.form)”„, argumentul „this.form” este transmis catre functie si face referire la elementele din formularul curent. Astfel, cand este apasat butonul „Trimite” se executa imediat functia „verifica()”.
Aceasta verifica cu prima instructiune „if” daca elementul „nume” din formular are valoarea nula (adica nu a fost scris nici un caracter), se compara cu „” pentru a verifica daca sirul este gol. Daca valoarea este nula conditia „if” primeste valoarea „adevarata” si se executa, deschide o fereastra Alert si apoi returneaza „false” (astfel datele nu mai sunt trimise). Daca in casuta „nume” este adaugat vreun caracter valoarea acesteia nu mai e nula (sirul nu e gol) si conditia „if(form.nume.value == „”)” nu mai este adevarata si se trece la executia urmatoarei linii de cod a functie.
A doua instructiune „else if (form.email.value == „” || form.email.value.indexOf(‘@’, 0) == -1 || form.email.value.indexOf(‘.’, 0) == -1)” este ceva mai complicata, verifica daca valoarea elementului „email” din formular este nula sau (prin operatorul „OR” ||) daca acesta nu contine caracterele ‘@’ sau punct (.); aceasta deoarece orice adresa de e-mail trebuie sa contina cele doua caractere. Daca la verificarea celor trei conditii (valoare nula, lipsa caracterului ‘@’ si lipsa caracterului punct) vreuna din ele este adevarata, instructiunea „else if” se executa si va deschide o fereastra Alert apoi returneaza „false’.
In caz contrar, daca nici una din conditiile instructiunii „if”, „else if” nu este adevarata, functia „verifica()” returneaza „true” si datele vor fi trimise la server.
In browser veti avea urmatorul rezultat:
Scrieti numele dvs.:
Adaugati adresa de e-mail :
– Puteti introduce orice în formular si apoi apasati butonul „Trimite”. De asemenea incercati sa nu introduceti nimic si sa apasati butonul, sau la campul pt. email adaugati o adresa incompleta (fara @ sau(.)). Veti vedea rezultatul acestui script.
Daca introduceti datele corect nu va apare nici un mesaj.
– In exemplul de mai sus puteti folosi in loc de metoda „onClick()” din eticheta butonlui Submit, metoda „onSubmit()”, aceasta se adauga direct in eticheta <form>, dupa cum este prezentat mai jos:
- <form name=”form1″ action=”test.php” method=”post” onSubmit=”return verifica(this)”>
Rezultatul va fi acelasi.