Formulare HTML

Un formular HTML permite utilizatorilor sa introduca informatii pe o pagina web: sa se inregistreze pe un site, sa se autentifice, sa trimita un mesaj, sa caute ceva, sa comande un produs. Fara formulare, web-ul ar fi doar citit — nu interactiv.

Containerul unui formular este tag-ul <form>. Tot ce se afla in interiorul lui (campuri, butoane, etichete) face parte din formular. Tag-ul <form> are doua atribute importante:

• action — adresa serverului catre care se trimit datele (poate lipsi pentru formulare care se proceseaza cu JavaScript)
• method — metoda de trimitere: get (datele apar in URL) sau post (datele sunt trimise ascuns, in corpul cererii, recomandat pentru parole si date sensibile)

<form action="/trimite-mesaj" method="post">
  <!-- Campurile formularului merg aici -->
</form>

Gandeste-te la <form> ca la un plic: contine toate informatiile (campurile completate de utilizator) si stie unde trebuie trimis (atributul action) si prin ce metoda (atributul method).

La clasa a VIII-a, pentru exercitii practice, nu ai nevoie de un server real. Poti crea formulare care arata si functioneaza vizual, cu JavaScript simplu sau pur si simplu pentru a invata structura HTML. Datele trimise de un formular fara server nu se salveaza nicaieri — dar structura HTML este identica.

Tag-ul <input> este cel mai versatil element de formular. Este self-closing (nu are tag de inchidere) si se poate transforma in mai multe tipuri de camp in functie de atributul type.

Cele mai folosite tipuri de <input>:

• type="text" — camp de text simplu (implicit, daca nu specifici type)
• type="email" — camp pentru adresa de email; browserul valideaza automat formatul (trebuie sa contina @)
• type="password" — camp pentru parola; caracterele tastate apar ca puncte
• type="number" — camp pentru numere; include sageti pentru incrementare/decrementare
• type="checkbox" — casuta de bifat (bifata / nebifata)
• type="radio" — buton radio (dintr-un grup, o singura optiune selectabila)

<input type="text" name="nume" placeholder="Scrie numele tau">
<input type="email" name="email" placeholder="adresa@email.com">
<input type="password" name="parola" placeholder="Minim 8 caractere">
<input type="number" name="varsta" min="10" max="18">

Atributul placeholder afiseaza un text ajutator in camp cand acesta este gol. Dispare automat cand utilizatorul incepe sa scrie. Este util pentru a arata utilizatorului ce format este asteptat.

Atributul name este important: este identificatorul campului care ajunge la server. Fara atribut name, datele din camp nu se trimit. Este ca eticheta de pe o cutie postala — serveste pentru adresare.

Atributul required (fara valoare) marcheaza campul ca obligatoriu. Browserul va refuza trimiterea formularului daca acest camp este gol, afisand un mesaj de eroare automat.

Tag-ul <label> afiseaza o eticheta text asociata unui camp de formular. De exemplu, textul "Nume:" sau "Adresa de email:" de langa un camp de input este un label.

Asocierea intre label si input se face prin atributele for si id: valoarea lui for (pe label) trebuie sa fie identica cu valoarea lui id (pe input).

<form>
  <label for="camp-nume">Numele tau:</label>
  <input type="text" id="camp-nume" name="nume" placeholder="Ion Popescu">

  <label for="camp-email">Adresa de email:</label>
  <input type="email" id="camp-email" name="email" placeholder="ion@email.com" required>
</form>

De ce este important tag-ul <label>? Trei motive:

1. Accesibilitate: cititorii de ecran citesc label-ul cand focus-ul ajunge la camp, spunand utilizatorului ce trebuie sa introduca.
2. Zona de clic marita: cand dai clic pe label, focus-ul se muta automat la campul asociat. Pe mobil, asta face formularul mult mai usor de completat.
3. Claritate vizuala: utilizatorul stie exact ce trebuie sa scrie in fiecare camp.

O alternativa este sa pui input-ul in interiorul label-ului — asocierea este implicita fara a folosi for si id:

<label>
  Numele tau:
  <input type="text" name="nume">
</label>

