Curs Javascript


Obiectul form reprezinta elementele HTML <form> si sunt in general utilizate pentru formulare de trimitere date de la o aplicatie la alta; date care pot fi adaugate /selectate de utilizator.


Preluare element <form> in JavaScript

Sunt mai multe moduri prin care elementele HTML <form> pot fi preluate ca obiecte in JavaScript.
In general se folosesc metodele: getElementById(), querySelector() sau proprietatea: document.forms.

In afara de proprietatile si metodele specifice elementelor html (prezentate la: marplo.net/javascript/proprietati-metode-element-html ), obiectul form contine proprietati si metode proprii.


Proprietati obiect form

eform.acceptCharset - returneaza sau seteaza valoarea atributului accept-charset.
- Atributul 'accept-charset' seteaza tipul de caractere (codarea) valabil pt. acel formular. Daca nu e specificat se aplica codarea documentului.
<h4>Exemplu form.acceptCharset</h4>
<form id='frm1' action='#' accept-charset='utf-8'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p>Afiseaza valoarea proprietatii acceptCharset.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('resp').innerHTML ='accept-charset = '+ frm1.acceptCharset;
</script>
eform.action - returneaza sau seteaza valoarea atributului action.
<h4>Exemplu form.action</h4>
<form id='frm1' action='page.php'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'>
</form>
<p> La clic pe buton afiseaza valoarea de la 'action' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza la #resp noua valoare adaugata.</p>
<button id='btn1'>Action</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.action;
 frm1.action ='other_page.php';
});
</script>
eform.autocomplete - returneaza sau seteaza valoarea atributului autocomplete din <form>.
- Cand valoarea e 'on' (default), browser-ul completeaza automat valori in casete bazat pe valori adaugate anterior de utilizator.
- Valoarea 'off' anuleaza aceasta functionalitate.
<h4>Exemplu form.autocomplete</h4>
<form id='frm1' action='#' autocomplete='off'>
Email: <input type='email' name='email'><br>
Name: <input type='text' name='nume'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea de la 'autocomplete' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>Autocomplete</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.autocomplete;
 frm1.autocomplete ='on';
});
</script>
eform.elements - contine un obiect tip array cu elementele din formular, in ordinea in care sunt adaugate. acestea pot fi accesate dupa index-ul de ordine (incepand de la 0), sau dupa nume (care e adaugat la atributul 'name').
<h4>Exemplu form.elements</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email' value='some@email.net'><br>
Pass: <input type='password' name='password' value='some_pass'>
</form>
<p> Afiseaza valoarea de la fiecare caseta din formular.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var felm = document.getElementById('frm1').elements;
var email = felm[0];
var pass = felm['password'];
document.getElementById('resp').innerHTML ='Email: '+ email.value +'<br>Pass: '+ pass.value;
</script>
eform.enctype - returneaza sau seteaza valoarea atributului 'enctype'.
- Atributul 'enctype' indica tipul de continut folosit pentru trimiterea formularului la server; valoarea default e 'application/x-www-form-urlencoded'.
- Valoarea 'multipart/form-data' permite casetei <input type='file'> sa uploadeze fisiere.
<h4>Exemplu enctype</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'/>
</form>
<p>La clic pe buton afiseaza la #resp valoarea returnata de proprietatea 'enctype'.</p>
<button id='btn1'>enctype</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.enctype;
});
</script>
eform.length - contine numarul de elemente din formular.
<h4>Exemplu form.length</h4>
<form action='#' id='frm1'>
Email: <input type='email' name='email'><br>
Pass: <input type='password' name='password'><br>
<input type='submit' name='sbmt' value='Send'>
</form>
<p> Afiseaza numarul de elemente din &lt;form&gt;, le preia cu 'elements' si afiseaza numele lor.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
var res ='Nr. elemente in form: '+ frm1.length;

for(var i=0; i<frm1.length; i++) res +='<br>'+ frm1.elements[i].name;

document.getElementById('resp').innerHTML = res;
</script>
eform.method - returneaza sau seteaza valoarea atributului 'method' din <form>.
<h4>Exemplu form.method</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text' name='email'>
</form>
<p> La clic pe buton afiseaza valoarea de la 'method' si seteaza alta valoare.<br>
 - La al doilea clic afiseaza la #resp noua valoare adaugata.</p>
