Cum să creezi formulare HTML — ghid pas cu pas

In this tutorial, you'll learn about Cum să creezi formulare HTML. We cover key concepts, practical examples, and best practices.

Un formular HTML este principala modalitate de a colecta date de la utilizatori pe web — de la login și înregistrare până la formulare de contact și chestionare.

The Problem

Formularele HTML sunt peste tot pe web, dar mulți începători greșesc tipurile de input, atributul name (esențial pentru trimiterea datelor) sau structurează greșit câmpurile.

The Wrong Way

<form>
  <input type="text" placeholder="Nume">
  <input type="submit">
</form>

Probleme: Fără atribut name, datele nu se trimit la server. Fără label, accesibilitatea e slabă.

The Right Way

<form action="/submit" method="POST">
  <label for="nume">Nume:</label>
  <input type="text" id="nume" name="nume" 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>

  <label for="tara">Țară:</label>
  <select id="tara" name="tara">
    <option value="">Selectează</option>
    <option value="ro">România</option>
    <option value="md">Moldova</option>
  </select>

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

Step-by-Step Fix

1. Structurează formularul cu <form>

Atributul action specifică URL-ul unde se trimit datele; method poate fi GET sau POST.

2. Asociază <label> cu <input>

Folosește id pe input și for pe label pentru accesibilitate și click pe etichetă.

3. Alege tipul corect de input

<input type="text">    <!-- text simplu -->
<input type="email">   <!-- validare email -->
<input type="password"><!-- mascare caractere -->
<input type="number">  <!-- numere -->
<input type="checkbox"><!-- bifare -->
<input type="radio">   <!-- selecție unică -->

4. Folosește textarea pentru text lung

<textarea name="descriere" rows="5" cols="40"></textarea>

5. Adaugă buton de trimitere

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

Prevention Tips

• Adaugă required pentru validare client-side
• Folosește placeholder pentru exemple, nu ca înlocuitor de label
• Setează name pe fiecare câmp — fără el, datele nu se trimit
• Grupează câmpuri cu <fieldset> și <legend>

Common Mistakes

1. Fără atribut name — datele nu ajung la server
2. Label neasociat — accesibilitate redusă, click pe etichetă nu activează câmpul
3. Tip greșit de input — type="text" pentru email în loc de type="email"
4. Fără validare — nu verifica datele înainte de trimitere
5. Metoda greșită — GET pentru date sensibile în loc de POST

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.