06. Formularze PHP

Formularze (HTML)

* Uwaga * Wygląda na to, żę wysyłanie emaili za pomocą PHP nie działa już na CBA. W związku z tym proponuję hosting zagraniczny, na przykład: https://www.000webhost.com . Dodatkową zaletą tam jest brak reklam.

* Uwaga 2 * Przykład formularza zamieszczony poniżej jest jednym z najprostszych możliwych. Nie bierze od pod uwagę takich aspektów jak: sprawdzanie czy użytkownik wypełnił wszystkie wymagane pola, zapamiętywanie danych użytkownika, sprawdzanie poprawności adresu email (np. czy jest w nim znak @), itd. Zadaniem tego skryptu jest po prostu wysłać email. Proszę zauważyć, że w wytycznych zadania nie ma zapisu mówiącego, że formularz ma walidować emaila albo prosić użytkownika o wypełnienie wszystkich pól. Korzystamy z darmowego serwera zatem pomiędzy kliknięciem "Wyślij" a otrzymaniem emaila może minąć kilka-kilkanaście minut.

Formularze służą do pobierania danych od użytkowników odwiedzających naszą stronę internetową i są podstawową metodą pozwalającą na pewną interakcję między stroną (lub aplikacją) internetową a użytkownikiem.

Formularze składają się z pól różnego typu opisanych etykietami i przycisków akcji.

Przykładowy prosty formularz (przypomnienie):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Kontakt</title>
</head>
<body>
    <h2>Skontaktuj się z nami</h2>
    <p>Proszę wypełnij formularz kontaktowy i wyślij do nas.</p>
    <form action="process-form.php" method="post">
        <p>
            <label for="inputName">Imię:<sup>*</sup></label>
            <input type="text" name="name" id="inputName">
        </p>
        <p>
            <label for="inputName">Nazwisko:<sup>*</sup></label>
            <input type="text" name="last_name" id="inputLastName">
        </p>
        <p>
            <label for="inputEmail">Email:<sup>*</sup></label>
            <input type="text" name="email" id="inputEmail">
        </p>
        <p>
            <label for="inputSubject">Temat:</label>
            <input type="text" name="subject" id="inputSubject">
        </p>
        <p>
            <label for="inputComment">Wiadomość:<sup>*</sup></label>
            <textarea name="message" id="inputComment" rows="5" cols="30"></textarea>
        </p>
        <input type="submit" value="Wyślij">
        <input type="reset" value="Wyczyść">
    </form>
</body>
</html>

Zródło przykładu: https://www.tutorialrepublic.com/php-tutorial/php-form-handling.php

Co warto wiedzieć o formularzach HTML:
* cały formularz umieszczony jest w obrębie znacznika <form>
* elementy INPUT oznaczają miejsca do wprowadzania danych
* type to typ pola do wprowadzania danych (np. button/checkbox/radio/submit itd….)
* name to nazwa pola używana do identyfikacji danych przez skrypt, do którego będziemy te dane wysyłać.
* id to identyfikator pola, używany przez label do identyfikacji pola
* LABEL służy do opisu pola o danym identyfikatorze (a więc atrybut for znacznika label musi mieć taką samą wartość jak atrybut id pola, które ten label będzie opisywał).
* FIELDSET służy do zaznaczenia pewnej grupy pól, a LEGEND do opisu tej grupy.

Komunikacja z PHP:

  • atrybut action mówi, co zrobić z danymi wprowadzonymi do formularza, jeśli użytkownik wciśnie przycisk SUBMIT (istnieje również przycisk RESET)
  • atrybut method ustawiamy na POST
  • co dalej dzieje się z danymi - wysyłane są one do skryptu process-form.php (kod skryptu poniżej) używając do tego metody komunikacji pomiędzy skryptami a skryptami lub skryptami a formularzami - metody POST (w PHP do obierania informacji służy GET).

A więc podstawowe pola formularza definiuje się za pomocą znacznika input z atrybutami:

  • type - definiuje typ pola:
    • type="text" - proste jednolinijkowe pole tekstowe
    • type="password" - pole do wpisania hasła (wpisywane znaki nie są pokazywane)
    • type="checkbox" - pole wielokrotnego wyboru
    • type="radio" - pole opcji (tzw. przycisk 'radiowy') - wybór jeden z wielu
    • type="submit" - przycisk wysłania formularza
  • name - nazwa pola (nazwa 'zmiennej', której wartość to pole wyznacza)
  • value - wartość pola (wartość 'zmiennej')
  • id - identyfikator - pozwala przypiąć etykietę do pola

