Ramy formularza

Atrybut action

W przykładzie powyżej napisałem adres docelowy - skoro wysyłamy dane, to chcemy, aby one gdzieś dotarły. Dla naszych potrzeb będą dwie możliwości:

1. Adres pliku *.php. Wspominaliśmy już, że mogą to być dokumenty html rozpoznawane przez oprogramowanie serwera jako te, w których znajdują się skrypty PHP. W takim przypadku kliknięcie przycisku wysyłającego spowoduje otwarcie tego dokumentu. Wstawiając nazwę pliku bieżącego dokumentu lub po prostu pozostawiając pustą wartość action="", spowodujemy odświeżenie bieżącej strony, przy czym zauważmy, że podczas odświeżania, wysłane dane trafiły na serwer, tam mogliśmy za pomocą PHP przetworzyć je dla naszych potrzeb i pokazać na odświeżonej stronie wyniki naszych operacji na danych. To bardzo korzystna sytuacja dająca programiście duże możliwości.
   Klasycznym przykładem dla tego punktu jest logowanie. Na przykład jedna strona będzie pokazywała formularz logowania - jeżeli gość strony wypełni formularz i wyśle go, otworzy się druga strona. Wystarczy umieścić w formularzu np. element Podaj login, element Podaj hasło oraz przycisk wysyłający OK. W action należy wpisać ścieżkę do pliku drugiej strony - w tym pliku musimy umieścić skrypt PHP, który odbierze wysyłane dane. Gość strony wpisuje login i hasło oraz klika OK. Kliknięcie powoduje wysłanie formularza na serwer gdzie zaczyna "działać" skrypt umieszczony w pliku docelowym - sprawdza on poprawność otrzymanych danych z danymi zapisanymi na serwerze i generuje odpowiedni wygląd strony decelowej umieszczając np. napis Podano błędny login lub hasło albo Witamy w naszym serwisie. Atrybut action może również kierować do pliku, który nie jest sam w sobie dokumentem html, zawiera jednynie kod PHP, który w zależności od sytuacji sam utworzy odpowiedni kod HTML albo spowoduje otwarcie wskazanej w kodzie PHP strony. To wszystko, poznamy "w swoim czasie", teraz chcę, abyś zrozumiał, jak ważnym elementych stron WWW są formularze.
2. Wysłanie do domyślnego programu pocztowego zainstalowanego w komputerze użytkownika. Dopóki nie znamy PHP, w ten właśnie sposób będziemy testować wysyłane dane. Przypomnijmy sobie, że możemy utworzyć odsyłacz pocztowy stosując wyrażenie mailto:. Analogicznie, możemy zapisać action="mailto:jakis_adres@example.com".

Atrybut method

Może przyjmować dwie wartości:

• get - stosuje się dla pojedynczych danych, przy czym są one widoczne w pasku adresu przeglądarki - nie jest więc to metoda bezpieczna, jeżeli nie chcemy, aby postronne osoby znały wartość naszych danych. Metody tej nie można stosować do wysłania danych do domyślnego programu pocztowego.
• post - tę metodę będziemy stosowali w naszych przykładach. Możemy przesyłać dowolną liczbę danych w sposób ukryty dla użytkownika.

Dodatkowe atrybuty znacznika form

• Atrybut autocomplete - może przyjmować wartości on (włączony) lub off (wyłączony). W domyślnym ustwieniu on przeglądarka zapamiętuje dane wprowadzane wcześniej do formularza i proponuje je później do automatycznego wstawienia. Jest to ułatwienie, ale jednocześnie grozi przejęciem danych przez osoby do tego nieupoważnione.
• Atrybut novalidate - może przyjmować jedną wartość novalidate. Pozwala wyłączyć domyślne sprawdzanie zawartości formularza, a więc po wpisaniu novalidate="novalidate", formularz będzie wysłany pomimo błędów i pustych pól.

Najprostszy element wprowadzania danych

Jednowierszowe pole tekstowe, jego kostrukcja jest następująca:
<input type="text" name="nazwa" value="tekst pokazany w polu" />. Wartość name piszemy małymi literami stosując zasady nazewnictwa w programowaniu. Skrypt PHP "przechwyci" wartość value przyporządkowaną indeksowi name.

Przycisk wysyłający formularz

<input type="submit" name="nazwa" value="tekst pokazany na przycisku" />. Zauważmy, że konstrukcja jest identyczna jak typu text.

Należy tutaj powiedzieć, że rolę przycisku może pełnić obrazek, chociaż od razu zastrzegam, że rozwiązanie z zastosowaniem stylów CSS i obrazka jako tła elementu, daje o wiele lepsze efekty.
<input type="image" src="ścieżka do pliku obrazka" name="nazwa" alt="np. Wyślij" />

Wysłanie formularza do pliku *.php - ćwiczenie 2_6_1_1

