Formaların əsas elementləri

2.1 Element <input>

Formalar veb-səhifələrin vacib komponentləridir və istifadəçilərə məlumat daxil etmək və göndərmək imkanı verir. Formanın əsas elementləri <input>, <textarea> və <button>-dur. Bu elementlər istifadəçilərə mətn daxil etmək, seçim etmək, fayl yükləmək və digər əməliyyatları yerinə yetirmək imkanı verir.

<input> elementi formaların ən çox istifadə olunan elementlərindən biridir. O, bir çox məlumat növləri ilə işləyə bilir və mətn daxil edilməsi, faylların seçilməsi, tarix göstərilməsi və s. kimi müxtəlif məqsədlər üçün istifadə oluna bilər.

Ümumi sintaksis:

    
      <input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
    
  

<input> atributları

• type: məlumatın növünü müəyyən edir
• name: forma elementinin adı, serverdə məlumatların identifikasiyası üçün istifadə olunur
• id: elementin unikal identifikatoru
• value: elementin ilkin dəyəri
• placeholder: verilənlər daxil edilməmişdən əvvəl element daxilində göstərilən mətn
• required: elementin doldurulmasının məcburi olduğunu göstərir

<input> nümunəsi

input-text bir sətirlik mətn daxil etməyə imkan verir.

    
      <input type="text" name="username" id="username" placeholder="İstifadəçi adını daxil edin" required>
    
  

2.2 <textarea> elementi

<textarea> elementi çoxsətirli mətn daxil etmək üçün istifadə olunur. Bu element <input type="text"> elementindən fərqli olaraq, istifadəçiyə bir neçə sətir mətn daxil etmək imkanı verir və ölçüsü də tənzimlənə bilər.

Ümumi sintaksis:

    
      <textarea name="name"
        id="id"
        rows="rows" cols="cols"
        placeholder="placeholder" required>
      </textarea>
    
  

<textarea> atributları

• name: forma elementinin adı, serverdə məlumatları tanımaq üçün istifadə olunur
• id: elementin unikallığını təmin edən identifikator
• rows: mətnin daxil ediləcəyi sətirlərin sayı
• cols: bir sətirdəki simvolların sayı
• placeholder: istifadəçi məlumat daxil etməmişdən əvvəl göstərilən mətn
• required: bu atribut elementi doldurmaq məcburidir deməkdir

İstifadə nümunəsi:

    
      <label for="comments">Şərhlər:</label>
      <textarea name="comments"
        id="comments"
        rows="5"
        cols="40"
        placeholder="Şərhlərinizi bura daxil edin..."
        required>
      </textarea>
    
  

<textarea> stilizasiyası

<textarea> elementi CSS ilə stilizə edilə bilər ki, bu da görünüşü və istifadəçi təcrübəsini yaxşılaşdırar.

Stilizasiya nümunəsi:

    
      textarea {
        width: 75%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        resize: vertical; /* resize yalnız şaquli istiqamətə məhdudlaşacaq */
      }
    
  

    
      <label for="comments">Şərhlər:</label>
      <textarea name="comments"
        id="comments"
        rows="5" placeholder="Şərhlərinizi bura daxil edin..." required>
      </textarea>
    
  

2.3 <button> elementi

<button> elementi formaların daxilində düymələr yaratmaq üçün istifadə olunur. <input type="button"> elementindən fərqli olaraq, <button> elementi daha çevikdir və düymələrin daxilinə müxtəlif HTML elementləri, məsələn, mətn, şəkillər və s. yerləşdirməyə imkan verir.

Ümumi sintaksis:

    
      <button type="type" name="name" id="id" value="value">Düymənin mətni</button>
    
  

Nümunə istifadə:

    
      <button type="submit">Göndər</button>
      <button type="reset">Sıfırla</button>
      <button type="button" onclick="alert('Düymə sıxıldı!')">Məni sıx</button>
    
  

<button> atributları

1. type: düymənin davranışını müəyyən edir. Mümkün dəyərlər:
   • submit: formu göndərir (standart dəyər)
   • reset: formu sıfırlayır
   • button: xüsusi düymədir, standart hərəkətlər etməz
2. name: forma elementinin adı, serverdə məlumatların identifikasiyası üçün istifadə olunur.
3. id: elementin unikal identifikatoru.
4. value: form göndərilərkən serverə göndərilən dəyər.

<button>-in daxilindəki HTML

<button> elementi daha kompleks düymələr yaratmaq üçün onun daxilinə müxtəlif HTML elementləri yerləşdirməyə imkan verir.

HTML ilə nümunə:

    
      <button type="type" name="name" id="id" value="value">
        📨Göndər
      </button>
    
  

    
      <button type="type" name="name" id="id" value="value">
        <img src="submit_icon.png" alt="Göndər">
        Göndər
      </button>
    
  

<button>-in stilizasiyası

<button> elementi CSS vasitəsilə istifadəçi təcrübəsini yaxşılaşdırmaq və görkəmini dəyişmək üçün stilizə oluna bilər.

Stilizasiya nümunəsi:

    
      button {
        background-color: #4CAF50; /* Yaşıl fon */
        color: white; /* Ağ mətn */
        padding: 15px 20px; /* Daxili boşluq */
        border: none; /* Kənarsız */
        border-radius: 4px; /* Yuvarlaq bucaqlar */
        cursor: pointer; /* Göstərici kursor */
      }

      button:hover {
        background-color: #45a049; /* Üzərinə gəldikdə tünd yaşıl fon */
      }
    
  

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