FORMULARZE. G. Przęczek

Transkrypt

1 FORMULARZE G. Przęczek

2 Tworzenie formularzy w HTML Podstawowe ramy formularza wyznacza znacznik <form> </form> który ma szereg atrybutów, które określają jego działanie. Pierwszym atrybutem jest action, Jest to atrybut obowiązkowy, który określa gdzie mają zostać wysłane dane z formularza. Dalej mamy atrybut method, określający metodę, która zostanie użyta do wykonania naszego formularza. Do wyboru mamy dwie metody post lub get,

3 POST Gdy wysyłasz dane metodą POST do skryptu PHP, zostaną one umieszczone w tablicy $_POST, która jest tablicą superglobalną, czyli można się do niej odwołać w każdym miejscu kodu bez dodatkowych zabiegów. Metoda POST nie narzuca ograniczenia ilości przesyłanych danych, dla tego jest z powodzeniem stosowana w ogromnej większości formularzy na stronach WWW.

4 GET Dane uzyskane z formularza przy użyciu GET umieszczane są w tablicy $_GET, Tablica ta także jest superglobalna. Metoda GET różni się od POST tym, że posiada ograniczenie ilości przesyłanych danych. Są one umieszczane w adresie docelowego dokumentu. ciągi zapytań (pary nazwa / wartość) jest wysyłane w adresie URL żądania GET: Jeśli więc wyślesz zmienną $imie i $nazwisko do skryptu "skrypt.php" używając GET, to zawartość pola formularza zostanie przesłana w adresie: "skrypt.php?imie=wartosc&nazwisko=wartosc". W ten sposób najczęściej przekazuje się adres podstrony witryny, identyfikatora sesji czy np. wersji językowej.

5 <form action="obsluga.php" method= POST"> </form> Formularz wysyłający meila <form action= method= post > </form>

6 Formularz elektroniczny tak jak I jego odpowiednik składa się z odpowiednich pól służących do różnych celów POLA FORMULARZA <input > Znacznik <input> jest używany do tworzenia wielu innych elementów formularza - zależy to od wartości atrybutu type

7 ATRYBUTY ZNACZNIKA INPUT atrybut name określa nazwę danego pola, jest to dość ważne przy konfigurowaniu skryptów. W przypadku wszystkich dostępnych pól nazwy musza być różne, jednym wyjątkiem jest pole typu radio w tym przypadku wszystkie pola wchodzące w skład grupy mają identyczną nazwę. Atrybut value wstawia w danym polu zdeklarowana wartość Atrybut size określa liczbę znaków mieszczących się w widocznej części pola tekstowego maxlength="5 określa czyli ogranicza liczbę znaków możliwych do wpisania w zwykłym polu

8 TYPY znacznika input Do wyboru mamy następujące typy pól type= text wstawia zwykłe pole tekstowe Oto przykład definicji: <input type="text" name=" " > Można także ograniczyć ilość znaków które można wprowadzić do pola za pomocą atrybutu maxlength (np. na kod pocztowy wystarczy 6 znaków): <input type="text" name="kod_pocztowy" maxlength="6">

9 type= password pole odpowiedzialne za podanie hasła. Wpisywany tekst jest zamieniany na gwiazdki <input type="password" name="haslo" value="tajnehaslo"> type= file pozwala dołączyć plik tekstowy do formularza type= submit wstawia przycisk, który wykonuje określoną akcję np. wyślij type= reset przycisk który czyści wszystkie pola formularza type= button - określa przycisk dowolnego przeznaczenia

10 radio <input type="radio">: <input type="radio" name="odpowiedz" value="tak">tak<br> <input type="radio" name="odpowiedz" value="nie">nie<br> <input type="radio" name="odpowiedz" value="niewiem">nie wiem o o o Tak Nie Nie wiem Znacznik ten posiada znane już atrybuty type, name i value. Zauważ że wszystkie trzy znaczniki podane w powyższym przykładzie posiadają tą samą przypisaną nazwę w ten sposób przeglądarka rozpoznaje grupę przycisków, z których tylko jeden można będzie zaznaczyć na raz. W momencie wysłania formularza wartość zaznaczonego przycisku zostanie wysłana razem z jego wartością, np. odpowiedz=tak. Jeżeli żaden z przycisków nie zostanie zaznaczony, nic nie zostanie wysłane.

