<form>

Elementul <form></form> ne ajuta sa definim o zona dintr-o pagina ce contine elemente interactive prin care cineva ne poate trimite informatii.

Am vazut ca pentru a accepta date de la cineva trebuie sa folosim tag-ul <input />. Dar acesta trebuie cuprinsa de tag-urile <form></form> care defineste defapt formularul.

Asadar un <input /> are sens doar in interiorul unui element <form></form>.

De exemplu, un formular care ne-ar cere numele, prenumele, o adresa de email si care ar contine si un buton pentru a salva, ar arata astfel:

<form>
    <input type="text" name="nume" placeholder="Nume" />
    <input type="text" name="prenume" placeholder="Prenume" />
    <input type="email" name="email" placeholder="Adresa email" />

    <input type="submit" value="Trimite" />
</form>

Iar rezultatul ar fi:

Intalnim aceleasi elemente de tip <input /> despre care am discuta in lectiile trecute dar toate sunt cuprinse intre tag-urile <form></form>.

Atribute

Cele mai intalnite atribute ale acestui element sunt urmatoarele:

action

Acest atribut este folosit pentru a preciza un URL unde vom trimite informatiile din formular. Daca nu il precizam atunci se va adresa paginii curente.

<form action="https://www.edumo.org/un-url-care-va-primi-informatiile">
    ...
</form>

method

Prin acest atribut putem preciza metoda HTTP prin care vrem sa trimitem informatiile. Exista 4 metode HTTP (get, post, put si delete) dar un formular nu poate folosi decat doua: get sau post. Daca nu precizam nici o valoare formularul va folosi GET.

<form method="get" action="/un-url-care-va-primi-informatiile">
    ...
</form>

Atunci cand folosim post informatiile vor fi trimse la server direct care apoi ne va da un raspuns si acel raspuns va fi incarcat in pagina (o cerere post = a trimite ceva).

Folosind metoda get informatiile vor fi puse in URL (sub forma nume=valoare) si se va face o cerere la server (vom face o cerere get = a primi ceva).

enctype

Acest atribut este folositor doar cand vrem sa permitem cuiva sa incarce un fisier pe site. Daca avem in formular un element input de tipul <input name="fisier" type="file" /> atunci trebuie neaparat sa precizam pe formularul care il cuprinde atributul enctype cu valoarea multipart/form-data:

<form action="/incarca-fisier" method="post" enctype="multipart/form-data" >
    <input name="fisier" type="file" />
    <input value="Trimite" type="submit" />
</form>

Acestea sunt doar cele mai intalnite atribute, pentru lista completa puteti vizita MDN.

In interiorul unui formular nu trebuie neaparat sa avem doar elemente de tip <input />, putem folosi ce vrem, precum paragrafe, imagini, titluri, etc. Dar rostul unui formular este de a trimite date asa ca elementele de tip input sunt cele mai importante.

O cautare pe Google

De exemplu, atunci cand cautam ceva pe www.google.ro se foloseste un formular cu metoda get. Si vedem ca ceea ce cautam se adauga URL-ului atunci cand ajungem pe pagina cu rezultate. De exemplu daca am cauta edumo, formularul ar cere urmatoarea pagina:

https://www.google.ro/search?q=edumo&oq=edumo&ie=UTF-8

Vedem ca dupa semnul ? intalnim q=edumo. Ceea ce inseamna ca pe prima pagina, in interiorul formularului, aveam un element de tip <input /> care avea un atribut name="q", iar valoarea acelui input era edumo. Inseamna ca atunci cand am dat click pe Search, formularul arata astfel:

<form action="/search" method="GET" >
    <input name="q" type="text" value="edumo" />
    <input value="Google Search" type="submit" />
</form>

Folosind acel cod ne putem construi noi un formular care cauta pe Google: