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 e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Proprietati si Metode elemente din form

Last accessed pages

  1. Formatare text in pagina html (7529)
  2. Coduri pt culori (13385)
  3. Titluri, Paragrafe, Un nou rand, Linie orizontala (6793)
  4. Elemente speciale meta embed marquee, object (986)
  5. Verbe frazale din limba Engleza (7619)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3105)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2832)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1782)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1346)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1315)