Lucrul cu Formulare

Formulare și Elementele lor

Unul dintre modurile de interacțiune cu utilizatorii sunt formularele HTML. De exemplu, dacă dorim să obținem anumite informații de la utilizator, putem defini pe o pagină web un formular care va conține câmpuri text pentru introducerea informațiilor și un buton pentru trimiterea acestora. Și după introducerea datelor, putem prelucra informațiile introduse.

Pentru crearea unui formular se utilizează elementul <form>:

<form id="search" name="search">
</form>

În JavaScript, formularul este reprezentat de obiectul HtmlFormElement. După crearea formularului, ne putem referi la el în diferite moduri.

Obținerea Formularului

Primul mod implică adresarea directă după numele formularului:

const searchForm = document.search;

Al doilea mod constă în adresarea la colecția de formulare a documentului - colecția forms și căutarea în aceasta a formularului dorit:

const searchForm1 = document.forms["search"];   // după nume
const searchForm2 = document.forms[0];          // după index

Al treilea mod este obținerea formularelor prin metodele standard pentru căutarea elementelor după id, tag sau selector. De exemplu:

const formById = document.getElementById("search");
const formByName = document.getElementsByName("search")[0];
const formBySelector = document.querySelector("form");

Proprietăți și Metode ale Formularelor

Formularul are mai multe proprietăți, dintre care voi menționa principalele:

name: numele formularului
elements: colecția de elemente ale formularului
length: numărul de elemente ale formularului
action: valoarea atributului action - adresa de trimitere a formularului
method: valoarea atributului method - metoda HTTP utilizată pentru trimitere

De exemplu, să obținem proprietățile formularului:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
   <form id="search" name="search" action="https://google.com/search" method="get">
       <input type="text" id="key" name="q" />
       <input type="submit" id="send" name="send" />
   </form>
   <script>
   const form = document.getElementById("search");
   console.log(form.elements);     // HTMLFormControlsCollection(2) [input, input, q: input, send: input]
   console.log(form.length);       // 2
   console.log(form.name);         // search
   console.log(form.action);       // https://google.com/search
   console.log(form.method);       // get
   </script>
</body>
</html>

Dintre metodele formularului, trebuie menționat metoda submit(), care trimite datele formularului pe server, și metoda reset(), care curăță câmpurile formularului:

const form = document.forms["search"];
form.submit();
form.reset();

Elementele Formularelor

Formularul poate conține diferite elemente HTML de intrare: input, textarea, button, select, etc. Fiecare dintre aceste elemente are propriul tip JavaScript:

Pentru a obține elementele unui formular, putem folosi trei metode:

1. Utilizarea metodelor standard getElementById(), getElementsByClassName(), getElementsByTagName(), getElementsByName(), querySelector() și querySelectorAll() pentru căutarea elementelor, respectiv, după id, clasă, tag, nume sau selector. De exemplu, luăm formularul definit anterior și obținem câmpul său de intrare:

// obținem elementul după id="key"
const keyField = document.getElementById("key");
console.log(keyField);

2. Utilizarea proprietății elements a formularului corespunzător. De exemplu:

const form = document.getElementById("search");
   // obținerea câmpului după index
   const keyField = form.elements[0];
   console.log(keyField);
   // obținerea aceluiași câmp, dar prin nume
   const keyField2 = form.elements["q"];
   console.log(keyField2);

3. Sau folosind numele formularului și al elementului. De exemplu:

// câmpul q pe formularul search
   const keyField = document.search.q;
   console.log(keyField);

Proprietățile Elementelor Formularelor

Toate acestea au o serie de proprietăți și metode comune. La fel ca și formularul, elementele de formă au proprietatea name, prin care se poate obține valoarea atributului name. O altă proprietate importantă este value, care permite obținerea sau modificarea valorii câmpului:

<form name="search">
   <input type="text" name="key" value="hello world"></input>
   <input type="submit" name="send"></input>
</form>
<script>
const form = document.getElementById("search");
// obținerea câmpului formularului după nume
const keyField = form.elements["key"];
// obținerea valorii câmpului
console.log(keyField.value);
// setarea valorii câmpului
keyField.value = "Enter a string";
</script>

Proprietatea type permite obținerea tipului câmpului de intrare. Aceasta poate fi fie numele tag-ului elementului (de exemplu, textarea), fie valoarea atributului type pentru elementele input.

const form = document.getElementById("search");
// obținerea câmpului formularului după nume
const keyField = form.elements["key"];
// obținerea valorii câmpului
console.log(keyField.type); // text

Dintre metodele disponibile, se pot distinge metodele focus() (care stabilește focusul pe element) și blur() (care înlătură focusul de pe element):

const searchForm = document.forms["search"];
const keyField = searchForm.elements["key"];
keyField.focus();