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
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()
#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday Monday
On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábado
Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.
Obiectul form in JavaScript

Last accessed pages

  1. Curs si Tutoriale JavaScript (15525)
  2. Verbe modale - Exercitii incepatori (4912)
  3. Blog si Cugetari Personale (3620)
  4. Exercitii engleza - English Tests and exercises - Grammar (32171)
  5. Prezent perfect continuu - Exercitii si teste incepatori (5016)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2702)
  2. Curs HTML gratuit Tutoriale HTML5 (1969)
  3. Curs si Tutoriale JavaScript (1912)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1853)
  5. Curs CSS Online Tutoriale CSS3 (1705)