Formulare

#Elementul <form>

Indiferent de scopul pentru care construiești un formular, vei folosi elementul <form> pentru a grupa câmpurile pe care utilizatorii le pot completa. Spre exemplu, așa arată un scurt formular de autentificare:

<form>
  <label>
    <span> Username </span>
    <input type="text" name="username" required>
  </label>
  <label>
    <span> Password </span>
    <input type="password" name="password" require>
  </label>
  <button type="submit"> Login </button>
</form>

Poate ai observat că în exemplul de mai sus avem mai multe elemente <label> iar la final un buton cu type="submit". Deși nu sunt obligatorii, sunt bune practici despre care vorbim mai jos în articol.

#Elementul <input>

Este cel mai popular element folosit în formulare iar prin atributul type="" putem controla cum se comportă acesta.

Mai jos avem o colecție de input-uri, fiecare cu altă valoare pentru atributul type, ce ne permit să completăm cu text, parole, date calendaristice, să încărcăm fișiere sau să alegem culori:

<form>
  <label>
    <span> Username </span>
    <input type="text" name="username" required />
  </label>
  <label>
    <span> Password </span>
    <input type="password" name="password" required />
  </label>
  <label>
    <span> Profile picture </span>
    <input type="file" name="avatar" required />
  </label>
  <label>
    <span> Birthday </span>
    <input type="date" name="birthday" required />
  </label>
  <label>
    <span> Favorite color </span>
    <input type="color" name="color" required />
  </label>
  <div class="gender">
    <label>
      <span> Male </span>
      <input value="male" type="radio" name="gender" required />
    </label>
    <label>
      <span> Female </span>
      <input value="female" type="radio" name="gender" required />
    </label>
  </div>
  <button type="submit"> Done </button>
</form>

Pentru a vedea toate valorile posibile pentru atributul type, accesează documentația de pe MDN.

Alte atribute pe care le vei folosi zi de zi pentru elementul <input> sunt:

required

marchează câmpul ca fiind obligatoriu.

disabled

este folosit în cazul în care vrem ca un câmp să nu mai fie editabil.

placeholder

reprezintă textul din input când nu există nicio valoare în el. În momentul în care începi să scrii în input, acest placeholder dispare.

name

este folosit pentru a identifica datele din formular. Ne vom folosi de el fie pe FrontEnd (JavaScript) fie pe BackEnd pentru a accesa datele din formular.

value

pentru a avea o valoare precompletată. Utilizatorul o poate schimba dacă nu e prezent atributul disabled.

autofocus

indică dacă câmpul ar trebui să fie "focused" sau nu.

inputmode

atributul acesta indică tipul de tastatură virtuală care îi va apărea utilizatorului când intră de pe telefon.

Mai sus le-am enumerat, dar hai să le și vedem în acțiune:

<form>
  <input 
    placeholder="Username" 
    type="text" 
    name="username" 
    required
  >
  <input 
    placeholder="Secret PIN" 
    type="password" 
    name="pin" 
    required 
    inputmode="decimal"
  >
  <input 
    type="email" 
    value="bob@frontend.ro" 
    name="email" 
    required 
    disabled
  >
  <button type="submit"> Login </button>
</form>

<form>
  <p> Ce mâncare preferi? </p>
  
  <label>
    <span> American Burger <span>
    <input checked type="radio" value="burger" name="favoriteFood">
  </label>
          
  <label>
    <span> Greek Salad <span>
    <input type="radio" value="salad" name="favoriteFood">
  </label>
      
  <hr>

  <p> Ce băutură preferi? </p>
  
  <label>
    <span> Cafea <span>
    <input checked type="radio" value="coffee" name="favoriteDrink">
  </label>
          
  <label>
    <span> Ceai <span>
    <input type="radio" value="tea" name="favoriteDrink">
  </label>
  <button type="submit"> Next </button>

#Elementul <textarea>

Este similar cu <input type="text" /> doar că permite completarea cu text pe mai multe linii:

<form>
  <label>
    <span> Nume * </span>
    <input type="text" name="name" required >
  </label>
  <label>
    <span> Comentariu * </span>
    <textarea rows="5" cols="30" name="comment" required></textarea>
  </label>
  <button type="submit"> Adaugă </button>
</form>

Toate atributele menționate la input-uri (în afară de type="") sunt valabile și pentru <textarea>

#Elementul <select>

Cu ajutorul elementului <select> îi oferim utilizatorului un "dropdown menu" cu o listă de opțiuni din care poate alege. Gândește-te spre exemplu la un formular de înregistrare în care trebuie să alegi țara de origine:

 <form>
  <label>
    <span> Country </span>
    <select name="country" required>
      <option value=""> Alege țara</option>
      <option value="ro-RO"> România</option>
      <option value="en-EN"> Anglia</option>
      <option value="en-US"> Statele Unite ale Americii</option>
    </select>
  </label>
  <button type="submit"> Register </button>
</form>

Opțiunile le specificăm prin elementul <option> care trebuie să primească atributul value="" iar opțional și atributul selected pentru a preselecta opțiunea.

Pe lângă atributele menționate mai sus - multe dintre ele fiind valide pentru elementul select - mai avem și atributul multiple pentru a permita selecție multiplă.

#Bune practici

Așa cum sugerează și numele sunt tehnici de programare care indică cum ar trebui să faci anumite lucruri pentru a avea un rezultat cât mai bun și calitativ.

<div>
<form>
  <p> Dacă apeși ENTER în aceste inputuri formularul se va trimite 👇 </p>
  <label>
    <span> Username </span>
    <input type="text" name="username" required>
  </label>
  <label>
    <span> Password </span>
    <input type="password" name="password" require>
  </label>
  <button type="submit"> Login </button>
</form>

<hr>


<form>
  <p> Dacă apeși ENTER în aceste inputuri nu o să se întâmple nimic 😬 </p>
  <label>
    <span> Username </span>
    <input type="text" name="username" required>
  </label>
  <label>
    <span> Password </span>
    <input type="password" name="password" require>
  </label>
  <button type="button"> Login </button>
</form>

</div>