Curs Javascript


In afara de proprietatile si metodele specifice elementelor html (prezentate la: marplo.net/javascript/proprietati-metode-element-html ), obiectele din form contin proprietati si metode specifice lor.


Proprietati utile elemente din form

Sunt multe proprietati specifice elementelor de formular in JavaScript, in functie de tipul lor. Aici sunt prezentate cu exemple cateva din acestea.
- O list intreaga gasiti la MDN: HTMLInputElement - Properties.


elm.autofocus - returneaza sau seteaza atributul 'autofocus' din 'elm'.
- Cand atributul 'autofocus' e adaugat (setat ca True), acel <input> va avea focus pe el la incarcarea paginii. Daca nu e adaugat, e false.
<h4>Exemplu elm.autofocus</h4>
<form action='#'>
Text: <input type='text' name='txt1' autofocus><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>La clic pe buton afla daca input-ul 'txt1' are setat 'autofocus'; afiseaza raspunsul la #resp.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].autofocus;
});
</script>
elm.checked - returneaza sau seteaza starea elementelor de tip 'checkbox' si 'radio'.
- Cand butonul checkbox /radio e bifat are 'checked' True; cand nu e bifat /selectat are 'checked' False.
<h4>Exemplu elm.checked</h4>
<form action='#'>
 CoursesWeb.net <input type='checkbox'/><br>
 MarPlo.net <input type='checkbox'/><br>
 GamV.eu <input type='checkbox'/>
<p>La clic pe buton bifeaza /debifeaza toate butoanele 'checkbox' din Form.</p>
 <input type='button' value='Check /Uncheck' id='btn1'>
</form>

<script>
//valoarea initiala pt. checked
var check = false;

document.getElementById('btn1').addEventListener('click', (ev)=>{
 check = !check; //comuta valoarea din false in true si invers
 var frm = ev.target.form; //form-ul parinte

 //parcurge toate elementele din frm
 for(var i=0; i<frm.length; i++){
 //daca e tip checkbox seteaza 'checked' cu valoarea de la 'check'
 if(frm[i].type.toLowerCase() =='checkbox') frm[i].checked = check;
 }
});
</script>
elm.disabled - returneaza sau seteaza atributul 'disabled' din 'elm'.
- Cand 'disabled' e setat ca True, valoarea din acel element nu poate fi modificata si nu e transmis cand se trimite formularul. Daca nu e adaugat, e false.
<h4>Exemplu elm.disabled</h4>
<form action='#'>
Text: <input type='text' name='txt1' value='txt1'><br>
<input type='button' value='Disable' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea atributului 'disabled' din 'txt1', apoi seteaza 'disabled' true.<br>
 - La al doilea clic afiseaza noua valoare setata.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].disabled;
 frm['txt1'].disabled = true;
});
</script>
elm.form - returneaza obiectul cu elementul <form> parinte (in care se afla 'elm').
<h4>Exemplu elm.form</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp ID-ul form-ului parinte (in care e acel buton).</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form;
 document.getElementById('resp').innerHTML = frm.id;
});
</script>
elm.formAction - returneaza sau seteaza valoarea atributului 'formaction'.
- Atributul 'formaction' se poate adauga la butoane Submit, si indica unde sa fie trimis formularul (ignora adresa de la 'action').
<h4>Exemplu elm.formAction</h4>
<form id='frm1' action='#' method='post'>
Text: <input type='text'><br>
<input type='submit' value='Submit' name='sbmt' formaction='some_page.php'>
</form>
<p>La clic pe butonul Submit afiseaza la #resp valoarea returnata de 'formAction', si seteaza alta valoare.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm = document.getElementById('frm1');
frm.addEventListener('submit', (ev)=>{
 ev.preventDefault(); //sa nu trimita formularul
 document.getElementById('resp').innerHTML = frm['sbmt'].formAction;
 frm['sbmt'].formAction ='other_pg';
 return false;
});
</script>
elm.formMethod - returneaza sau seteaza valoarea atributului 'formmethod'.
- Atributul 'formmethod' se poate adauga la butoane Submit, si rescrie valoarea de la 'method' din <form>.
<h4>Exemplu elm.formMethod</h4>
<form id='frm1' action='#' method='get'>
Text: <input type='text'><br>
<input type='submit' value='Submit' name='sbmt' formmethod='post'>
</form>
<p>La clic pe butonul Submit afiseaza la #resp valoarea returnata de 'formMethod'.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
var frm = document.getElementById('frm1');
frm.addEventListener('submit', (ev)=>{
 ev.preventDefault(); //sa nu trimita formularul
 document.getElementById('resp').innerHTML = frm['sbmt'].formMethod;
});
</script>
elm.maxLength - returneaza sau seteaza valoarea atributului 'maxlength' din 'elm'.
- Atributul 'maxlength' specifica numarul maxim de caractere permise intr-un input sau textarea.
<h4>Exemplu elm.maxLength</h4>
<p>Afiseaza valoarea de la 'maxlength' din textarea, numarul maxim de caractere permise.</p>
Descriere (puteti adauga maxim <em id='resp'>nr</em> caractere):<br>
 <textarea id='txta1' maxlength='180'></textarea>

