HTML formasını necə yaradacaqsınız?

HTML formasını yaratmaq üçün <form> elementindən istifadə edəcəyəm. İçərisində mətn sahələri (<input type="text">), şifrə sahələri (<input type="password">), yoxlama qutuları (<input type="checkbox">), radio düymələri (<input type="radio">), açılan siyahılar (<select> və <option>), mətn sahələri (<textarea>) və göndərmə düymələri (<button type="submit"> və ya <input type="submit">) yerləşəcək.

Hər forma elementi server tərəfində tanınması üçün name atributuna və adətən <label> ilə əlaqələndirmək üçün id atributuna sahib olacaq.

<form> atributları:

• action: Form göndərildikdə məlumatların göndəriləcəyi URL.
• method: Məlumatların göndərilməsi üçün HTTP metodu (GET və ya POST).
• enctype: Göndərilən məlumatların kodlaşdırma növü (məsələn, fayl yükləmək üçün multipart/form-data).

Sadə form nümunəsi:

<form action="/submit-form" method="post">
  <label for="username">İstifadəçi adı:</label><br>
  <input type="text" id="username" name="username"><br><br>

  <label for="password">Şifrə:</label><br>
  <input type="password" id="password" name="password"><br><br>

  <input type="checkbox" id="remember" name="remember" value="yes">
  <label for="remember">Məni yadda saxla</label><br><br>

  <label for="country">Ölkə:</label><br>
  <select id="country" name="country">
    <option value="ru">Rusiya</option>
    <option value="us">ABŞ</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">Göndər</button>
</form>

Formanın doğrulanması həm müştəri tərəfində (HTML5 doğrulama atributları, JavaScript), həm də server tərəfində həyata keçirilə bilər.

HTML5 doğrulama atributları:

• required: Zəruri sahə.
• minlength, maxlength: Mətn sahəsinin minimal və maksimal uzunluğu.
• min, max: Rəqəmli sahələr üçün minimal və maksimal dəyərlər.
• type müxtəlif dəyərlərlə (email, url, number, date və s.) brauzer tərəfindən avtomatik doğrulama üçün.
• pattern: Düzgün ifadə ilə girişin doğrulanması.

HTML5 doğrulama ilə nümunə:

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

  <label for="age">Yaş (18-dən 99-a qədər):</label><br>
  <input type="number" id="age" name="age" min="18" max="99"><br><br>

  <label for="zipcode">Poçt indeksi (5 rəqəm):</label><br>
  <input type="text" id="zipcode" name="zipcode" pattern="\d{5}"><br><br>

  <button type="submit">Göndər</button>
</form>

Formanın stilizə edilməsi üçün CSS istifadə olunacaq. Daha mürəkkəb məntiq və ya asinxron məlumat göndərilməsi üçün JavaScript tətbiq olunacaq. Formanın əlçatanlığını artırmaq üçün uyğun ARIA atributları və düzgün HTML strukturu istifadə olunacaq.