<button id='btn1'>method</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.method;
 frm1.method ='post';
});
</script>
eform.name - returneaza sau seteaza valoarea atributului 'name' din <form>.
<h4>Exemplu name</h4>
<form id='frm1' action='#' name='frm_name'>
Text: <input type='text'/>
</form>
<p>La clic pe buton afiseaza la #resp valoarea returnata de proprietatea 'name'.</p>
<button id='btn1'>name</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.name;
});
</script>
eform.noValidate - returneaza True daca atributul 'novalidate' este adaugat in <form>, in caz contrar, False. Defaul e true
- Daca atributul 'novalidate' e true, datele din formular vor fi validate inainte de a fi transmise.
<h4>Exemplu form.noValidate</h4>
<form id='frm1' action='#' noValidate>
Email: <input type='email' name='email'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea 'true', indicand ca 'novalidate' e adaugat, apoi seteaza valoarea 'false' pt. atributul 'novalidate'.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>noValidate</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.noValidate;
 frm1.noValidate = false;
});
</script>
eform.target - returneaza sau seteaza valoarea atributului 'target' din <form>.
- Atributul 'target' indica in ce fereastra sa fie afisate datele returnate din trimiterea formularului (poate fi utilizat atributul 'name' al unui <iframe>).
<h4>Exemplu form.target</h4>
<form id='frm1' action='#' target='iframe_name'>
Text: <input type='text' name='txt1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea atributului 'target', apoi seteaza alta valoare.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<button id='btn1'>target</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = frm1.target;
 frm1.target ='_blank';
});
</script>

Metode obiect form

eform.reportValidity() - returneaza True daca datele din formular sunt valide (conform setarilor definite), in caz contrar False.
<h4>Exemplu form.reportValidity()</h4>
<form id='frm1' action='#'>
Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minim 3 litere / numere'><br>
Email: <input type='email' required>
</form>
<p> Casetele din formular au atributul 'required' (trebuie completate).<br>
 - La clic pe buton se verifica valoarea returnata de metoda reportValidity() si afiseaza raspuns la #resp.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var res = frm1.reportValidity() ?'Date completate corect' :'Completati corect toate casetele.<br>Numele cel putin 3 caractere, doar litere si numere';
 document.getElementById('resp').innerHTML = res;
});
</script>
eform.reset() - reseteaza datele din casetele din formular la valorile initiale (la fel ca butonul reset).
<h4>Exemplu form.reset()</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select>
</form>
<p> Modificati datele din formular apoi apasati butonul urmator.</p>
<button id='btn1'>Rseteaza</button>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 frm1.reset();
 alert('form resetted');
});
</script>
eform.submit() - trimite datele din formular la adresa de la 'action' (la fel ca butonul Submit).
<h4>Exemplu form.submit()</h4>
<form id='frm1' action='#'>
Text: <input name='txt1' type='text'>
</form>
<p> Daca textul din caseta de text are cel putin 3 caractere, la clic pe buton formularul va fi transmis, daca are mai putin, afiseaza mesaj la #resp.</p>
<button id='btn1'>Trimite</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var tval = frm1['txt1'].value;
 if(tval.length >2) frm1.submit();
 else document.getElementById('resp').innerHTML ='Adaugati cel putin 3 caractere.';
});
</script>

Evenimente obiect form

Evenimentele se declansaza la efectuarea anumitor actiuni. Pot fi utilizate pentru executia unor functii la actiunea respectiva.

reset - se executa cand se reseteaza datele din formular (cu butonul 'reset', sau metoda reset() ).
<h4>Exemplu reset</h4>
<form id='frm1' action='#'>
Text: <input type='text' value='some-val'><br>
Select: <select><option value='gamv'>gamv.eu</option><option selected value='marplo'>marplo.net</option></select><br>
<input type='reset' value='Reset'>
</form>
<p> Modificati datele din formular apoi apasati butonul urmator.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//se executa cand se reseteaza #frm1
frm1.addEventListener('reset', (ev)=>{
 document.getElementById('resp').innerHTML ='Formularul e resetat.';
});
</script>
submit - se executa cand se trimite formular (cu butonul 'submit').
- E utila pentru validarea datelor din formular sau efectuarea anumitor instructiuni inainte de trimiterea datelor.
- Cu metoda ev.preventDefault() se blocheaza trimiterea automata a formularului ('ev' reprezinta evenimentul declansat, la care e asociata).
<h4>Exemplu submit</h4>
<form id='frm1' action='#'>
Text: <input type='text' name='txt1' placeholder='Minim 3 caractere'><br>
<input type='submit' value='Submit'>
</form>
<p> La trimiterea formularului (clic pe Submit), daca in caseta de text sunt mai putin de 3 caractere, afiseaza mesaj la #resp.<br>
 Daca sunt cel putin 3, trimite datele cu metoda submit().</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm1 = document.getElementById('frm1');

//se executa cand se trimite #frm1
frm1.addEventListener('submit', (ev)=>{
 //opreste trimiterea automata a form-ului
 ev.preventDefault();

 var tval = frm1['txt1'].value;
 if(tval.length <3) document.getElementById('resp').innerHTML ='Adaugati cel putin 3 caractere.';
 else frm1.submit();
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Obiectul form in JavaScript

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (89333)
  2. Lectia 150, Recapitulare 139-140 (23)
  3. Accentul si Pronuntia (26330)
  4. Verbele in limba engleza - Verbs (40068)
  5. Verbe frazale din limba Engleza (39381)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (618)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (532)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)