Formularze PHP — obsługa formularzy PHP od podstaw

Formularze internetowe mają wiele zastosowań. Używa się ich do składania zamówień w sklepach internetowych, do kontaktu z właścicielami stron, do logowania w portalach społecznościowych, a nawet do rozmawiania ze sztuczną inteligencją. Czy wiesz, jak stworzyć własny formularz PHP? Jeśli nie, to jesteś we właściwym miejscu. Na tej stronie w prosty i przystępny sposób objaśniłem krok po kroku, jak to zrobić.

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

• Dlaczego HTTP rządzi internetem?
• Czym są metody HTTP?
• Jak używać elementu HTML form z PHP?
• Gdzie szukać danych z formularzy w skryptach PHP na serwerze?
• Kiedy używać metod HTTP GET i POST?

Zaczniemy od zwięzłego wprowadzenia do protokołu HTTP.

HTTP rządzi internetem

Akronim HTTP pochodzi od angielskich słów Hypertext Transfer Protocol, które oznaczają Protokół przesyłania hipertekstu. Hipertekst to treść w formacie html, czyli krótko mówiąc kod HTML stron internetowych.

Dlaczego więc HTTP rządzi internetem? Bo to właśnie za pośrednictwem tego protokołu, a raczej w tych czasach już jego bezpieczniejszej wersji HTTPS, odbywa się wszelka komunikacja między przeglądarkami użytkowników, a serwerami, na których są przechowywane strony internetowe.

Podstawy protokołu HTTP opisałem w Kursie HTML i CSS dla początkujących w sekcji Protokół HTTP, więc nie będę się tutaj powtarzał, tylko od razu przejdę do konkretów. Jeśli masz braki wiedzy w tym temacie, to możesz je tam uzupełnić.

Budowa formularza PHP — główny kontener

Każdy formularz internetowy jest zbudowany w podobny sposób — znajduje się w elemencie HTML form i zawiera zestaw elementów HTML reprezentujących różne pola formularza, takie jak pola tekstowe, listy rozwijane, czy przyciski radiowe.

Każdy z tych elementów ma specjalne atrybuty HTML, które umożliwiają interakcję z nimi w skryptach PHP.

Interakcja ta może być dwustronna, to znaczy, możemy zarówno pobrać tekst wpisany przez użytkownika w polu tekstowym w przeglądarce, jak i możemy umieścić w polu tekstowym ciąg znaków przed wysłaniem go do przeglądarki użytkownika (wtedy pole jest już wstępnie wypełnione).

Zanim jednak zaczniemy cokolwiek wysyłać, musimy utworzyć formularz za pomocą elementu HTML form, który jest jego głównym kontenerem. Element ten ma prostą składnię:

<form action="skrypt.php" method="get">

</form>

Choć żaden ze zdefiniowanych powyżej atrybutów elementu form nie jest obowiązkowy, to każdy z nich jest bardzo ważny.

Pierwszy z nich, action, określa skrypt, do którego mają zostać przesłane dane z formularza, a drugi, method, wskazuje jaka metoda HTTP ma zostać do tego celu użyta.

W przedstawionym elemencie form ustawiłem metodę GET (wielkość liter w wartości atrybutów HTML nie ma znaczenia, ale zwyczajowo używa się samych małych liter), choć nie musiałem tego robić, ponieważ jest to metoda domyślna, czyli zostałaby zastosowana także wtedy, gdybym całkiem pominął ten atrybut.

Element HTML form jest tylko kontenerem formularza internetowego i aby był użyteczny, musi zawierać elementy formularzy HTML, które potocznie nazywamy kontrolkami. Jedną z najczęściej używanych kontrolek jest element intput, za pomocą którego między innymi można tworzyć pola tekstowe. Dodamy teraz taki element do naszego formularza i opatrzymy go etykietą.

<form action="skrypt.php" method="get">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">

  <button type="submit">Wyślij</button>
</form>

Ten formularz zawiera pole tekstowe HTML o nazwie i identyfikatorze imie oraz etykietę tego pola, która została z nim powiązana przez atrybut HTML id. Dzięki temu powiązaniu (taka sama wartość w atrybucie for elementu label i w atrybucie id elementu intput), kiedy klikniemy na stronie słowo Imię, automatycznie aktywuje się pole tekstowe, w którym należy wpisać imię.

Na samym dole formularza umieściłem jeszcze przycisk do jego zatwierdzania. Przycisk ten również jest elementem intput, ale typu submit.

