Introducere în Web Development

<label>

Un label reprezintă textul atașat unui câmp.

De obicei, când se apasă pe label, browserul va face focus pe câmpul ce este atașat. Pentru a atașa un câmp la un label, fie includem câmpul în label:

                    <label>
  Nume:
  <input type="text" />
</label>
                

Fie dăm label-ului atributul for în care punem id-ul câmpului.

                    <label for="the-name">Nume:</label>

<input id="the-name" type="text" />
                

De remarcat faptul că <label> este un element de inline. De multe ori, va trebui să îl transformăm din CSS în bloc.

<form>

De când am început să folosesc Vue și React, am tot mai puține ocazii în care să folosesc acest element.

În mod tradițional, un element form există pentru a serializa datele introduse în câmpurile sale, și a trimite acele date la server dintr-o aplicație monolit (back-end-ul și front-end-ul fac parte din aceeași aplicație). În React (și Vue, și Angular, și altele), datele sunt de obicei sincronizate cu variabile și trimise la un API prin AJAX.

M-aș putea gândi să folosesc <form> atunci când e vorba de un formular foarte mare, vreau să profit cumva de serializare, sau de opțiunile de validare disponibile în browserele moderne.

Serializare

Am scris de câteva ori despre serializare în acest document, dar poate nu e clar ce e.

Serializarea, în acest context, reprezintă procesul de a transforma câmpurile și valorile într-un text.

De obicei, un câmp dintr-un formular este serializat ca parametru de URL: «name»=«value» .

Un formular întreg va avea toate câmpurile serializate și legate prin &.

De exemplu, un formular de genul:

                    <form>
  <input type="text" name="username" value="Miorita" />
  <input type="text" name="job" value="Oaia programabila" />
  <input type="checkbox" name="fence" value="are gard" checked />
</form>
                

Acest formular va fi serializat ca:

username=Miorita&job=Oaia+programabila&fence=are+gard

Dacă acest mod de serializare nu e bun pentru ce vrem să facem, putem asculta de evenimentul submit al formularului, să îl blocăm (event.preventDefault()), și să facem noi propria serializare, poate folosind FormData.

Atribute

Aceste atribute au efect dacă trimitem formularul la server în mod tradițional.

action

Action reprezintă URL-ul la care va fi trimis formularul după submit.

method

Reprezintă metoda HTTP prin care se va trimite formularul, fie GET, fie POST.

Prin metoda GET (method="get"), formularul serializat va fi adăugat după URL-ul de la action și caracterul ?

enctype

Reprezintă formatul în care este trimis formularul. Ar trebui să aibă una din valorile:

1. application/x-www-form-urlencoded - atunci când formularul include doar text

2. multipart/form-data - atunci când formularul include și fișiere
   <input type="file" />