Formularze HTML w kwalifikacji INF.03: najważniejsze zasady, przykłady i 66 powiązanych pytań w banku.
Formularz to podstawowy sposób, w jaki przeglądarka sama, bez dodatkowego skryptu, przekazuje dane użytkownika na serwer. To, co dotrze do skryptu PHP, wynika z trzech decyzji zapisanych w HTML: dokąd wysłać (action), jaką metodą (method) i pod jaką nazwą (name). Kto czyta formularz w tej kolejności, potrafi wypisać zawartość tablicy $_POST z samego kodu strony, bez jej uruchamiania. Typy pól i walidacja HTML5 są nadbudową nad tym mechanizmem, a nie jego zamiennikiem.
Znacznik form, action i method
Zapis <form action="zapisz.php" method="post"> wysyła dane pod adres zapisz.php metodą POST. Pominięty lub pusty atrybut action kieruje je pod adres bieżącej strony. Wysyłkę uruchamia <input type="submit"> albo <button>, ponieważ domyślnym typem przycisku umieszczonego w formularzu jest submit, a w formularzu z jednym polem tekstowym wystarczy klawisz Enter.
Bez atrybutu method przeglądarka użyje metody GET, więc hasło z formularza logowania trafiłoby do widocznego adresu. Na serwer idą tylko te pola, które mają atrybut name i nie są wyłączone atrybutem disabled. Pole z readonly jest wysyłane normalnie, użytkownik nie może jedynie zmienić jego treści. Atrybut name samego znacznika form nie jest wysyłany i służy wyłącznie skryptom działającym w przeglądarce.
GET kontra POST w praktyce
GET dokleja dane do adresu jako ciąg zapytania po znaku zapytania, a kolejne pary klucz i wartość rozdziela znakiem &. Formularz z polami name="q" oraz name="sort" wysłany do szukaj.php da adres szukaj.php?q=router&sort=cena, który PHP odczyta z tablicy $_GET. Taki adres widać w pasku, zapisuje się w historii i w logach serwera, ale można go przesłać dalej lub dodać do zakładek.
POST umieszcza dane w ciele żądania, więc nie widać ich w adresie i nie ogranicza ich długość samego adresu; realnym limitem jest wtedy ustawienie serwera, w PHP postmaxsize. Odświeżenie strony po wysyłce metodą POST wywołuje pytanie o ponowne przesłanie danych, dlatego po zapisie stosuje się przekierowanie. GET pasuje do wyszukiwania, filtrów i stronicowania, gdzie wynik ma być powtarzalny, a POST do logowania, zapisu do bazy, usuwania rekordu i wysyłki pliku.
Atrybut name jako klucz przesyłanych danych
Nazwa pola jest kluczem w tablicy po stronie serwera. Pole <input type="text" name="email"> wysłane metodą POST odczytasz jako $POST['email'], a to samo pole wysłane metodą GET jako $GET['email']. Atrybut id służy stylom, skryptom i etykiecie, na serwer nie trafia, a pole pozbawione atrybutu name jest przy wysyłce pomijane.
Przyciski radio z jednej grupy mają identyczny name i różne value; to wspólna nazwa sprawia, że wybór jest tylko jeden. Niezaznaczony checkbox oraz grupa radio bez wybranej opcji nie wysyłają niczego, więc w PHP sprawdza się je funkcją isset, a nie porównaniem do pustego tekstu. Checkbox bez atrybutu value przekazuje wartość on, a kilka pól wyboru o nazwie opcje[] PHP odbierze jako tablicę.
Typy pola input i to, co naprawdę dają
Atrybut type zmienia klawiaturę na telefonie, wygląd pola i wbudowane sprawdzenie, lecz nie chroni danych. Pole password zasłania znaki kropkami, a mimo to przesyła je w takiej samej postaci jak zwykły tekst; poufność daje dopiero połączenie HTTPS. Typ nierozpoznany przez przeglądarkę zachowuje się jak text, więc starsze urządzenie nie zablokuje formularza.
Pole number współpracuje z min, max i step, natomiast email sprawdza jedynie obecność znaku małpy oraz tekstu po obu jego stronach, więc wartość a@b przejdzie kontrolę. Checkbox obsługuje niezależne zgody, radio wybór jednej opcji z zestawu, file wskazanie pliku z dysku. Pole hidden przesyła wartość niewidoczną na stronie, którą każdy podejrzy i zmieni w narzędziach przeglądarki, więc nie zapisuj w nim ceny ani uprawnień.
Etykieta, lista rozwijana i pole wieloliniowe
Etykieta <label for="mail">E-mail</label> wiąże się z polem <input id="mail" name="email">, ponieważ atrybut for wskazuje id, a nie name. Kliknięcie etykiety ustawia kursor w polu i powiększa obszar trafienia, a czytnik ekranu odczyta wtedy opis pola. Pole umieszczone wewnątrz znacznika label nie potrzebuje atrybutu for.
Lista rozwijana ma name na znaczniku select, a wysyłana jest wartość value zaznaczonego option; bez tego atrybutu pójdzie tekst widoczny między znacznikami. Atrybut selected ustawia opcję domyślną, a select z atrybutem multiple wymaga nazwy w postaci opcje[], inaczej na serwer dotrze tylko ostatnia zaznaczona pozycja. Textarea nie ma atrybutu value, treść początkową wpisuje się między znacznikiem otwierającym a zamykającym, razem ze spacjami i złamaniami wiersza.
Walidacja HTML5 i wysyłanie pliku
Atrybut required blokuje wysłanie pustego pola, a maxlength ogranicza liczbę znaków wpisywanych z klawiatury. Wzorzec pattern="[0-9]{2}-[0-9]{3}" przepuści kod 30-001, a odrzuci 300-1, ponieważ dopasowanie obejmuje całą wartość, nie jej fragment; pole puste wzorzec pomija, dopóki nie doda się required. Zakres liczby lub daty ograniczają min i max, na przykład min="1" max="20" przy liczbie zamawianych sztuk.
Ta kontrola działa wyłącznie w przeglądarce. Atrybut novalidate w znaczniku form, atrybut formnovalidate przy przycisku, edycja kodu w narzędziach deweloperskich albo żądanie wysłane spoza strony sprawiają, że dane trafią na serwer bez sprawdzenia, więc skrypt musi powtórzyć te same reguły. Przesłanie pliku wymaga method="post" i enctype="multipart/form-data"; przy domyślnym kodowaniu serwer dostanie samą nazwę pliku bez zawartości, a poprawnie wysłany plik odczytuje się z tablicy $_FILES.
Z tym działem powiązano 66 pytań w banku INF.03. Na ekranie Wszystkie pytania wybierz jeden z tagów: formularze. Możesz wtedy przejrzeć zadania tylko z interesującego Cię obszaru.