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:

<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:

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:

<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:

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:

<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:

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:

<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:

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:

<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: