Aceasta e o versiune anterioară a paginii.
În această lecție vom învăța despre formulare, butoane, despre evenimentul onClick și funcția getElementById.
Formularele sunt modalități prin care utilizatorul poate interacționa cu pagina HTML. Un exemplu de formular este următorul:
See the Pen rLGHz by andreea (@andreeas) on CodePen.
Elementele unui formular se declară între etichetele <form> si </form>.
<input type='text' />
Exemplu:
Pentru a seta o valoare implicită se specifică atribitul value sau atributul placeholder:
<input type='text' value='Valoare implicită' /> sau <input type='text' placeholder='Text' />
Pe mai multe linii:
<textarea></textarea>
Exemplu:
Pentru acest element valoarea implicită se setează astfel:
<textarea>Valoare implicită</textarea>
De asemenea se poate seta și atributul placeholder.
Putem selecta implicit o opțiune adăugând atributul selected opțiunii dorite.
<option selected>Optiunea 2</option>
Pentru a selecta implicit una din opțiuni putem folosi atributul checked pentru opțiunea dorită.
<input type='checkbox' />
Exemplu:
Dacă dorim ca checkbox-ul să fie implicit bifat, putem folosi atributul checked.
Sintaxă:
<button>Buton</button>
Buton pentru resetare formular:
<input type='reset' />
Buton pentru trimitere formular:
<input type='submit' />
Evenimentul onClick specifică ce trebuie să se întâmple atunci când se apasă pe un element din pagina HTML.
El se specifică sub forma unui atribut al elementului pentru care dorim să modificăm comportamentul în momentul în care se apasă pe elementul respectiv, iar în interiorul său se introduce cod Javascript, cel mai adesea se apelează o funcție.
Exemplu:
<script type='text/javascript'> function functie() { alert(“test”); } </script> <button onClick=”functie();”>Apasă-mă</button>
sau
<button onClick=”alert('test');”>Apasă-mă</button>
Funcția Javascript document.getElementById este folosită pentru a putea prelua în variabile Javascript date din pagina HTML. Pentru a putea accesa un element din pagină, elementul respectiv trebuie să conțină atributul id Exemplu:
<div id='div-1'></div> <script type='text/javascript'> var element = document.getElementById('div-1'); </script> <code> După preluarea elementului putem accesa următoarele proprietăți: *dacă elementul este de tipul div, p, span sau alte elemente care conțin text, putem folosi atributul innerHTML pentru a prelua sau modifica conținutul elementului. Exemplu: <code html> <div id='div-2'>Text implicit</div> <script type='text/javascript'> var element = document.getElementById('div-2'); element.innerHTML = “Conținut ce va fi afișat în div”; </script>
*atributul style ne permite modificarea proprietăților CSS. Sintaxa este următoarea:
element.style.proprietate_css = 'valoare_css';
Exemplu:
Creați un formular cu o tematica aleasă de voi care să conțină: