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 HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Proprietati si Metode elemente din form

Last accessed pages

  1. Verbe ca si Gustar (1846)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (66723)
  3. Alte forme complexe cu DIV si CSS (479)
  4. Introducere in HTML (24987)
  5. Pronume indirect (2216)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (767)
  2. Exercitii engleza - English Tests and exercises - Grammar (596)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (587)
  4. Gramatica limbii engleze - Prezentare Generala (580)
  5. Prezentul simplu - Exercitii si teste incepatori (504)