Wykonaj stronę, na której znajdą się dwa folmularze, przy czym każdy ma się składać z elementów typu text oraz submit. Adresem docelowym ma być adres bieżącego dokumentu - http://www.teacher.webd.pl/kurs_html5/k_2_6_1.php#form_to_php. Pierwszy formularz wyślij, stosując metodę post, natomiast drugi metodą get. To zadanie zrealizujesz stosując poniższy kod:

<form action="http://www.teacher.webd.pl/kurs_html5/k_2_6_1.php#form_to_php" method="post">
    <input type="text" name="tekst_1" value="" />
    <input type="submit" name="przycisk_1" value="Wyślij" />
</form>  
<form action="http://www.teacher.webd.pl/kurs_html5/k_2_6_1.php#form_to_php" method="get">
    <input type="text" name="tekst_2" value="Ala ma kota" />
    <input type="submit" name="przycisk_2" value="Wyślij" />
</form>

Tutaj sprawdź, jak powinna wyglądać poprawnie wykonana strona. Otwórz ją, przetestuj działanie, a następnie wykonaj tę stronę samodzielnie.
Kilka istotych uwag.

• Dwa formularze składają się z pola tekstowego oraz przycisku Wyślij
• Pole tekstowe drugiego formularza ma wpis Ala ma kota, ponieważ nadaliśmy taką wartość atrybutowi value. Możesz to jednak zmienić - zostanie wysłany tekst wpisany podczas kliknięcia Wyślij.
• Kliknięcie Wyślij powoduje otwarcie dokumentu, z którym obecnie pracujesz - sprawdź wartość atrybutu action. Zauważ fragment #form_to_php, a więc definicję kotwicy. Znajdź #form_to_php na rysunku 2_6_1_1.
• Nie zauważyłeś operacji na wysłanych danych wykonanych przez PHP, ponieważ operacji tych nigdy nie widać, widać - jeżeli sobie tego zażyczy programista - efekty tych operacji. W tym przypadku tworzący tę stronę, zaprogramował wyświetlenie napisu w kolorze czerwonym. Kodu PHP nie widać w źródle strony więc go pokazuję poniżej. Na obecnym poziomie Twojego zawansowania wiedz tyle, że zaczyna się on od <?php, a kończy ?>.
• Danych wysłanych za pomocą pierwszego formularza - metodą post nigdzie nie widać, natomiast w przypadku formularza drugiego widzimy je po wyświetleniu strony docelowej, w pasku adresu tej strony.

Wysłanie formularza do programu pocztowego - ćwiczenie 2_6_1_2

Wykonaj stronę, na której znajdzie się prosty formularz złożony z pola tekstowego oraz przycisku Wyślij. Formularz ma wysłać wpisany tekst do domyślnego programu pocztowego zainstalowanego w Twoim komputerze. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post">
    <input type="text" name="tekst_1" value="" />
    <input type="submit" name="przycisk_1" value="Wyślij" />
</form>  

Tak powinna wyglądać wykonana strona:

Zapis jaki powinieneś ujrzeć w programie pocztowym (tutaj Outlook Express) pokazuje rysunek 2_6_1_2.

Trudno pokazany efekt uznać za satysfakcjonujący - nie radziłbym wysyłać e-maili tak wyglądających. Prawda jest taka, że wysyłanie maili ze strony jest możliwe praktycznie tylko poprzez zaawansowane skrypty posługujące się kontem pocztowym wysyłającego. W innych przypadkach zabezpieczenia serwerów odrzucą wszystko jako spam lub niebezpieczne oprogramowanie. Poza tym, funkcje wysyłające maile bez udziału konta użytkownika są najczęściej zablokowane przez administratorów serwerów. W naszym przykładzie warunek zastosowania własnego konta jest spełniony, jednak treść maila jest nieczytelna.
Jednak dla naszych potrzeb - testowania wysyłanych danych, taka postać jest wystarczająca bowiem w zapisie tekst_1=Ala+ma+kota&przycisk_1 widzimy, że pierwszy element wysłany ma nazwę tekst_1 i wartość Ala+ma+kota, natomiast drugi element, to przycisk_1, przy czym napis znajdujący się po znaku równości możemy sobie teraz "darować" a na przyszłość nie używać polskich "ogonków".

Pisząc następny temat, doszedłem do wniosku, aby treść pokazywaną przez program pocztowy uczynić bardziej przejrzystą - tutaj znajduje się opis jak to zrobić.

Wysłanie formularza z przyciskiem obrazkowym do programu pocztowego - ćwiczenie 2_6_1_3

Wykonaj ponownie poprzednie ćwiczenie, jednak tym razem zastosuj przycisk obrazkowy z tym obrazkiem. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post">
    <input type="text" name="tekst_1" value="" /><br />
    <input type="image" src="koperta.jpg" name="przycisk_1" alt="Wyślij" />
</form>  

Tak powinna wyglądać wykonana strona:

Zwróć uwagę, że tym razem jako wartość przycisku_1 zostały pokazane współrzędne obrazka.

Praca domowa

Wykonaj stronę z formularzem wysyłającym do programu pocztowego dane wpisywane do dwóch pól tekstowych jednowierszowych. Przetesuj działanie dodatkowych atrybutów znacznika form.