Ambele metode sunt corecte; metoda cu for/id este mai flexibila (label si input pot fi in locuri diferite ale paginii).

Tag-ul <input type="text"> este un camp de text pe un singur rand. Dar uneori ai nevoie ca utilizatorul sa scrie mai mult — un mesaj, o descriere, un comentariu. In aceste situatii, se foloseste <textarea>.

Diferente fata de <input>:

• <textarea> are tag de inchidere (</textarea>)
• Dimensiunea se controleaza cu atributele rows (numarul de randuri vizibile) si cols (latimea in caractere)
• Utilizatorul poate redimensiona campul tragindu-l de coltul din dreapta-jos (comportament implicit)

<form>
  <label for="mesaj">Mesajul tau:</label>
  <textarea id="mesaj" name="mesaj" rows="5" cols="40"
            placeholder="Scrie mesajul tau aici..."></textarea>
</form>

Textul implicit din <textarea> (continut pre-completat) se pune intre taguri, nu in atribut: <textarea>Text initial</textarea>. La <input>, valoarea initiala se pune in atributul value.

In practica, dimensiunile rows si cols se controleaza de obicei prin CSS (width si height), nu prin atribute HTML. Cu CSS poti si dezactiva redimensionarea utilizatorului daca este necesar (resize: none;), sau sa permiti doar redimensionarea pe verticala (resize: vertical;).

Tag-ul <select> creeaza o lista derulanta (dropdown) — utilizatorul da clic si apare o lista de optiuni din care alege una. Fiecare optiune este definita cu tag-ul <option>.

<label for="clasa">Alege clasa:</label>
<select id="clasa" name="clasa">
  <option value="">-- Selecteaza --</option>
  <option value="8a">VIII-A</option>
  <option value="8b">VIII-B</option>
  <option value="8c">VIII-C</option>
</select>

Atributul value al fiecarui <option> este valoarea trimisa la server. Textul dintre taguri este ceea ce vede utilizatorul. De exemplu, <option value="8a">VIII-A</option> afiseaza "VIII-A" dar trimite "8a" la server.

Prima optiune goala (<option value="">-- Selecteaza --</option>) este o practica buna: forteaza utilizatorul sa faca o alegere constienta, in loc ca prima optiune reala sa fie selectata implicit.

Atributul selected (pe un <option>) marcheaza acea optiune ca selectata implicit la incarcarea paginii:

<option value="8b" selected>VIII-B</option>

Cu atributul multiple pe <select>, utilizatorul poate selecta mai multe optiuni simultan (tinand apasat Ctrl). Cu atributul size, poti afisa mai multe optiuni simultan (ca o lista, nu dropdown):

<select name="materii" multiple size="4">
  <option value="mat">Matematica</option>
  <option value="rom">Romana</option>
  <option value="inf">Informatica</option>
  <option value="fiz">Fizica</option>
</select>

Un formular are nevoie de un buton prin care utilizatorul sa trimita datele. In HTML, exista doua moduri de a crea acest buton:

• <input type="submit" value="Trimite"> — buton simplu de trimitere; textul butonului e dat de atributul value
• <button type="submit">Trimite</button> — mai flexibil; poate contine HTML in interior (text, icoane)

<form action="/contact" method="post">
  <label for="name">Nume:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="mesaj">Mesaj:</label>
  <textarea id="mesaj" name="mesaj" rows="4"></textarea>

  <button type="submit">Trimite mesajul</button>
</form>

Exista si <button type="reset"> care reseteaza formularul (sterge toate datele introduse si revine la valorile initiale). Foloseste-l cu atentie — daca un utilizator apasa accidental "Reset" dupa ce a completat un formular lung, pierde toata munca.

<button type="button"> creeaza un buton care nu face nimic implicit — trebuie conectat la o functie JavaScript. Se foloseste pentru actiuni personalizate (de exemplu, validarea datelor inainte de trimitere).

In practica moderna, toate formularele semnificative (login, inregistrare, contact) folosesc si validare pe server, nu doar pe client (browser). Validarea HTML cu required, type="email" etc. este o prima linie de aparare convenabila, dar nu o masura de securitate.