11 Pole wielokrotnego wyboru - checkbox <input type="checkbox">. Służy on do tworzenia pól wielokrotnego wyboru. <input type="checkbox" name="zainteresowania" value="sport checked>sport<br> <input type="checkbox" name="zainteresowania" value="ksiazki">książki<br> <input type="checkbox" name="zainteresowania" value= muzyka, checked>muzyka Sport Książki Muzyka W przypadku tego znacznika przeglądarka wysyła parę nazwa=wartość dla każdego pola które zostało zaznaczone (jeżeli nic nie zostało zaznaczone, to nic nie wyśle). Czasami możesz chcieć aby jeden z przycisków był domyślnie zaznaczony - do tego służy atrybut checked:

12 Utwórzmy następujący formularz:

13 Lista wyboru <Select name= czas"> <option value="a" > rano <option value="b" > popołudnie <option value="c" > wieczór </select>

14 Na liście rozwijalnej domyślnie wybrany jest pierwszy element. Jeżeli chcesz aby domyślnie nic nie było wybrane, dodaj tam na początku pusty element. Wartością która zostanie wysłana do serwera po wybraniu któregoś z elementów jest zawartość znacznika <option> </option>. Jeżeli chcesz aby były przesyłane inne wartości, możesz je podać za pomocą atrybutu value można określić który element ma być domyślnie wybrany. Służy do tego atrybut selected, który należy umieścić we właściwym znaczniku <option>. <select name="jezyk" size="3" multiple> <option selected>polski</option> <option selected>angielski</option>

15 Pola innego typu w formularzach Pole do edycji dłuższych tekstów <textarea name = nazwa" cols="50 rows="10"></textarea> cols liczba kolumn rows liczba wierszy

16 pole ukryte - hidden Można go zastosować w przypadku gdy chcemy przechować w formularzu pewną wartość której będziemy później potrzebować, ale nie chcemy aby ona była wyświetlana. <input type="hidden"> Graficzny przycisk wysyłania formularza image Drugą metodą wysyłania formularza jest przycisk graficzny. Tworzy się go za pomocą znacznika <input type="image" src= obrazek.gif" alt="wyślij">

17 Oprócz wymienionych powyżej znaczników, jest jeszcze kilka innych które przydają się podczas konstrukcji formularzy. Pierwszym z nich jest znacznik <fieldset>, który wraz ze znacznikiem <legend> pozwala tworzyć ramki z tytułem <fieldset> <legend>wybierz kolor</legend> <input type="radio" name="kolor" value="czerwony" />Czerwony<br /> <input type="radio" name="kolor" value="zielony" />Zielony<br /> <input type="radio" name="kolor" value="niebieski" />Niebieski<br /> </fieldset>

18 Opis pola nie jest z nim w żaden sposób związany logicznie. Aby to zmienić, należy użyć dodatkowego znacznika <label>...</label>, wewnątrz którego wpisujemy opis kontrolki formularza, który ma być z nią związany:

19 Przetwarzanie formularza <?php Do zmiennych w skrypcie odwołujemy się następująco Najpierw określamy metodę potem nazwę zmiennej czyli name pola echo $_POST[ name'];?>

20 Dane zawarte w formularzu zostają przesłane do pliku php. Mamy do wyboru 2 metody przesyłania danych get i post Spójrzmy na budowę formularza, w action określamy metodę post lub get i co jest bardzo ważne, każde pole formularza ma swoją indywidualną nazwę ponieważ te nazwy to będą później klucze tablicy super globalnej get i za pomocą tych kluczy możemy dostać się do danych wysyłanych z formularza do skryptu php

21 Metody wysyłania formularzy POST i GET Metody wysyłania formularzy POST i GET znacznie różnią się od siebie. Najczęściej używaną metodą przesyłania danych jest POST, z uwagi na większe możliwości i wyższy stopień bezpieczeństwa.

22 Funkcja isset i empty isset Funkcja sprawdza czy zmienna została utworzona. Zwraca true jeśli istnieje lub false jeśli zmiennej nie ma. Wyjątek stanowi sytuacje gdy zmienna ma "wartość" NULL - wtedy funkcja isset zwraca false. empty Natomiast sprawdza czy zmienna ma jakąś zawartość. Zwraca true jeśli zmienna ma wartość: Stosujemy je żeby sprawdzić czy użytkownik podał dane np. w formularzu

23 Sprawdzanie typu zmiennej s_int($zmienna) // czy $zmienna jest typu liczba całkowita is_double($zmienna) // czy $zmienna jest typu liczba zmiennoprzecinkowa is_string($zmienna) // czy $zmienna jest typu tekstowego is_null($zmienna) // czy $zmienna jest typu NULL is_numeric($zmienna) // czy $zmienna to liczba lub numeryczny ci±g znaków is_scalar($zmienna) // czy $zmienna jest typu int, bool, string lub float

24 PHP nie wymaga od programisty deklarowania typu zmiennej, PHP sam to ustala, zależnie od kontekstu.możemy jednak tymczasowo ustalić jej typ (rzutowanie typów): np. w formularzu np. w polu wiek czy kod pocztowy użytkownik może wpisać cokolwiek wtedy przydaje się rzutowanie typu Należy pamiętać o tym, że podczas przypisywania zmiennej nowej wartości, poprzednia wartość jest oczywiście zamazywana. W takim przypadku typ zmiennej ustalany jest od nowa. Wtedy zachodzi potrzeba zmiany typu zmiennej

25 Rzutowanie typu zmiennej Np. $liczba = 17.5; // Typ float echo (int)$liczba; (int), (integer) rzutuj do typu całkowitego (real), (double), (float) rzutuj do typu rzeczywistego (string) rzutuj do ciągu (array) rzutuj do tablicy (object) rzutuj do obiektu

26 Rzutowanie typu zmiennej za pomocą funkcji Oprócz możliwości rzutowania typów istnieje możliwo zmiany typu zmiennej funkcj± SETTYPE, np.: $wiek = $_POST['wiek']; settype($wiek,"integer") // $wiek zostanie przekształcona w liczbę całkowitą Najważniejsze typy dla funkcji settype: a) "boolean" lub "bool" b) "integer" lub "int" c) "float" d) "string"

27 przykład <?php $zmienna = 10.3; echo "$zmienna <br>"; // Wyświetlona wartość to "10.3" settype($zmienna, "integer"); echo "$zmienna <br>"; // Wyświetlona wartość to "10"?>

28 Oprócz funkcji settype() mamy jeszcze do dyspozycji kilka innych. doubleval() lub floatval() - funkcje zmieniające typ zmiennej na zmiennoprzecinkową intval() - funkcja zmieniającą typ zmiennej na całkowity strval() - funkcja zmieniającą typ zmiennej na ciąg znaków

29 HTML5 nowe atrybuty pól formularzy placeholder Podpowiedź dla użytkownika, co powinien wpisać w <input type="search" name="q" placeholder="szukaj w serwisie..."> danym polu formularza.

30 required Atrybut logiczny (wstawiany bez wartości), który zaznacza pole formularza jako obowiązkowe. Jeśli użytkownik go nie wypełni, nie będzie mógł w ogóle wysłać formularza. <input type = "text" name="nazwisko" required>

31 min, max, step Określa minimalny lub/i maksymalny zakres wartości, które można wypełnić w polu formularza oraz oczekiwany skok wartości (step). <input type="date" name="urodziny" max=" "> <input type="number" name="wzrost" min="30" max="300" step="0.1">

32 pattern Pozwala określić wyrażenie regularne, które musi być spełnione podczas wpisywania tekstu w polu formularza przez użytkownika. Jest to pewien rodzaj filtru, który uniemożliwia nieprawidłowe wypełnienie formularza. Kod pocztowy musi się rozpoczynać dwiema cyframi, następnie zawierać myślnik i na końcu trzy cyfry (np ) <input type="kod_pocztowy" pattern="^[0-9]{2}-[0-9]{3}$">