Omówienie typów pól przedstawione jest także na stronie:
http://www.kurshtml.boo.pl/html/formularze.html

Co się dzieje z formularzem po wysłaniu

Ponieważ formularz wysyłamy do skryptu process-form.php umieszczonego w tym samym katalogu, co nasz formularz w HTMLu, dlatego należałoby stworzyć taki plik. Przykładowy skrypt dostępny jest na stronie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Formularz kontaktowy</title>
</head>
<body>
    <h1>Dziękujemy</h1>
    <p>Informacje, które wysłałeś. Sprawdź proszę czy się zgadzają</p>
    <ol>
        <li><em>Imię:</em> <?php echo $_POST["name"]?></li>
        <li><em>Nazwisko:</em> <?php echo $_POST["last_name"]?></li>
        <li><em>Email:</em> <?php echo $_POST["email"]?></li>
        <li><em>Temat:</em> <?php echo $_POST["subject"]?></li>
        <li><em>Wiadomość:</em> <?php echo $_POST["message"]?></li>
    </ol>
 
    <?php
    $to = $_POST["email"];
    $subject = $_POST["subject"];
    $message = $_POST["message"]; 
    $from = 'testowy.email@email.com';
 
    // Sending email
    if(mail($to, $subject, $message)){
        echo 'Wiadomość wysłana pomyślnie.';
    } else{
        echo 'Nid udało się wysłać wiadomości. Spróbuj ponownie.';
    }
    ?>
</body>
</html>

Źródło przykładu:https://www.tutorialrepublic.com/php-tutorial/php-form-handling.php
Funkcja mail(): https://www.tutorialrepublic.com/php-tutorial/php-send-email.php
Przykład po polsku: http://www.kurshtml.boo.pl/html/wyslanie_formularza_bez_programu_pocztowego,formularze.html
Kolejny ciekawy przykład po polsku: http://webmaster.helion.pl/index.php/php-obsluga-formularzy

* Uwaga *: pliki PHP działają tylko jeśli wyśle się je na serwer - co więcej - serwer musi obsługiwać język PHP). Czyli wysyłanie emaila nie zadziała od nas z komputera!
* Uwaga 2 *: Nie będzie też działało wyświetlanie danych po kliknięciu "Wyślij" — słowem u nas na komputerze nie działa nic co znajduje się między tagami PHP <?php ?>!

Jak działają pliki PHP

Pliki PHP uruchamiane są na serwerze, w wyniku uruchamiania generują one kod HTML, który wysyłany jest do przeglądarki. Użytkownik "nie widzi" więc kodu PHP, który napiszemy my. Podany skrypt powinien być okraszony szablonem naszej strony, aby otrzymany w wyniku przetwarzania na serwerze dokument był poprawnym dokumentem HTML.

Dodatkowe informacje

Jak zebrać wartość z pól wyboru (np. radio button)?
https://stackoverflow.com/a/5031800


Zadanie 6

Wytyczne:

  1. Dodać podstronę z formularzem. Formularz powinien zawierać kilka pól tekstowych i co najmniej dwa pola co najmniej 2 innych typów (na przykład: radio button, check button, lista). Akcja formularza powinna pozwolić wysłać dane na e-mail wpisany w pole formularza.
  2. Użyć styli CSS do formatowania wyglądu formularza.

Punktacja — w sumie do zdobycia 3 punkty:

  • 1 punkt — formularz według wytycznych;
  • 1 punkt — formularz poprawnie wysyła email i o tym informuje;
  • 1 punkt — formatowanie formularza (i strony) przy pomocy CSS.

Terminy:

  • grupy poniedziałkowe: niedziela (26.11), godzina 23:59 (północ z niedzieli na poniedziałek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z wtorku na środę oznaczać będzie brak punktów;
  • grupy czwartkowe: środa (22.11), godzina 23:59 (północ z środy na czwartek); spóźnienie: -1pkt/dzień; oddanie zadania po północy z piątku na sobotę oznaczać będzie brak punktów.
Strona na licencji Creative Commons Attribution-ShareAlike 3.0. Autorzy: A. Czoska, M. Komosiński, B. Kowalczyk, A. Kupś, M. Lubawy