HTML-də Formalar

1. Formalarla tanışlıq

HTML formaları — istifadəçilərin veb-səhifələrlə qarşılıqlı əlaqəsi üçün vacib bir alətdir. Onlar istifadəçilərdən məlumat toplamağa imkan verir, istər mətn, siyahıdan seçim, sənədlər və ya digər məlumatlar olsun, sonradan serverə emal üçün göndərilə bilər. HTML-də formalar bir çox element vasitəsilə yaradılır, hər biri müəyyən növ məlumat daxil etmək üçün nəzərdə tutulmuşdur. Formaların əsas elementi <form>-dur, bu da digər elementləri əhatə edir, məsələn, <input>, <textarea>, <button>, <select> və s.

Formalarda əsas elementlər

Formaların elementləri istifadəçi interfeysində məlumat daxil etmək üçün sahələr, düymələr, açılan siyahılar və digər elementləri yaratmağa imkan verir. Formalarda istifadə olunan əsas teqlər:

• <form> — formanın bütün elementləri üçün əsas konteyner. Məlumatların haraya və necə göndərildiyini müəyyən edir.
• <input> — mətn, parol, radio-düymələr, qeyd qutuları və s. kimi fərqli növ giriş sahələri yaratmaq üçün universal elementdir.
• <label> — giriş sahəsi ilə əlaqəli element, onun funksiyasını müəyyən etməyə imkan verir.
• <textarea> — çoxsətirli mətn daxil etmək üçün sahə.
• <button> — formanı göndərmək və ya digər əməliyyatları yerinə yetirmək üçün düymə.
• <select> və <option> — istifadəçinin bir və ya bir neçə variantı seçə biləcəyi açılan siyahı.

Sadə bir formanı nümunə

      
    <form action="/submit" method="post">
      <label for="name">Ad:</label>
      <input type="text" id="name" name="name">
      
      <label for="email">Elektron poçt:</label>
      <input type="email" id="email" name="email">
      
      <button type="submit">Göndər</button>
    </form>
    

          
<form action="/submit" method="post">
  <label for="name">Ad:</label>
  <input type="text" id="name" name="name">
  
  <label for="email">Elektron poçt:</label>
  <input type="email" id="email" name="email">
  
  <button type="submit">Göndər</button>
</form>

• action <form>-da formanın göndərildiyi URL-ni müəyyən edir.
• method məlumat göndərmə üsulunu göstərir: post və ya get.

HTML <input>

<input> tagı HTML-dəki formanın ən universal elementlərindən biridir. O, müxtəlif giriş növlərini dəstəkləyir və hər biri müəyyən məlumat növü üçün uyğundur.

<input> tagının sintaksisi:

<input type="növ" name="sahə_adı" id="identifikator" value="dəyər">

<input type="növ" name="sahə_adı" id="identifikator" value="dəyər">

<input>-də istifadə olunan atributlar:

• type — giriş növü (məsələn, text, password, email və s.).
• name — sahənin adı, serverdə məlumatları identifikasiya etmək üçün istifadə olunur.
• id — unikal identifikator, <label> ilə əlaqə üçün istifadə olunur.
• value — sahədə öndədən göstərilən dəyər (məsələn, standart text).

<input>-in əsas növləri

• Text sahəsi type="text" — kiçik miqdarda mətn daxil etmək üçün istifadə olunur, məsələn, ad və ya soyad.
  HTML

        
          <label for="username">İstifadəçi adı:</label>
          <input type="text" id="username" name="username">
        
      

  HTML

        
          <label for="username">İstifadəçi adı:</label>
          <input type="text" id="username" name="username">
        
      
• Şifrə type="password" — şifrə daxil etmək üçün istifadə olunur. Daxil olunan simvollar nöqtələrlə və ya ulduzlarla göstərilir.
  HTML

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

  HTML

        
          <label for="password">Şifrə:</label>
  <input type="password" id="password" name="password">
        
      
• Email type="email" — email ünvanı daxil etmək üçün istifadə olunur. Bu sahə formatın düzgünlüyünü yoxlayır.
  HTML

        
          <label for="email">Elektron poçt:</label>
  <input type="email" id="email" name="email">
        
      

  HTML

        
          <label for="email">Elektron poçt:</label>
  <input type="email" id="email" name="email">
        
      
• Nömrə type="number" — ədədi dəyərləri daxil etmək üçün istifadə olunur. Bu sahəyə yalnız rəqəmlər yazmaq olar.
  HTML

        
          <label for="age">Yaş:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      

  HTML

        
          <label for="age">Yaş:</label>
  <input type="number" id="age" name="age" min="1" max="100">
        
      
• Göndərmə düyməsi type="submit" — formadakı məlumatları serverə göndərir. Bu düymə adətən formanı bitirir.
  HTML

        
          <input type="submit" value="Göndər">
        
      

  HTML

        
          <input type="submit" value="Göndər">
        
      

<input>-in digər faydalı atributları

• placeholder — sahədə mətn-qeyd göstərir, istifadəçi mətn daxil etməyə başlayanda bu qeyd yox olur.
  HTML

        
          <input type="text" placeholder="Adınızı daxil edin">
  

• required — sahənin doldurulmasını məcburi edir. İstifadəçi bu sahəni doldurmadan formanı göndərməyə çalışsa, brauzer xəbərdarlıq mesajı göstərəcək.
  HTML

            
              <input type="email" name="email" required>
      

• min və max — type="number", type="date", və digər ədədi və ya vaxt tipləri üçün minimum və maksimum dəyər təyin edir.
  HTML

        
          <input type="number" name="age" min="18" max="65">
  

• maxlength — mətn sahəsinə yazıla biləcək simvolların sayını məhdudlaşdırır.
  HTML

        
          <input type="text" name="username" maxlength="20">
  

3. Formanın nümunəsi

Bütün müzakirə olunan elementləri və atributları bir formada toplayaq:

      <!DOCTYPE html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <title>Qeydiyyat forması</title>
</head>
<body>
  <form action="/submit" method="post">
    <label for="name">Ad:</label>
    <input type="text" id="name" name="name" placeholder="Adınızı daxil edin" required>

    <label for="email">Elektron poçt:</label>
    <input type="email" id="email" name="email" placeholder="Emaili daxil edin" required>

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

    <label>Cins:</label>
    <label><input type="radio" name="gender" value="male"> Kişi</label>
    <label><input type="radio" name="gender" value="female"> Qadın</label>

    <label for="subscribe">Xəbərlərə abunə olun</label>
    <input type="checkbox" id="subscribe" name="subscribe">

    <button type="submit">Qeydiyyatdan keç</button>
  </form>
</body>
</html>

      <!DOCTYPE html>
    <html lang="az">
    <head>
      <meta charset="UTF-8">
      <title>Qeydiyyat forması</title>
    </head>
    <body>
      <form action="/submit" method="post">
        <label for="name">Ad:</label>
        <input type="text" id="name" name="name" placeholder="Adınızı daxil edin" required>
    
        <label for="email">Elektron poçt:</label>
        <input type="email" id="email" name="email" placeholder="Emaili daxil edin" required>
    
        <label for="password">Şifrə:</label>
        <input type="password" id="password" name="password" required>
    
        <label>Cins:</label>
        <label><input type="radio" name="gender" value="male"> Kişi</label>
        <label><input type="radio" name="gender" value="female"> Qadın</label>
    
        <label for="subscribe">Xəbərlərə abunə olun</label>
        <input type="checkbox" id="subscribe" name="subscribe">
    
        <button type="submit">Qeydiyyatdan keç</button>
      </form>
    </body>
    </html>