Çoxsaylı seçim və siyahılar

5.1 <select> elementi

<select>, <option> və <optgroup> elementləri HTML formalarında açılan siyahılar və çoxlu seçimli siyahılar yaratmaq üçün istifadə olunur. Bu elementlər sayəsində istifadəçilər əvvəlcədən müəyyən edilmiş dəyərlər dəstindən bir və ya bir neçə variant seçə bilirlər.

<select> elementi açılan siyahı yaratmaq üçün istifadə olunur. O, seçmək üçün mümkün variantları təmsil edən bir və ya bir neçə <option> elementini ehtiva edir.

İstifadə nümunəsi:

    
      <label for="country">Bir ölkə seçin:</label>
      <select id="country" name="country">
        <option value="us">Amerika Birləşmiş Ştatları</option>
        <option value="ca">Kanada</option>
        <option value="mx">Meksika</option>
      </select>
    
  

<select> üçün əsas atributlar

name atributu: forma elementinin adını təyin edir və seçilmiş dəyər ilə birlikdə serverə göndərilir.

    
      <select name="country"></select>
    
  

id atributu: unikal element identifikatorunu təyin edir, bu da <label> elementi ilə əlaqələndirmək üçün istifadə olunur.

    
      <select id="country" name="country"></select>
    
  

multiple atributu: istifadəçiyə eyni zamanda bir neçə variant seçməyə imkan verir. Xaricdən siyahı çoxsətirli olaraq görünəcək.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Alma</option>
        <option value="banana">Banan</option>
        <option value="cherry">Albalı</option>
      </select>
    
  

size atributu: açılan siyahıda görünən sətir sayını təyin edir. Bu, sürüşdürmə siyahıları yaratmaq üçün faydalıdır.

    
      <select name="cities" size="4">
        <option value="ny">Nyu York</option>
        <option value="la">Los Anceles</option>
        <option value="chicago">Hüston</option>
      </select>
    
  

5.2 <option> elementi

<option> elementi <select> daxilində istifadə olunur və istifadəçi tərəfindən seçilə biləcək hər bir seçimi təyin edir.

İstifadə nümunəsi:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

<option> üçün əsas atributlar:

value atributu: bu atribut seçilmiş halda serverə göndəriləcək dəyəri təyin edir.

    
      <option value="red">Red</option>
    
  

selected atributu: bu atribut müəyyən edir ki, həmin seçim default olaraq seçilmiş olsun.

    
      <option value="green" selected>Green</option>
    
  

disabled atributu: bu atribut həmin seçimin seçilə bilməməsi üçün istifadə olunur.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 <optgroup> elementi

<optgroup> elementi <select> elementinin daxilində əlaqəli seçimləri qruplaşdırmaq üçün istifadə olunur. Bu, seçimləri kateqoriyalara məntiqli şəkildə bölməyə imkan verir, beləliklə, açılan siyahı daha səliqəli və başa düşülən olur.

İstifadə nümunəsi:

    
      <select name="car">
        <optgroup label="Alman Maşınları">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Yapon Maşınları">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

<optgroup> əsas atributları:

label atributu: seçimlər qrupu üçün başlıq təyin edir.

    
      <optgroup label="Alman Maşınları"></optgroup>
    
  

disabled atributu: bu qrupdakı bütün seçimləri seçilmək üçün əlçatmaz edir.

    
      <select name="car">
        <optgroup label="Alman Maşınları">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Yapon Maşınları" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

<select>, <option> və <optgroup> istifadə üçün faydalı məsləhətlər

1. Məntiqi qruplaşdırma: əlaqəli seçimləri məntiqli qruplaşdırmaq üçün <optgroup> istifadə edin: bu, formu istifadəçilər üçün daha rahat edəcək.
2. Çoxlu seçim: istifadəçiyə bir neçə seçim etməyə icazə vermək lazım olduqda, <select> atributunun multiple atributundan istifadə edin.
3. Əlçatanlıq: form elementlərinin əlçatanlığını yaxşılaşdırmaq üçün id və label atributlarından istifadə edin. label atributunun düzgün istifadəsi form ilə qarşılıqlı əlaqəni, o cümlədən yardımçı texnologiyalardan istifadə edənlər üçün yaxşılaşdırır.
4. Stilizasiya: açılan siyahılar və çoxlu seçim siyahılarının görünüşünü yaxşılaşdırmaq üçün CSS istifadə edin. Məsələn:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }