Obsługa list rozwijanych HTML w PHP

W formularzach internetowych często można spotkać listy rozwijane, które pozwalają na wybór jednej lub kilku opcji z określonego zestawu. Są one bardzo praktyczne i lubiane przez użytkowników, dlatego warto nauczyć się prawidłowo implementować ich obsługę w PHP. W tym rozdziale nauczysz się obsługiwać listy rozwijane oparte na elementach HTML select i option w skryptach PHP.

W tym rozdziale poznasz odpowiedzi między innymi na następujące pytania:

Jak tworzyć listy rozwijane w formularzach internetowych?
Jak w PHP obsługiwać listy rozwijane pozwalające na wybór jednej opcji?
Jak w PHP obsługiwać listy rozwijane pozwalające na wybór kilku opcji?

Zaczniemy od podstaw, czyli od przypomnienia sobie wiadomości o elementach HTML, które służą do tworzenia list rozwijanych.

Listy rozwijane w PHP — krótkie wprowadzenie

Dwa podstawowe elementy HTML służące do tworzenia list rozwijanych w formularzach internetowych to select i option. Ze względów estetycznych można jeszcze dorzucić do nich element optgroup, ale z punktu widzenia skryptów PHP jest on nieistotny, więc nie będziemy się nim tu zajmować (jego opis znajduje się na stronie Element HTML optgroup).

Element select jest kontenerem listy rozwijanej, w której może znajdować się dowolna liczba opcji reprezentowanych przez elementy option. Na przykład:


<form action="skrypt.php" method="post">
  <label for="szkodnik">Co ci dokucza?</label>
  <select name="szkodnik" id="szkodnik">
    <option>Złodziejaszek rypidełko</option>
    <option>Psotnik zakamarnik</option>
    <option>Rozciągnik mchuś</option>
    <option>Turkuć podjadek</option>
  </select>
  <input type="submit" value="Wyślij">
</form>

Ten prosty formularz HTML zawiera listę rozwijaną z czterema pozycjami do wyboru. Z naszego punktu widzenia najważniejsze są atrybut name elementu select i atrybuty value elementów option.

Atrybut name elementu select służy do powiązania nazwy elementu z wartością lub wartościami przekazywanymi z niego do serwera.

Z kolei atrybut value elementu option reprezentuje wartość, która ma zostać przesłana do serwera w skojarzeniu z wartością (nazwą) z atrybutu name elementu select.

Atrybut value nie jest bezwzględnie konieczny, ponieważ w przypadku jego braku do serwera wysłany jest tekst stanowiący zawartość elementu option (znajdujący się między jego znacznikiem otwierającym i zamykającym).

A tak wygląda nasz przykładowy formularz w oknie przeglądarki:

php option, php select - przykładowy formularz — Przykładowa lista rozwijana HTML

Listy rozwijane HTML mają tę charakterystyczną cechę, że można tworzyć zarówno takie, w których da się wybrać tylko jedną opcję, jak i takie, w których da się wybrać kilka opcji.

Obsługa jednych i drugich w PHP jest bardzo podobna, ale dla ułatwienia przyjrzymy się im osobno. Zaczniemy od list rozwijanych pozwalających na wybór tylko jednej pozycji.

Obsługa list wyboru jednej opcji w PHP

W tej sekcji jako przykładem będziemy posługiwać się formularzem z początku tego rozdziału, ponieważ umożliwia on właśnie wybranie tylko jednej pozycji z listy.

Ten formularz wysyłamy metodą HTTP POST, więc aby odebrać przesłane z niego wartości na serwerze, musimy skorzystać z tablicy superglobalnej $_POST. Zanim jednak to zrobimy, dobrze jest zadbać o podstawowe kwestie bezpieczeństwa.

Najpierw więc sprawdzimy, czy w ogóle metodą POST została przesłana zmienna o interesującej nas nazwie (szkodnik):


if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['szkodnik'])) {

Warunek $_SERVER['REQUEST_METHOD'] === 'POST' sprawdza, czy strona została wyświetlona w wyniku żądania POST, a isset($_POST['szkodnik']) sprawdza, czy tablica $_POST zawiera element szkodnik (celowo dla uproszczenia pomijam sprawdzanie, czy element nie jest pusty).

Jeśli którykolwiek z tych warunków nie jest spełniony, kończymy wykonywanie skryptu.

Następnie zapisujemy wartość elementu szkodnik w zmiennej, zabezpieczając się jednocześnie przed ewentualnymi atakami typu XSS za pomocą funkcji PHP htmlspecialchars():


$szkodnik = htmlspecialchars($_POST['szkodnik']);

Kiedy już wszystko sprawdzimy i jest w porządku, to wyświetlamy użytkownikowi radosną informację:


echo '<i>' . $szkodnik . '</i> to cwana bestia. Pozostaje ci tylko się przeprowadzić.';

Jeśli na przykład ktoś wybierze z listy pozycję Psotnik zakamarnik, to pojawi się taki napis:

Psotnik zakamarnik to cwana bestia. Pozostaje ci tylko się przeprowadzić.

Poniżej przedstawiam opisywany skrypt w całości, wzbogacony o dodatkowe testy, dzięki którym jest bardziej profesjonalny:


if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['szkodnik'])) {
    $szkodnik = trim($_POST['szkodnik']);
    if ($szkodnik === '') {
      exit('Wybierz jakiegoś drania.');
    }
} else {
    exit('Nie bądź taki mądry. To nieprawidłowe żądanie.');
}

echo '<i>' . htmlspecialchars($szkodnik, ENT_QUOTES, 'UTF-8') . '</i> to cwana bestia. Pozostaje ci tylko się przeprowadzić.';

