Cum veți crea un formular HTML?

Pentru a crea un formular HTML, voi folosi elementul <form>. În interiorul său vor fi plasate elemente de control, cum ar fi câmpuri de text (<input type="text">), câmpuri pentru parolă (<input type="password">), casete de selectare (<input type="checkbox">), butoane radio (<input type="radio">), liste derulante (<select> și <option>), zone de text (<textarea>) și butoane de trimitere (<button type="submit"> sau <input type="submit">).

Fiecare element al formularului va avea un atribut name pentru identificare pe partea serverului și, de obicei, un atribut id pentru a-l lega de o etichetă (<label>).

Atributele <form>:

action: URL-ul către care vor fi trimise datele formularului la trimitere.
method: Metoda HTTP pentru trimiterea datelor (GET sau POST).
enctype: Tipul de codificare a datelor la trimitere (de exemplu, multipart/form-data pentru încărcarea fișierelor).

Exemplu de formular simplu:

<form action="/submit-form" method="post">
  <label for="username">Nume utilizator:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Parolă:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Ține-mă minte</label><br><br>

  <label for="country">Țară:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusia</option>
    <option value="us">SUA</option>
  </select><br><br>

  <label for="message">Mesaj:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

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

Validarea formularului poate fi realizată atât pe partea clientului (folosind atributele de validare HTML5, JavaScript), cât și pe partea serverului.

Atributele de validare HTML5:

required: Câmp obligatoriu.
minlength, maxlength: Lungimea minimă și maximă a câmpului de text.
min, max: Valoarea minimă și maximă pentru câmpurile numerice.
type cu diferite valori (email, url, number, date etc.) pentru validare automată de către browser.
pattern: Expresie regulată pentru validarea inputului.

Exemplu cu validare HTML5:

<form action="/submit-form" method="post">
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Vârstă (de la 18 la 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Cod poștal (5 cifre):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

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

Pentru stilizarea formularului, se va folosi CSS. Pentru logică mai complexă sau trimitere asincronă a datelor, se va folosi JavaScript. Pentru a îmbunătăți accesibilitatea formularului, se vor folosi atribute ARIA corespunzătoare și o structură HTML corectă.