Ten prosty formularz wystarczy nam do zapoznania się z technikami obsługi formularzy w PHP. Jeśli chcesz dowiedzieć się więcej na temat budowy formularzy w HTML, przeczytaj rozdział Formularze HTML kursu HTML i CSS dla początkujących.

Teraz pokażę Ci, jak formularze PHP przetwarzają dane przesyłane metodą HTTP GET.

Metoda GET

Choć często używam wyrażenia formularze PHP, to należy pamiętać, że w proces przetwarzania formularzy internetowych zaangażowane są przynajmniej trzy strony: przeglądarka internetowa, serwer i interpreter PHP. Inaczej mówiąc „formularze PHP” to tylko taki skrót myślowy.

Na pierwszy ogień wybrałem metodę GET, ponieważ na jej podstawie łatwiej jest pokazać rolę przeglądarki w całym tym zamieszaniu.

Kiedy użytkownik otwiera stronę z naszym formularzem, to widzi na niej pole tekstowe, w którym może wpisać swoje imię, oraz przycisk Wyślij, którego naciśnięcie spowoduje wysłanie danych do serwera.

Sposób wysyłania tych danych do serwera jest cechą charakterystyczną metody GET. Dane te zostają dołączone w postaci tzw. łańcucha zapytania na końcu adresu skryptu, który został wyznaczony do ich przetworzenia, i można je swobodnie obejrzeć w pasku adresu przeglądarki.

Kiedy na przykład zatwierdziłem przykładowy formularz z poprzedniej sekcji po wpisaniu do niego imienia, w pasku adresu przeglądarki pojawiło się takie coś: http://test.testy/skrypt.php?imie=Ania.

Jednak zmiana w adresie to nie jedyne ciekawe wydarzenie, które miało miejsce w momencie naciśnięcia przycisku Wyślij.

Drugim, jeszcze ciekawszym, zdarzeniem było utworzenie przez PHP na serwerze specjalnej tablicy superglobalnej PHP o nazwie $_GET. Jest to tablica asocjacyjna, która zawiera wszystkie dane przesłane metodą GET do serwera.

Zobaczmy, jak wygląda jej zawartość w naszym przypadku. Wpisz w pliku skrypt.php poniższy kod:

if($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (isset($_GET)) {
    print_r($_GET);
  }
}

Następnie w formularzu w polu tekstowym wpisz jakieś imię i kliknij przycisk Wyślij. W efekcie nastąpi przejście do skryptu skrypt.php, który wykona powyższy kod i wyświetli wynik widoczny na poniższym zrzucie ekranu (na początku dodałem element HTML pre, aby wyniki ładniej wyglądały).

Jak widać, $_GET to tablica asocjacyjna, w której kluczami są wartości atrybutów name pól formularza, a wartościami są wartości wprowadzone w tych polach.

Mając wartości pól formularza w tablicy, możemy je dowolnie przetwarzać — na przykład zapisać w bazie danych albo użyć do przygotowania spersonalizowanej wiadomości e-mail. Dla wygody wartości z tablic superglobalnych (takich jak $_GET) często przenosi się do zmiennych, np.:

if($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (isset($_GET['imie'])) {
    $imie = $_GET['imie'];
    echo $imie;
  }
}

Zwróć uwagę na użycie w tym przykładzie funkcji isset(), którą bardzo często można spotkać w skryptach obsługujących formularze PHP. Zaryzykuję nawet stwierdzenie, że jest z nimi nierozłączna.

Funkcja PHP isset() sprawdza, czy dana zmienna istnieje oraz czy nie jest null. Dopiero kiedy upewnimy się, że interesująca nas zmienna naprawdę jest dostępna, wykonujemy na niej jakieś operacje — tu tylko wyświetlamy jej wartość (na dodatek robimy to nie do końca dobrze, o czym przekonasz się w sekcji Uwaga na temat bezpieczeństwa).

Podsumowując, w tym krótkim fragmencie kodu mamy dwie konstrukcje stanowiące podstawowe zabezpieczenia: sprawdzamy rodzaj żądania HTTP i sprawdzamy, czy interesujący nas element tablicy istnieje, co chroni nas przed ewentualnym wyświetleniem komunikatu błędu i być może ujawnieniem w nim jakichś informacji, które wolelibyśmy ukryć.

Ważna uwaga na temat bezpieczeństwa

