Kaip kursite HTML formą?

Norint sukurti HTML formą, naudosiu <form> elementą. Jo viduje bus išdėstyti valdymo elementai, tokie kaip teksto laukai (<input type="text">), slaptažodžio laukai (<input type="password">), žymės (<input type="checkbox">), radijo mygtukai (<input type="radio">), išskleidžiami sąrašai (<select> ir <option>), teksto sritys (<textarea>) ir siuntimo mygtukai (<button type="submit"> arba <input type="submit">).

Kiekvienas formos elementas turės name atributą, kad būtų galima jį identifikuoti serveryje, ir dažnai id atributą, kad būtų galima susieti su <label>.

<form> atributai:

• action: URL, į kurį bus siunčiami formos duomenys.
• method: HTTP užklausos metodas (GET arba POST).
• enctype: Duomenų kodavimo tipas siunčiant (pavyzdžiui, multipart/form-data failų įkėlimui).

Pavyzdys paprastos formos:

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

  <label for="password">Slaptažodis:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Prisiminti mane</label><br><br>

  <label for="country">Šalis:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusija</option>
    <option value="us">JAV</option>
  </select><br><br>

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

  <button type="submit">Siųsti</button>
</form>

Formos validacija gali būti įgyvendinta tiek kliento, tiek serverio pusėje:

HTML5 validacijos atributai:

• required: Laukas privalomas užpildyti.
• minlength, maxlength: Minimalus ir maksimalus teksto ilgis.
• min, max: Minimalios ir maksimalios reikšmės skaitmeniniuose laukuose.
• type su įvairiomis reikšmėmis (email, url, number, date ir kt.) automatinės validacijos tikslais.
• pattern: Reguliarios išraiškos validacijai.

Pavyzdys su HTML5 validacija:

<form action="/submit-form" method="post">
  <label for="email">El. paštas:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <label for="age">Amžius (nuo 18 iki 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Pašto kodas (5 skaitmenų):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Siųsti</button>
</form>

Formos stiliui taikomas CSS. Sudėtingesnei logikai ar asinchroniniam duomenų siuntimui naudojamas JavaScript. Siekiant pagerinti prieinamumą, naudojami atitinkami ARIA atributai ir teisinga HTML struktūra.