Müxtəlif tiplərdə form elementləri

7.1 Mətn sahəsi

HTML form elementlərinin istifadəçilərə mətn, e-poçt, tarix və buna bənzər müxtəlif formatlarda məlumat daxil etməyə imkan verən bir çox giriş növü təqdim edir. Gəlin müxtəlif giriş növlərini və onların istifadə qaydalarını daha ətraflı nəzərdən keçirək.

<input type="text"> elementi bir sətirlik mətn daxil etmək üçün istifadə olunur. Bu ən əsas və ən çox istifadə olunan giriş növüdür.

İstifadə nümunəsi:

    
      <label for="name">Ad:</label>
      <input type="text" id="name" name="name">
    
  

Atributlar

• maxlength: simvolların maksimum miqdarını məhdudlaşdırır
• placeholder: istifadəçi məlumat daxil etməyə başlamamışdan əvvəl giriş sahəsində görünən doldurucu mətn
• required: sahənin doldurulmasının məcburi olduğunu göstərir

Atributlarla nümunə:

    
      <label for="username">İstifadəçi adı:</label>
      <input type="text" id="username" name="username" maxlength="20" placeholder="İstifadəçi adını daxil edin" required>
    
  

7.2 Rəqəm sahələri

<input type="number"> elementi rəqəm daxil etmək üçün istifadə olunur. Bu, yalnız rəqəmlərin daxil edilməsinə icazə verir və dəyəri artırmaq və ya azaltmaq üçün oxlar da daxil edə bilər.

İstifadə nümunəsi:

    
      <label for="quantity">Miqdar:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
    
  

Atributlar

• min: minimal icazəli dəyəri təyin edir
• max: maksimal icazəli dəyəri təyin edir
• step: dəyər dəyişiklik addımını müəyyən edir
• value: başlanğıc dəyəri təyin edir

7.3 Email üçün sahələr

<input type="email"> elementi email ünvanlarını daxil etmək üçün nəzərdə tutulur. Bu, daxil olan mətnin email ünvan formatına uyğun olub-olmadığını yoxlayır.

İstifadə nümunəsi:

    
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" placeholder="example@example.com">
    
  

Attribütlər

• multiple: vergüllə ayrılaraq bir neçə email ünvanı daxil etməyə imkan verir
• pattern: daxil edilmiş məlumatları əlavə yoxlamaq üçün regular expression təyin edir

Attribütlərlə nümunə:

    
      <label for="emails">Email ünvanlar (vergüllə ayrılmış):</label>
      <input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
    
  

7.4 Telefon nömrəsi üçün sahələr

<input type="tel"> elementi telefon nömrələrinin daxil edilməsi üçün istifadə olunur. Bu, nömrənin formatını yoxlamır, amma pattern atributu vasitəsilə daxil etmə maskasını qurmaq olar.

İstifadə nümunəsi:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
    
  

Atributlar

pattern: daxil edilmiş nömrənin formatını yoxlamaq üçün regular expression təyin edir.

Atributlarla nümunə:

    
      <label for="phone">Telefon:</label>
      <input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
    
  

7.5 Tarix üçün sahələr

<input type="date"> elementi tarix daxil etmək üçün istifadə olunur. Dəstəkləyən brauzerlərdə tarixi rahat seçmək üçün təqvim widgetı görünür.

İstifadə nümunəsi:

    
      <label for="birthday">Doğum tarixi:</label>
      <input type="date" id="birthday" name="birthday">
    
  

Atributlar

• min: minimal icazə verilən tarixi müəyyən edir
• max: maksimal icazə verilən tarixi müəyyən edir

Atributlarla nümunə:

    
      <label for="appointment">Görüş tarixi:</label>
      <input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
    
  

7.6 Vaxt daxil etmə sahələri

<input type="time"> elementi vaxt daxil etmək üçün istifadə olunur. Dəstəkləyən brauzerlərdə vaxt seçmə widgetı görünür.

İstifadə nümunəsi:

    
      <label for="meeting_time">Görüş vaxtı:</label>
      <input type="time" id="meeting_time" name="meeting_time">
    
  

Atributlar

• min: minimal icazə verilən vaxtı təyin edir
• max: maksimal icazə verilən vaxtı təyin edir
• step: vaxt dəyişmə addımını müəyyən edir

Atributlarla nümunə:

    
      <label for="alarm">Zəngli saat:</label>
      <input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
    
  

7.7 URL daxil etmək üçün sahələr

<input type="url"> elementi veb-ünvanlar (URL) daxil etmək üçün istifadə olunur. O, daxil edilmiş mətnin URL formatına uyğun olub-olmadığını yoxlayır.

İstifadə nümunəsi:

    
      <label for="website">Veb-sayt:</label>
      <input type="url" id="website" name="website" placeholder="https://example.com">
    
  

Atributlar

pattern: daxil edilmiş məlumatları əlavə olaraq yoxlamaq üçün müntəzəm ifadəni təyin edir.

Atributlarla nümunə:

    
      <label for="personal_website">Şəxsi veb-sayt:</label>
      <input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
    
  

7.8 Şifrələrin daxil edilməsi üçün sahələr

<input type="password"> elementi şifrələrin daxil edilməsi üçün istifadə olunur. Daxil edilmiş məlumatlar gizlədilir, simvollarla (məsələn, ulduzlar və ya nöqtələrlə) əvəz olunur.

İstifadə nümunəsi:

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

Atributlar

• maxlength: maksimum simvol sayını məhdudlaşdırır
• placeholder: doldurma mətn
• required: sahənin doldurulmasının məcburi olduğunu göstərir

Atributlarla nümunə:

    
      <label for="new-password">Yeni şifrə:</label>
      <input type="password" id="new_password" name="new_password" maxlength="20" placeholder="Şifrəni daxil edin" required>
    
  

7.9 Məlumat diapazonu üçün sahələr

<input type="range"> elementi müəyyən diapazondakı dəyərləri daxil etmək üçün istifadə olunur. Bu, sürüşdürmə çubuğu kimi görünür.

İstifadə nümunəsi:

    
      <label for="volume">Səs həcmi:</label>
      <input type="range" id="volume" name="volume">
    
  

Atributlar

• min: minimum qəbul edilən dəyəri təyin edir
• max: maksimum qəbul edilən dəyəri təyin edir
• step: dəyərin dəyişmə addımını təyin edir
• value: başlanğıc dəyəri təyin edir

Atributlarla nümunə:

    
      <label for="brightness">Parlaqlıq:</label>
      <input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
    
  

7.10 Rəng seçimi üçün sahələr

<input type="color"> elementi rəng seçimi üçün istifadə olunur. Dəstək göstərən browserlərdə rəng seçimi widget-ı görünəcək.

İstifadə nümunəsi:

    
      <label for="favcolor">Sevdiyiniz rəngi seçin:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
    
  

Atributlar

• value: başlanğıc rəng təyin edir.

7.11 Axtarış sahələri

<input type="search"> elementi axtarış sorğularını daxil etmək üçün istifadə olunur. Əksər browser-lərdə bu element daxili stil və mətni təmizləmək üçün funksionallıq ilə təmin olunur.

İstifadə nümunəsi:

    
      <label for="search">Axtarış:</label>
      <input type="search" id="search" name="search" placeholder="Axtarış sorğusunu daxil edin">