Jeśli coś w tym skrypcie jest niejasne, przeczytaj rozdziały Formularze PHP — obsługa formularzy PHP od podstaw i Obsługa elementów input i textarea w PHP.

A teraz pokażę ci, jak obsługiwać listy rozwijane pozwalające na wybór więcej niż jednej opcji.

Obsługa list wyboru kilku opcji

Aby obsłużyć w skrypcie PHP listę pozwalającą na wybór kilku opcji, w formularzu HTML należy wprowadzić dwie zmiany.

Po pierwsze należy nadać elementowi select atrybut multiple, co da użytkownikowi możliwość wybierania większej liczby pozycji.

Po drugie, do wartości atrybutu name elementu select należy dodać kwadratowy nawias, dzięki czemu wartości wszystkich wybranych opcji zostaną umieszczone na serwerze w tablicy.

Teraz kod HTML naszego formularza wygląda tak:


<form action="skrypt.php" method="post">
  <label for="szkodnik">Co ci dokucza?</label>
  <select name="szkodnik[]" id="szkodnik" multiple>
    <option>Złodziejaszek rypidełko</option>
    <option>Psotnik zakamarnik</option>
    <option>Rozciągnik mchuś</option>
    <option>Turkuć podjadek</option>
  </select>
  <input type="submit" value="Wyślij">
</form>

Listy umożliwiające wybór kilku pozycji wyglądają inaczej niż listy wyboru jednej opcji, spójrz:

php select, php option - lista wyboru kilku opcji — Lista umożliwiająca wybranie kilku opcji

Aby wybrać kilka pozycji na tej liście, należy nacisnąć klawisz Ctrl i zaznaczyć te, które nas interesują.

Teraz przechodzimy na serwer, czyli do obsługi tego formularza w PHP. Spójrz na poniższy skrypt.


if ($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (!empty($_GET['szkodniki']) && is_array($_GET['szkodniki'])) {
    $szkodniki = array_map('htmlspecialchars', $_GET['szkodniki']);

    foreach ($szkodniki as $szkodnik) {
      switch ($szkodnik) {
        case 'Złodziejaszek rypidełko':
          echo '<p><i>' . $szkodnik . '</i> da ci nieźle popalić. Nie ma dla ciebie ratunku.</p>';
          break;
        case 'Psotnik zakamarnik':
          echo '<p><i>' . $szkodnik . '</i> nie dość, że psoci, to na dodatek robi to w zakamarkach.</p>';
          break;
        case 'Rozciągnik mchuś':
          echo '<p><i>' . $szkodnik . '</i> jest wyjątkowo paskudny. Zemdlejesz na sam widok. Nie zazdroszczę.</p>';
          break;
        case 'Turkuć podjadek':
          echo '<p><i>' . $szkodnik . '</i> to cwana bestia. Pozostaje ci tylko się przeprowadzić albo umrzeć z głodu.</p>';
          break;
      }
    }
  }
  else {
    exit('Wybierz przynajmniej jednego drania.');
  }
}
else {
  exit('Nie bądź taki mądry. To nieprawidłowe żądanie.');
}

Najpierw sprawdzam, czy użytkownik wybrał jakiegokolwiek szkodnika (if (!empty($_GET['szkodniki']) && is_array($_GET['szkodniki'])) {). Jeśli tak, to znaczy, że mam tablicę, na której wykonuję różne operacje.

Jeśli nie, to wyświetlam upomnienie, aby użytkownik wybrał przynajmniej jednego drania.

Wszystkie użyte w tym skrypcie funkcje i techniki zostały już objaśnione we wcześniejszych rozdziałach, więc już się nad nimi tutaj nie rozwodzę. W razie potrzeby cofnij się do odpowiedniego rozdziału, aby przypomnieć sobie wiadomości.

Gdyby trafił się jakiś wyjątkowy nieszczęśnik, który wybrałby wszystkie pozycje z listy, to czekałby go następujący horror:


Złodziejaszek rypidełko da ci nieźle popalić. Nie ma dla ciebie ratunku.
Psotnik zakamarnik nie dość, że psoci, to na dodatek robi to w zakamarkach.
Rozciągnik mchuś jest wyjątkowo paskudny. Zemdlejesz na sam widok. Nie zazdroszczę.
Turkuć podjadek to cwana bestia. Pozostaje ci tylko się przeprowadzić albo umrzeć z głodu.

Podsumowanie

Do tworzenia list rozwijanych służą elementy HTML select i option.
Aby można było odebrać dane z takiej listy na serwerze, element select musi mieć atrybut name z poprawnie zdefiniowaną wartością.
Domyślnie z listy można wybrać tylko jedną pozycję.
Aby umożliwić wybranie kilku pozycji, należy elementowi select nadać atrybut multiple, a wartość atrybutu name zakończyć nawiasem kwadratowym, co pozwoli na odebranie wszystkich zaznaczonych przez użytkownika wartości na serwerze.
Wartości z listy select, jak wartości wszystkich innych pól formularza, są dostępne w tablicy superglobalnej $_GET lub $_POST, zależnie od metody HTTP użytej do przesłania formularza.

Pytania

Jak tworzy się listy rozwijane HTML?
Co musi mieć element select, aby można było odbierać wartości z listy rozwijanej na serwerze?
Co należy zrobić, aby umożliwić wybranie kilku pozycji z listy? Jak wtedy zmieni się ta lista?
Jak uzyskać dostęp do wartości z listy select w skrypcie PHP na serwerze?

Ćwiczenia

Dodaj do przykładowego formularza jeszcze kilka pozycji do wyboru i obsłuż je w PHP.
Zamień przykłady przedstawione w tym rozdziale na samoprzetwarzające się formularze PHP.

Input i textarea w PHP Kurs PHP Wysyłanie plików na serwer