Formularze PHP odbierają dane od użytkowników internetu, z których nie wszyscy są do nas przyjaźnie nastawieni. Dlatego w tej kwestii zawsze należy zachowywać jak najdalej posuniętą ostrożność.

Kwestii bezpieczeństwa formularzy jest poświęcony jeden z dalszych rozdziałów, ale już teraz chciałbym zwrócić Twoją uwagę na najważniejsze podstawy i pokazać ci jedną z najczęściej używanych funkcji, która chroni między innymi przed atakami typu XSS (ang. Cross Site Scripting).

Spójrz jeszcze raz na nasz przykładowy skrypt:

if($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (isset($_GET['imie'])) {
    $imie = $_GET['imie'];
    echo $imie;
  }
}

Sprawdza on, czy rodzaj żądania HTTP to GET, zapisuje imię w zmiennej o nazwie $imie i wyświetla, a raczej wstawia do kodu HTML strony, wartość tej zmiennej. Co tu mogłoby pójść nie tak?

Jeśli chcesz się dowiedzieć, to w polu imienia zamiast prawdziwego imienia wpisz poniższy kod i zatwierdź formularz:

<script>alert('Zostałeś zhakowany!')</script>

Kiedy to zrobisz, na swojej stronie zobaczysz poniższe okienko:

Łatwo sobie wyobrazić, że haker nie byłby tak łaskawy i wstrzyknąłby nam w ten sposób znacznie bardziej szkodliwy kod.

Jak temu zaradzić? Rozwiązanie jest bardzo proste i nazywa się htmlspecialchars(). Jest to funkcja, która zamienia wszystkie znaki o specjalnym znaczeniu w HTML na odpowiadające im encje HTML. To udaremnia wszelkie ataki z wykorzystaniem bazujących na nich technik.

Poniżej znajduje się nasz skrypt obsługujący formularz PHP w ulepszonej wersji:

if($_SERVER['REQUEST_METHOD'] === 'GET') {
  if (isset($_GET['imie'])) {
    $imie = $_GET['imie'];
    echo htmlspecialchars($imie);
  }
}

Jeszcze jedna drobna uwaga: choć dla wygody funkcję htmlspecialchars() mogliśmy zastosować wcześniej, $imie = htmlspecialchars($_GET['imie']);, to w PHP powszechnie stosuje się zasadę, zgodnie z którą znaki specjalne należy „rozbrajać” jak najpóźniej przed wysłaniem tekstu do przeglądarki.

Koniecznie zaprzyjaźnij się z funkcją htmlspecialchars() i nigdy się z nią nie rozstawaj, kiedy będziesz tworzyć formularze PHP.

Poniższy zrzut ekranu przedstawia efekt dodania funkcji PHP htmlspecialchars() do naszego skryptu:

Teraz krótko opowiem ci o metodzie HTTP POST.

Metoda POST

Metoda POST różni się od metody GET sposobem przesyłania danych. Podczas gdy w przypadku metody GET są one widoczne w adresie URL w pasku adresu przeglądarki, w przypadku metody POST na pierwszy rzut oka ich nie widać i nie ma do nich tak łatwego dostępu (ale ogólnie jest).

Aby wysłać formularz metodą POST, należy nadać atrybutowi method elementu form wartość post (przypomnę, że wielkość liter nie ma znaczenia).

<form action="skrypt.php" method="post">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">

  <input type="submit" value="Wyślij">
</form>

Dane z tego formularza zostaną przesłane do serwera metodą HTTP POST. Ale w jaki sposób? I jak się do nich dobrać już tam, na serwerze? Najlepiej zrobić to przez tablicę superglobalną $_POST.

Praca z tą tablicą wygląda dokładnie tak samo, jak z tablicą $_GET, tylko że zawiera ona dane z żądań metodą HTTP POST, a nie GET. Poniżej znajduje się nasz przykładowy skrypt „przestawiony” na nową metodę.

if($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (isset($_POST['imie'])) {
    $imie = $_POST['imie'];
    echo htmlspecialchars($imie);
  }
}

Teraz ze zmienną $imie, tak jak poprzednio, możemy robić, co tylko nam się spodoba. Pozostaje jednak jeszcze jedna niewyjaśniona kwestia. Gdzie w przeglądarce można podejrzeć dane, które zostały przesłane metodą metodą HTTP POST?

W tym przypadku najprościej jest użyć narzędzi dla programistów przeglądarki. Na przykład w przeglądarce Google Chrome należy nacisnąć klawisz F12, otworzyć kartę Network (albo Sieć), kliknąć nazwę interesującego nas pliku (u nas skrypt.php) i wybrać kartę Payload (albo Ładunek). Spójrz na poniższy zrzut ekranu:

Kiedy używać GET a kiedy POST

Ogólna zasada jest taka, że metody GET powinno się używać do pobierania danych z serwera, a więc na przykład w formularzach wyszukiwania, oraz ogólnie w przypadkach, gdy przesyłane dane nie są wrażliwe ani zbyt obszerne.

Metody GET dotyczy limit długości danych. Dawniej najczęściej podawało się liczbę około 2000 znaków, ponieważ tyle wynosił limit najpopularniejszej przeglądarki Internet Explorer.

Obecnie w nowoczesnych przeglądarkach te limity są znacznie wyższe, ale i tak przesyłanie dużych ilości danych tą metodą jest niepraktyczne.

Jeśli więc chcesz przesłać dużą ilość danych albo nie chcesz, aby były one widoczne w pasku adresu przeglądarki lub chcesz je zaszyfrować na czas przesyłania, to użyj metody POST.

Ponadto ogólna zasada jest taka, że metody POST powinno się używać w przypadkach, gdy formularz powoduje jakiekolwiek zmiany na serwerze, a więc na przykład gdy dane z formularza zostają zapisane w bazie danych.

Na zakończenie tego rozdziału pokażę ci jeszcze, jak w jednym pliku umieścić zarówno formularz PHP, jak i skrypt służący do jego obsługi.

Samoprzetwarzające się formularze PHP

Dane z formularza można też przetwarzać za pomocą skryptu znajdującego się w tym samym pliku, w którym znajduje się ten formularz. Nazywa się to samoprzetwarzającymi się formularzami PHP.

Aby utworzyć samoprzetwarzający się formularz PHP, należy umieścić w jednym pliku zarówno formularz HTML, jak i skrypt PHP służący do jego obsługi, oraz wskazać w formularzu, że skrypt obsługujący znajduje się w tym samym pliku.

Następnie, w najprostszych przypadkach, w atrybucie action elementu form można wpisać nazwę tego pliku, ale jest to metoda niezalecana ze względów bezpieczeństwa i elastyczności.

Zamiast tego lepiej jest użyć elementu PHP_SELF ze znanej już ci tablicy superglobalnej $_SERVER, np.:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post"></form>

Element $_SERVER['PHP_SELF'] zawsze wskazuje bieżący plik, więc nawet jeśli zmienimy nazwę pliku naszego skryptu, to w niczym nam to nie zaszkodzi i niczego więcej nie będziemy musieli zmieniać.

Z kolei funkcja htmlspecialchars() po raz kolejny chroni przed atakami typu XSS. Bez niej nasz formularz byłby podatny na wstrzyknięcie kodu JavaScript za pośrednictwem paska adresu.

Samoprzetwarzające się formularze często tworzy się według typowego schematu: jeśli żądanie strony nadeszło metodą GET, to wyświetlamy formularz HTML, a jeśli żądanie nadeszło metodą metodą HTTP POST, to przetwarzamy dane za pomocą skryptu PHP.

W implementacji tego rozwiązania pomocna jest instrukcja warunkowa sprawdzająca rodzaj żądania (if($_SERVER['REQUEST_METHOD'] === 'POST/GET')). Na przykład:

<?php
if($_SERVER['REQUEST_METHOD'] === 'GET') {
?>

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">

  <input type="submit" value="Wyślij">
</form>

<?php
}

if($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (isset($_POST['imie'])) {
    $imie = $_POST['imie'];
    echo 'Cześć, ' . htmlspecialchars($imie) . '!';
  }
}

?>

Jeśli na tej stronie w polu tekstowym wpiszesz imię i klikniesz przycisk Wyślij, to formularz HTML zniknie, a w jego miejsce pojawi się powitanie.

Przykładowy efekt:

Jeśli wolisz, żeby formularz nie znikał, tylko nadal był widoczny, możesz usunąć test żądania GET, np.:

<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
  <label for="imie">Imię:</label>
  <input type="text" id="imie" name="imie">

  <input type="submit" value="Wyślij">
</form>

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST') {
  if (isset($_POST['imie'])) {
    $imie = $_POST['imie'];
    echo 'Cześć, ' . htmlspecialchars($imie) . '!';
  }
}
?>

Przykładowy efekt:

To wszystko, jeśli chodzi o podstawy przetwarzania danych z formularzy w PHP. W kolejnych rozdziałach bardziej szczegółowo pokażę ci techniki pracy z różnymi rodzajami kontrolek formularzy.

Podsumowanie

1. Komunikacja między przeglądarką a serwerem odbywa się za pośrednictwem protokołu HTTP.
2. Formularze PHP to formularze HTML przetwarzane przez skrypty PHP.
3. Każdy formularz PHP zawiera podstawowy element HTML form, w którym może znajdować się dowolna liczba różnych elementów HTML reprezentujących pola formularza.
4. Dwie podstawowe metody HTTP wysyłania formularzy to GET i metodą HTTP POST.
5. W przypadku metody GET dane formularza są przesyłane w adresie widocznym w pasku adresu przeglądarki.
6. W przypadku metody metodą HTTP POST dane formularza są przesyłane wewnątrz żądania HTTP.
7. Dane przesłane metodą GET są dostępne na serwerze w tablicy superglobalnej $_GET.
8. Dane przesłane metodą metodą HTTP POST są dostępne na serwerze w tablicy superglobalnej $_POST.
9. Metody GET należy używać kiedy trzeba pobrać jakieś dane z serwera i do przesyłania mniejszych ilości danych, które nie są poufne.
10. Metody metodą HTTP POST najlepiej jest używać do modyfikowania danych na serwerze i do przesyłania większych ilości danych, które mogą być poufne, ponieważ metoda ta daje możliwość ich zaszyfrowania.
11. Tablica superglobalna $_SERVER zawiera różne informacje dotyczące serwera.
12. W elemencie REQUEST_METHOD tablicy $_SERVER przechowywana jest metoda, której użyto do wysłania żądania strony.
13. W elemencie PHP_SELF tablicy $_SERVER przechowywana jest ścieżka do bieżącego pliku.
14. Podczas tworzenia formularzy PHP czas należy mieć na uwadze kwestie bezpieczeństwa.
15. Podstawową techniką ochrony przed atakami typu XSS jest przepuszczanie przez funkcję htmlspecialchars() wszystkich danych pochodzących od użytkownika przed wysłaniem ich do strony internetowej.
16. Samoprzetwarzające się formularze PHP to takie formularze, które zawierają formularz HTML i obsługujący go skrypt PHP w jednym pliku.
17. Samoprzetwarzające się formularze PHP najlepiej jest tworzyć przez użycie elementu tablicy $_SERVER['PHP_SELF'] jako wartości atrybutu action elementu HTML form.

Pytania

1. Czym jest HTTP?
2. Które metody HTTP są najczęściej używane do tworzenia formularzy internetowych?
3. W jaki sposób przeglądarka przesyła dane wysyłane metodą GET?
4. W jaki sposób przeglądarka przesyła dane wysyłane metodą POST?
5. Jak na serwerze uzyskać dostęp do danych formularza przesłanych metodą GET?
6. Jak na serwerze uzyskać dostęp do danych formularza przesłanych metodą POST?
7. Kiedy najlepiej jest używać metody GET, a kiedy POST?
8. Do czego służy funkcja htmlspecialchars()?
9. Jak się tworzy samoprzetwarzające się formularze PHP?

Ćwiczenia

1. Dodaj do poniższego przykładowego formularza PHP pole tekstowe do wpisania nazwiska, a następnie utwórz odpowiedni skrypt, który wyświetli imię samymi małymi literami, a nazwisko — samymi wielkimi literami. Jako imię wpisz Jędrzej, jako nazwisko wpisz Dąbrowski i sprawdź wynik.

   
   <form action="skrypt.php" method="get">
     <label for="imie">Imię:</label>
     <input type="text" id="imie" name="imie">
   
     <input type="submit" value="Wyślij">
   </form>

   Wskazówka: jeśli coś ci nie wychodzi, to być może przyda ci się uważna lektura rozdziału Typ PHP string — łańcuchy znaków.

2. Przerób swój formularz otrzymany po wykonaniu poprzedniego ćwiczenia na samoprzetwarzający się formularz PHP w taki sposób, aby po zatwierdzeniu formularz był nadal widoczny oraz imię pojawiało się nad formularzem, a nazwisko pod nim.