HTML-də formalar: <form>

1.1 <form> elementi

Formalar istifadəçilərin veb-saytlarla qarşılıqlı əlaqəsində vacib bir hissədir. Formlardan istifadə edərək istifadəçilər məlumat daxil edə bilərlər, və bu məlumat daha sonra serverə emal üçün göndərilə bilər. HTML-də form yaratmaq üçün <form> elementi istifadə olunur.

<form> etiketi veb-səhifədə forma yaratmaq üçün istifadə olunur. Bu, mətn sahələri, düymələr, checkbox-lar və s. kimi müxtəlif forma elementlərini ehtiva edən bir konteyner olaraq xidmət edir. İstifadəçi tərəfindən daxil edilən bütün məlumatlar emal üçün serverə göndərilə bilər.

İstifadə nümunəsi:

    
      <form action="/submit" method="post">
        <label for="username">İstifadəçi adı:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button id="submit" type="submit">Göndər</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const userEmail = document.getElementById("email");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && userEmail.validity.valid) {
            e.preventDefault();
            alert(`Sizin adınız: ${userName.value}\n` + `Sizin Email: ${userEmail.value}`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">İstifadəçi adı:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br>
        <button type="submit">Göndər</button>
      </form>
    
  

<form> etiketinin atributları

action atributu form məlumatlarının göndəriləcəyini URL göstərir. Əgər action atributu göstərilməyibsə, forma məlumatları hazırkı URL-ə göndəriləcək.

Action atributunun istifadə nümunəsi:

    
      <form action="https://example.com/submit">
        <!-- Forma elementləri -->
      </form>
    
  

method atributu, forma məlumatlarının göndərilməsi üçün istifadə olunan HTTP metodunu göstərir. İki dəyər mövcuddur: GET və POST.

1. GET: Forma məlumatları URL sorğusunda parametrlər şəklində daxil edilir. Bu metod kiçik ölçülü məlumatların göndərilməsi üçün yararlıdır və məxfi məlumatların göndərilməsi üçün istifadə edilməməlidir.
2. POST: Forma məlumatları HTTP sorğusunun gövdəsində göndərilir. Bu metod böyük ölçülü məlumatların və ya məxfi məlumatların göndərilməsi üçün uyğundur.

Method atributunun istifadə nümunəsi:

    
      <form action="/submit" method="post">
        <!-- Forma elementləri -->
      </form>
    
  

1.2 Məlumat göndərmə metodları

GET metodu

GET metodu form məlumatlarını URL parametrləri kimi göndərir. Əgər method atributu göstərilməyibsə, bu metod standart olaraq istifadə olunur.

GET metodundan istifadə nümunəsi:

    
      <form action="/search" method="get">
        <label for="query">Axtarış:</label>
        <input type="text" id="query" name="query" required>
        <button id="submit" type="submit">Axtar</button>
      </form>
      <script>
        const searchField = document.getElementById("query");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (searchField.validity.valid) {
            e.preventDefault();
            alert(`Siz axtardınız: ${searchField.value}`);
          }
        });
      </script>
    
  

    
      <form action="/search" method="get">
        <label for="query">Axtarış:</label>
        <input type="text" id="query" name="query">
        <button type="submit">Axtar</button>
      </form>
    
  

GET metodunun xüsusiyyətləri

• Form məlumatları URL-də görünür, buna görə də məxfi məlumatların ötürülməsi üçün uyğun deyil
• URL uzunluğu məhdud olduğuna görə məlumat ölçüləri ilə bağlı məhdudiyyətlər var
• Məlumatlar asanlıqla keşlənə bilər və browserdə əlfəcin kimi saxlanıla bilər

POST metodu

POST metodu form məlumatlarını HTTP sorğusunun bədənində ötürür. Bu metod böyük məlumatlar və məxfi məlumatların ötürülməsi üçün istifadə olunur.

