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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Proprietati si Metode elemente din form

Last accessed pages

  1. Cursuri Limba Rusa (5614)
  2. Ir a + Infinitiv Forma de viitor (2171)
  3. Viitor simplu - Exercitii si teste incepatori (11985)
  4. Viitor simplu si continuu - Future Tense Simple and Continuous (45956)
  5. Pozitionare elemente HTML cu CSS (5085)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (961)
  2. Gramatica limbii engleze - Prezentare Generala (626)
  3. Exercitii engleza - English Tests and exercises - Grammar (558)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (454)
  5. Coduri pt culori (366)