# Formularz HTML - elementy HTML budujące grupę opcji wyboru

Gdy chcemy dodać do formularza HTML jedną grupę opcji wyboru, z których użytkownik odwiedzający nasz dokument HTML może wybrać jedną interesującą go opcję, wtedy możemy skorzystać z elementu select oraz elementów option (o czym była już mowa wcześniej).

Przykład:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Wybierz jedną roślinę:
      <select name="roslina">
        <option>truskawka</option>
        <option>jabłko</option>
        <option>kiwi</option>
        <option>arbuz</option>
        <option>róża</option>
        <option>tulipan</option>
        <option>marchew</option>
        <option>brokuły</option>
      </select>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FAjwMtEmCX2fwy2dZGFVU%2Fimage.png?alt=media&#x26;token=1700155a-48aa-4db2-b629-e22ef990aa14" alt=""><figcaption></figcaption></figure>

Gdy chcemy zmienić domyślnie wybraną opcję w grupie opcji wyboru, wtedy możemy skorzystać z atrybutu logicznego `selected` (o czym była już mowa wcześniej).

Przykład:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Wybierz jedną roślinę:
      <select name="roslina">
        <option>truskawka</option>
        <option>jabłko</option>
        <option>kiwi</option>
        <option>arbuz</option>
        <option selected>róża</option>
        <option>tulipan</option>
        <option>marchew</option>
        <option>brokuły</option>
      </select>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FnyrM5KcA4fTNaKDYKEVG%2Fimage.png?alt=media&#x26;token=8d8496a6-6f30-4631-9240-c760c758b775" alt=""><figcaption></figcaption></figure>

Gdy chcemy, aby użytkownik odwiedzający nasz dokument HTML mógł wybrać więcej niż jedną opcję z grupy opcji wyboru, wtedy możemy skorzystać z atrybutu logicznego `multiple` (o czym była już mowa wcześniej).

Ponadto, aby zasób internetowy, do którego zostaną przekazane dane naszego przykładowego formularza HTML mógł obsłużyć daną, która reprezentowana była przez element `select`, z którego użytkownik odwiedzający nasz dokument HTML mógł wybrać więcej niż jedną opcję, do nazwy wspomnianej danej należy dodać ciąg znaków `[]` (o czym była już mowa wcześniej).

Przykład:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Wybierz interesujące Cię rośliny:
      <select name="rosliny[]" multiple>
        <option>truskawka</option>
        <option>jabłko</option>
        <option>kiwi</option>
        <option>arbuz</option>
        <option selected>róża</option>
        <option>tulipan</option>
        <option>marchew</option>
        <option>brokuły</option>
      </select>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2F3uYIIj9gB51z482ijt9T%2Fimage.png?alt=media&#x26;token=13f2b69d-9708-4ca3-8797-a8c9b8072b99" alt=""><figcaption></figcaption></figure>

Jeżeli wartość posiadana przez daną, która reprezentowana jest przez element `select` ma różnić się od ciągu znaków, który został umieszczony w zawartości elementu `option`, który może zostać wybrany przez użytkownika odwiedzającego nasz dokument HTML, wtedy możemy skorzystać z atrybutu `value`.

Przykład:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Wybierz interesujące Cię rośliny:
      <select name="rosliny[]" multiple>
        <option value="opcja-1">truskawka</option>
        <option value="opcja-2">jabłko</option>
        <option value="opcja-3">kiwi</option>
        <option value="opcja-4">arbuz</option>
        <option value="opcja-5" selected>róża</option>
        <option value="opcja-6">tulipan</option>
        <option value="opcja-7">marchew</option>
        <option value="opcja-8">brokuły</option>
      </select>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FeYTY4CSgegBDD4LuRcOd%2Fimage.png?alt=media&#x26;token=ae1855d7-e4f3-43eb-843f-fc6655a6239e" alt=""><figcaption></figcaption></figure>

Gdy chcielibyśmy podzielić naszą przykładową grupę opcji wyboru na mniejsze grupy, wtedy możemy skorzystać z elementu optgroup nie zapominając przy tym o dodaniu do każdego elementu `optgroup` atrybutu `label` wraz z wartością, która określi etykietę w formie nagłówka dla grupy opcji wyboru reprezentowanej przez dany element `optgroup`.

Przykład:

```html
<form action="./php/submit-result.php">
  <p>
    <label>
      Wybierz interesujące Cię rośliny:
      <select name="rosliny[]" multiple>
        <optgroup label="owoce">
          <option value="opcja-1">truskawka</option>
          <option value="opcja-2">jabłko</option>
          <option value="opcja-3">kiwi</option>
          <option value="opcja-4">arbuz</option>
        </optgroup>

        <optgroup label="kwiaty">
          <option value="opcja-5" selected>róża</option>
          <option value="opcja-6">tulipan</option>
        </optgroup>

        <optgroup label="warzywa">
          <option value="opcja-7">marchew</option>
          <option value="opcja-8">brokuły</option>
        </optgroup>
      </select>
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FaT3VbuaWOX3XSu2pxoc5%2Fimage.png?alt=media&#x26;token=b87057e1-28af-4a4c-8917-96f3b85bb49e" alt=""><figcaption></figcaption></figure>