POST metodundan istifadə nümunəsi:

    
      <form action="/submit" method="post">
        <label for="username">İstifadəçi adı:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Şifrə:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Göndər</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert(`Xoş gəldin, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form action="/submit" method="post">
        <label for="username">İstifadəçi adı:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Şifrə:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button type="submit">Göndər</button>
      </form>
    
  

POST metodunun xüsusiyyətləri

• Form məlumatları URL-də görünmür, buna görə məxfi məlumatların ötürülməsi üçün uyğundur
• Məlumat ölçüsü ilə bağlı məhdudiyyət yoxdur, çünki məlumatlar sorğunun bədənində ötürülür
• Məlumatlar keşlənmir və browserdə əlfəcin kimi saxlanılmır

1.3 Əlavə atributlar

enctype atributu

enctype atributu POST metodu ilə forma məlumatlarını göndərərkən kodlaşdırma üsulunu təyin etmək üçün istifadə olunur. Ən çox istifadə edilən dəyər — multipart/form-data, bu, faylların yüklənməsi üçün lazımdır.

enctype atributunun istifadəsinə nümunə:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Faylı yüklə:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Göndər</button>
      </form>
    
  

target atributu

target atributu, forma göndərildikdən sonra server cavabının harada göstəriləcəyini təyin edir. Mümkün dəyərlər:

• _self (standart): eyni pəncərədə və ya tabda
• _blank: yeni bir pəncərə və ya tabda
• _parent: valideyn frame-də
• _top: ən üst frame-də (əgər framelərdən istifadə edilirsə)

target atributunun istifadəsinə nümunə:

    
      <form action="/submit" method="post" target="_blank">
        <!-- form elementləri -->
      </form>
    
  

novalidate atributu

novalidate atributu brauzer daxilində olan forma doğrulamasını deaktiv edir.

novalidate atributunun istifadəsinə nümunə:

    
      <form action="/submit" method="post" novalidate>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Göndər</button>
      </form>
    
  

1.4 Məlumatları göndərmək üsulları

Formadakı məlumatların göndərilməsi göndərmə düyməsindən istifadə etməklə həyata keçirilir: <input type="submit"> ya da <button type="submit">. İstifadəçi bu düyməni basdıqda, brauzer göstərilən üsul və URL istifadə edərək formanı serverə göndərir.

Məlumat göndərmək üçün əsas yollar bunlardır:

1. Göndərmə düyməsi: bu, formanı göndərmək üçün ən çox yayılmış üsuldur. Göndərmə düyməsi <input> və ya <button> elementi ilə yaradıla bilər.

<input> ilə nümunə:

    
      <input type="submit" value="Submit">
    
  

<button> ilə nümunə:

    
      <button type="submit">Submit</button>
    
  

2. Enter düyməsi: formanın mətn sahələrində Enter düyməsinə basmaq formanı göndərmək üçün istifadə edilə bilər.

3. JavaScript: Formanı proqram vasitəsilə göndərmək üçün JavaScript istifadə edilə bilər. Bu, məlumatları göndərməzdən əvvəl əlavə yoxlamalar və digər addımlar yerinə yetirildikdə faydalıdır.

Məsələn, JavaScript istifadə edərək formanı necə göndərmək olar:

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Istifadəçi adı:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Şifrə:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <button id="submit" type="submit">Submit</button>
      </form>
      <script>
        const userName = document.getElementById("username");
        const password = document.getElementById("password");
        const submit = document.getElementById("submit");

        submit.addEventListener("click", (e) => {
          if (userName.validity.valid && password.validity.valid) {
            e.preventDefault();
            alert("Avtorizasiya uğurla keçdi!\n" + "\n" + `Xoş gəldiniz, ${userName.value}!`);
          }
        });
      </script>
    
  

    
      <form id="myForm" action="/submit" method="post">
        <label for="username">Istifadəçi adı:</label>
        <input type="text" id="username" name="username">
        <br>
        <label for="password">Şifrə:</label>
        <input type="password" id="password" name="password">
        <br>
        <button type="button" onclick="submitForm()">Submit</button>
      </form>
    
  

    
      function submitForm() {
        document.getElementById('myForm').submit();
      }