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 HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Proprietati si Metode elemente din form

Last accessed pages

  1. Verbele regulate 3 (1750)
  2. CSS3 opacity (280)
  3. Verbe la indicativ, cu forma yo neregulata (430)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (20026)
  5. Teste spaniola - Tests y ejercicios de Español - Gramática (6021)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2235)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (1221)
  3. Creare si editare pagini HTML (1102)
  4. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1084)
  5. Curs HTML gratuit Tutoriale HTML5 (946)