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 se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Obiectul form in JavaScript

Last accessed pages

  1. Cursuri Limba Rusa (5749)
  2. Timpul present (2294)
  3. Notiuni fundamentale despre bazele de date SQL (10742)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (271991)
  5. Exercitii engleza - English Tests and exercises - Grammar (114560)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (788)
  2. Cursuri limba engleza gratuite si lectii online (348)
  3. Coduri pt culori (347)
  4. Gramatica limbii engleze - Prezentare Generala (337)
  5. Exercitii engleza - English Tests and exercises - Grammar (314)