Wielokrotne wybory i listy

5.1 Element <select>

Elementy <select>, <option> i <optgroup> używane są do tworzenia rozwijanych list i list z wielokrotnym wyborem w formularzach HTML. Dzięki tym elementom użytkownicy mogą wybierać jedną lub kilka opcji z wcześniej zdefiniowanego zestawu wartości.

Element <select> jest używany do tworzenia rozwijanej listy. Zawiera jeden lub więcej elementów <option>, które reprezentują możliwe opcje do wyboru.

Przykład użycia:

    
      <label for="country">Choose a country:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Główne atrybuty <select>

Atrybut name: ustawia nazwę elementu formularza, która zostanie wysłana na serwer wraz z wybraną wartością.

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

Atrybut id: ustawia unikalny identyfikator elementu, który jest używany do powiązania z elementem <label>.

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

Atrybut multiple: pozwala użytkownikowi wybierać kilka opcji jednocześnie. Wizualnie lista będzie wyświetlana jako wieloliniowa.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Atrybut size: ustawia liczbę widocznych wierszy w rozwijanej liście. To przydatne dla tworzenia list z przewijaniem.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Element <option>

Element <option> jest używany wewnątrz <select> do zdefiniowania każdej opcji, którą użytkownik może wybrać.

Przykład użycia:

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

Główne atrybuty <option>:

Atrybut value: ustawia wartość, która zostanie wysłana na serwer, jeśli ta opcja jest wybrana.

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

Atrybut selected: określa, czy ta opcja ma być domyślnie wybrana.

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

Atrybut disabled: sprawia, że ta opcja jest niedostępna do wyboru.

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

5.3 Element <optgroup>

Element <optgroup> służy do grupowania powiązanych opcji w elemencie <select>. Pozwala logicznie podzielić opcje na kategorie, co sprawia, że rozwijana lista jest bardziej zorganizowana i zrozumiała.

Przykład użycia:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Główne atrybuty <optgroup>:

Atrybut label: ustawia nagłówek grupy opcji.

    
      <optgroup label="German Cars"></optgroup>
    
  

Atrybut disabled: sprawia, że wszystkie opcje w tej grupie są niedostępne do wyboru.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Przydatne wskazówki dotyczące użycia <select>, <option> i <optgroup>

1. Grupowanie logiczne: używaj <optgroup> do logicznego grupowania powiązanych opcji: to sprawia, że formularz jest bardziej przyjazny dla użytkownika.
2. Wielokrotny wybór: jeśli chcesz umożliwić użytkownikowi wybór wielu opcji, użyj atrybutu multiple w <select>.
3. Dostępność: używaj atrybutów id i label do poprawy dostępności elementów formularza. Prawidłowe użycie label poprawia interakcję z formularzem dla wszystkich użytkowników, w tym osób korzystających z technologii pomocniczych.
4. Stylizacja: używaj CSS, aby poprawić wygląd rozwijanych list i list z wielokrotnym wyborem. Na przykład:

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