<script>
document.getElementById('resp').innerHTML = document.getElementById('txta1').maxLength;
</script>
elm.name - returneaza sau seteaza valoarea atributului 'name' din 'elm'.
<h4>Exemplu elm.name</h4>
<form action='#'>
Text: <input name='txt1' type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea 'name' de la primul element din Form.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm[0].name;
});
</script>
elm.placeholder - returneaza sau seteaza valoarea atributului 'placeholder' din 'elm'.
<h4>Exemplu elm.placeholder</h4>
<form action='#'>
Name: <input type='text' name='txt1' placeholder='Add a name'><br>
 <input type='button' value='placeholder' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea atributului 'placeholder' din 'txt1', apoi seteaza alt 'placeholder'.<br>
 - La al doilea clic afiseaza noua valoare setata.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].placeholder;
 frm['txt1'].placeholder ='Adaugati un nume';
});
</script>
elm.readOnly - returneaza sau seteaza atributul 'readonly' din 'elm'.
- Cand 'readonly' e adaugat (setat ca True), valoarea din acel element nu poate fi modificata. Daca nu e adaugat, e false.
<h4>Exemplu elm.readOnly</h4>
<form action='#'>
Text: <input type='text' name='txt1' value='txt'><br>
<p> - Scrieti ceva in caseta de text, iar dupa apasarea butonului incercati sa mai adaugati un text.</p>
<input type='button' value='readOnly' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp valoarea atributului 'readonly' din 'txt1', apoi seteaza 'readOnly' true.<br>
 - La al doilea clic afiseaza noua valoare setata.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].readOnly;
 frm['txt1'].readOnly = true;
});
</script>
elm.required - returneaza sau seteaza atributul 'required' din 'elm'.
- Cand 'required' e adaugat (setat ca True), input-ul respectiv trebuie completat. Daca nu e adaugat, e false.
<h4>Exemplu elm.required</h4>
<form action='#'>
Name: <input type='text' name='txt1' required><br>
<input type='button' value='required' id='btn1'>
</form>
<p>La clic pe buton afla daca input-ul 'txt1' e 'required'; afiseaza raspunsul la #resp.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].required;
});
</script>
elm.type - returneaza sau seteaza valoarea atributului 'type' din 'elm'.
<h4>Exemplu elm.type</h4>
<form action='#'>
Text: <input name='txt1' type='text'><br>
<input type='button' value='Click' id='btn1'>
</form>
<p>La clic pe buton afiseaza la #resp tipul elementului cu name 'txt1' din Form, apoi seteaza tipul 'email'.<br>
 - La al doilea clic afiseaza noua valoare adaugata.</p>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var frm = ev.target.form; //form-ul parinte
 document.getElementById('resp').innerHTML = frm['txt1'].type;
 frm['txt1'].type ='email';
});
</script>
elm.value - returneaza sau seteaza valoarea atributului 'value' din 'elm'.
<h4>Exemplu elm.value</h4>
Nr.: <input type='number' id='nr' value='0'><br>
<p>La fiecare clic pe buton incrementeaza cu o unitate valoarea de la 'nr'.</p>
<input type='button' value='Click' id='btn1'>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var elm = document.getElementById('nr');

 //value transmite valoarea ca string; Number() transforma in numar
 var nr = Number(elm.value) +1;
 elm.value = nr;
});
</script>

Metode pentru elemente din form

elm.checkValidity() - returneaza True daca datele din 'elm' sunt valide (conform setarilor definite), in caz contrar False.
<h4>Exemplu elm.checkValidity()</h4>
 Nume: <input type='text' pattern='[A-z0-9]{3,}' required placeholder='Minim 3 litere / numere' id='txt1'>
<p> Caseta pt. Nume are atributul 'required' (trebuie completata) si un 'pattern'.<br>
 - La clic pe buton se verifica valoarea returnata de metoda checkValidity() si afiseaza mesaj la #resp.</p>
<button id='btn1'>checkValidity</button>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var res = document.getElementById('txt1').checkValidity() ?'Completare corecta' :'Completati Numele, cel putin 3 caractere, doar litere si numere';
 document.getElementById('resp').innerHTML = res;
});
</script>
elm.click() - simuleaza clic pe 'elm' si declansaza evenimentul 'click' pe acel element.
<h4>Exemplu elm.click()</h4>
Name: <input type='text' id='txt1'><br>
<p>La clic pe buton se efectueaza din JavaScript click pe caseta de text.<br>
 - Click-ul pe caseta de text are inregistrat sa afiseze o fereastr alert.</p>
 <input type='button' value='Click' id='btn1'>

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

//click-ul pe buton
document.getElementById('btn1').addEventListener('click', (ev)=>{
 txt1.click();
});

//click-ul pe caseta de text
txt1.addEventListener('click', (ev)=>{
 alert('S-a efectuat Click pe caseta de text');
});
</script>
elm.focus() / elm.blur()
- metoda focus() face focus-ul pe elementul 'elm' (cursorul e pe acel 'elm').
- metoda blur() anuleaza focus-ul de pe elementul 'elm' (cursorul nu mai e pe acel 'elm').
<style>
#txt1:focus {
background: #efefa0;
font-weight: 700;
}
</style>

<h4>Exemplu: elm.focus() / elm.blur()</h4>
<p>La Focus, cand cursorul e in caseta text se modifica din CSS culoarea background si grosimea textului.</p>
Name: <input type='text' id='txt1'><br>
 <input type='button' value='Focus' id='btn1'> / <input type='button' value='Blur' id='btn2'>
<p>Clic pe butoane pt. a da sau anula focus-ul la caseta de text 'txt1'.</p>

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

//butonul pt. Focus
document.getElementById('btn1').addEventListener('click', (ev)=>{
 txt1.focus();
});

//butonul pt. Blur
document.getElementById('btn2').addEventListener('click', (ev)=>{
 txt1.blur();
});
</script>
elm.select() - selecteaza continutul din input-uri sau textarea.
<h4>Exemplu elm.select()</h4>
Descriere:<br>
 <textarea id='txta'>La clic pe buton acest text va fi selectat.</textarea><br>
 <input type='button' value='Select' id='btn1'>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('txta').select();
});

//click-ul pe caseta de text
txt1.addEventListener('click', (ev)=>{
 alert('S-a efectuat Click pe caseta de text');
});
</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.
Proprietati si Metode elemente din form

Last accessed pages

  1. Ferestre Alert Prompt si Confirm (3200)
  2. Demonstrative (2050)
  3. getElementById si getElementsByTagName (565)
  4. Break si Continue (3991)
  5. Substantive - Exercitii si teste engleza incepatori (39958)

Popular pages this month

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