Dzięki formularzom, które są umieszczane bezpośrednio na stronie WWW, możesz uzyskać wiele informacji o użytkownikach odwiedzających Twój serwis. Służą one również do zamawiania różnych towarów w sklepach internetowych, chociaż wtedy należy dodatkowo zadbać o bezpieczeństwo przesyłanych danych. Prosty formularz pocztowy przedstawiony w tym rozdziale, na pewno nie jest odpowiedni do przesyłania np. numerów kart kredytowych, ważnych haseł dostępu czy innych poufnych danych! Bezpieczestwo można uzyskać przy pomocy skryptów wykonywanych po stronie serwera oraz protokołu SSL.
Formularz ma formę elektronicznej ankiety, którą wypełnia się wprost na stronie. Możliwe jest przy tym wpisywanie tekstu, odpowiadanie na zadane pytania, czy zaznaczanie jednej bądź kilku z podanych możliwości wyboru. Taki formularz może być przesłany pocztą elektroniczną e-mail (prosty formularz pocztowy) i odebrany przez adresata. Istnieje wiele programów wspomagających odbieranie formularzy i grupowe wysyłanie listów na ich podstawie, przez co czynność ta może stać się mniej żmudna. Są to zarówno aplikacje w postaci programów instalowanych tradycyjnie, jak i specjalne skrypty wykonywane bezpośrednio w przeglądarce (np. PHP).
<form action="mailto:adres e-mail gdzie wysłać formularz" method="post"> (Tutaj umieszcza się pola formularza) </form>lub
<form action="mailto:adres e-mail?subject=temat" method="post"> (Tutaj umieszcza się pola formularza) </form>
UWAGA!
W przypadku użycia Strict DTD, wewnątrz znaczników <form>...</form> muszą się znaleźć dodatkowe znaczniki obejmujące wszystkie elementy formularza. Znacznikami obejmującymi mogą być: div, p, fieldset, h1, h2, h3, h4, h5, h6, pre, address, ins, del.
Użytkownicy, którzy nie skonfigurowali w swoim systemie operacyjnym programu pocztowego, nie będą mogli wysyłać tego typu formularzy! Rozwiązaniem może być użycie dowolnego darmowego komponentu automatycznie wysyłającego formularz albo zastosowanie skryptu np. PHP. Zapoznaj się również z punktem pt. Alternatywny sposób wysłania formularza.
Każdy formularz składa się z różnych typów pól, dzięki którym użytkownik może wprowadzać dane. Są to np. pola do wpisywania tekstu, czy też pozwalające wybrać jedną, bądź kilka, z podanych opcji. Pola działające w analogiczny sposób, występują prawie w każdym programie komputerowym, dlatego użytkownicy nie powinni mieć problemów z wypełnieniem formularza na stronie WWW.
Pomiędzy podanymi wyżej znacznikami (<form> oraz </form>), mieszczą się wszystkie inne polecenia, dotyczące formularza (pola do wprowadzania danych). Każdy taki formularz musi rozpoczynać się od znacznika otwierającego <form>, a kończyć się znacznikiem zamykającym </form>, chyba że nie chcesz z nim nic robić (nigdzie go wysłać), ale po co Ci taka "atrapa". Dlatego staraj się o tym nie zapominać!
Jako wartość atrybutu action="..." można również podać adres skryptu PHP lub CGI (jeśli znajduje się on na tym samym serwerze, wystarczy podać względną ścieżkę dostępu). Skrypt taki stanowi specjalny program, wykonywany wprost na stronie WWW (na serwerze). Potrafi on, zgodnie z poleceniami programisty, przetworzyć wszystkie dane i np. zapisać je w oddzielnym pliku. W ten sposób oszczędzamy sobie wiele pracy, a wyniki mogą zostać natychmiastowo wyświetlone na ekranie - nie trzeba tego wykonywać ręcznie. Jednak pisanie skryptów PHP lub CGI, jest dużo bardziej skomplikowane niż tworzenie stron za pomocą prostego HTML. Dodatkowo nie wszystkie serwery WWW obsługują takie skrypty :-(
PHP i CGI to tzw. skrypty wykonywane po stronie serwera. Cechują się one m.in. tym, że potrafią zapisywać dane w zewnętrznych plikach. Oprócz nich istnieją jeszcze skrypty wykonywane po stronie klienta (np.: JavaScript lub Visual Basic - VBScript). Są one obsługiwane przez przeglądarkę użytkownika - na jego komputerze - dlatego mogą być wykonywane nawet bez dostępu do Internetu. Również i one obsługują formularze, lecz nie potrafią zapisywać danych w pliku.
Jeśli wysyłamy formularz do skryptu PHP lub CGI, jako wartość atrybutu method="..." możemy również podać: "get". Dzięki temu dane zostaną dołączone do adresu wywołania. Sposób ten stosuje się często dla bardzo krótkich formularzy. Natomiast jeżeli używamy formularza w skrypcie JavaScript bez wysyłania go nigdzie, atrybut method="..." nie jest konieczny.
Przykład:
Przy użyciu JavaScript'u można wprowadzić interaktywny formularz. Po wpisaniu:
<form action="..." onsubmit="alert(this.tekst.value); return false"> <input type="text" name="tekst" /><input type="submit" value="OK" /> </form>Otrzymamy:
Innym ważnym zastosowanie skryptów wykonywanych po stronie klienta, jest sprawdzenie poprawności wypełnienia formularza, jeszcze przed jego wysłaniem:
<form action="mailto:adres e-mail" method="post" onsubmit="if (this.tekst2.value == '') { alert('Zanim wyślesz formularz, musisz wypełnić pole tekstem!'); return false }"> <input type="text" name="tekst2" /><input type="submit" value="OK" /> </form>
Przed wysłaniem formularza możliwe jest również sprawdzenie wszystkich pól, do których można wpisać tekst. Jeśli dane te są obowiązkowe, a użytkownik ich nie wpisze, formularz nie zostanie wysłany:
<script type="text/javascript"> // <![CDATA[ function sprawdz(formularz) { for (i = 0; i < formularz.length; i++) { var pole = formularz.elements[i]; if ((pole.type == "text" || pole.type == "password" || pole.type == "textarea") && pole.value == "") { alert("Proszę wypełnić wszystkie pola!"); return false; } } return true; } // ]]> </script> <form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="if (sprawdz(this)) return true; return false"> <div> <input type="text" name="a" /><br /> <input type="password" name="b" /><br /> <textarea name="c" cols="20" rows="10"></textarea><br /> <input type="submit" value="OK" /> </div> </form>
Naciśnij OK, bez wypełniania wszystkich pól:
Wiele osób pyta, w jaki sposób można stworzyć ankietę, której wyniki byłyby natychmiastowo wyświetlane na stronie. Pozwalają tego dokonać właśnie skrypty wykonywane po stronie serwera (np. PHP lub CGI, ale nie JavaScript). Pisze się wtedy specjalny program, który przyjmuje głosy użytkowników (za pomocą formularza), a następnie zapisuje je w zewnętrznym pliku na serwerze. Potem jeśli chcemy wyświetlić wyniki, wystarczy odczytać ten plik i wypisać dane na stronie. W celu prezentacji wyników można użyć wykresu słupkowego (formatując odpowiednio szerokość komórek tabeli, w zależności od ilości oddanych głosów na daną odpowiedź). Niestety pisanie skryptów PHP lub CGI jest bardziej skomplikowane niż sam HTML.
Aby się przekonać, czy Twój serwer obsługuje skrypty PHP lub/i CGI (konieczne do stworzenia "automatycznej" ankiety), poszukaj informacji na stronie domowej serwera lub wyślij e-mail do administratora.
Dużo prościej jest jednak skorzystać z gotowych darmowych ankiet (sond), oferowanych za darmo w wielu serwisach. Garść adresów znajdziesz w rozdziale: Darmowe komponenty.
<form action="..."> <input type="text" name="nazwa" /> </form>lub
<form action="..."> <input name="nazwa" /> </form>
Atrybut name="...", powinien być unikatowy w obrębie formularza, tzn. żadne dwa pytania w tym samym formularzu nie powinny mieć takiej samej nazwy.
Typ "text" jest podstawowym rodzajem pola tekstowego. Ma ono wysokość jednej linii tekstu i określoną długość. Można do niego wpisywać tekst, który później zostanie wysłany wraz z formularzem, jako odpowiedź na zadane pytanie.
UWAGA! Wszystkie pola (dowolnego typu), które mają się znaleźć w formularzu, należy umieszczać pomiędzy tymi samymi znacznikami <form> oraz </form> (zobacz: Ramy formularza). Oczywiście w pojedynczym dokumencie można umieścić kilka formularzy - wtedy wstawiamy klika znaczników <form>...</form>, dla każdego formularza osobno.
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.
Przykład:
Zwróć uwagę, że po kliknięciu myszką wewnątrz poniższego pola, możesz wpisać tam jakiś tekst.
Możliwe jest także podanie dodatkowych atrybutów:
<input type="text" name="nazwa" value="odpowiedź domyślna" />
Przykład:
<input type="text" name="nazwa" size="k" />
size="...".Przykład:
<input type="text" name="nazwa" maxlength="n" />
Przykład:
<input type="text" name="nazwa" readonly="readonly" />
Wstawienie atrybutu readonly="readonly" powoduje, że tekstu zapisanego domyślnie w tym polu (atrybut value="odpowiedź domyślna"), nie będzie można modyfikować. Wartość pola jest jednak normalnie przesyłana w formularzu.
Przykład:
<input type="text" name="nazwa" disabled="disabled" />
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład:
<form action="..."> <input type="password" name="nazwa" /> </form>
Wprowadza pole, w którym można wpisać hasło. Od zwykłego pola tekstowego różni się tylko tym, że podczas wpisywania do niego tekstu, nie są widoczne podawane znaki, ale jedynie gwiazdki ("*"). Można również stosować dokładnie te same atrybuty, chociaż podanie hasła domyślnego, może nie być dobrym pomysłem :-).
Przesyłanie ważnych haseł dostępu w zwykłym formularzu pocztowym nie jest bezpieczne, ponieważ formularz taki nie jest szyfrowany. Niesie to ze sobą niebezpieczeństwo, że wiadomość w drodze do adresata może zostać przechwycona i odczytana przez osoby niepowołane.
Dla zaawansowanych
Można natomiast zaszyfrować cały formularz, podczas przesyłania go do skryptu, pracującego na serwerze. Aby to zrobić, należy adres skryptu (atrybut ACTION dla znacznika FORM) poprzedzić przez: "https://" (należy podać całkowity adres, a nie względną ścieżkę dostępu). Spowoduje to nawiązanie połączenia przez bezpieczny protokół SSL. Niestety nie wszystkie serwery obsługują takie połączenie :-(
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.
Przykład:
Zwróć uwagę, że wpisywane znaki są automatycznie zastępowane gwiazdkami.
Wykorzystując pole typu "password" można w prosty sposób zabezpieczyć wybraną stronę hasłem. W tym celu wystarczy na stronie głównej, do której wszyscy mają normalny dostęp, wstawić następujący kod:
<form action="?" onsubmit="window.location.href = this.password.value + '.html'; return false"> <div> <input type="password" name="password" /> <input type="submit" value="OK" /> </div> </form>
Hasłem w tym przypadku jest nazwa strony bez rozszerzenia, którą chcemy zabezpieczyć. Przykładowo: hasłem do strony tajna_strona.html (która znajduje się w tym samym katalogu co strona główna, czyli tam gdzie wstawiliśmy powyższy skrypt) będzie tajna_strona
Należy przy tym pamiętać, że zabezpieczane strony muszą mieć rozszerzenie *.html, a jeśli to niemożliwe, należy zmienić pierwszą linijkę powyższego skryptu w wyróżnionym miejscu. Nie muszę chyba przypominać, że link do takiej strony nie może pojawić się w żadnym miejscu serwisu ani na żadnej innej stronie, bo wtedy zabezpieczanie będzie zupełnie bezużyteczne, skoro dowolny użytkownik i tak będzie mógł wejść na "chronioną" stronę po prostu klikając w taki link. Jeśli nazwa strony nie będzie publicznie prezentowana, to nikt bez znajomości hasła (czyli w rzeczywistości nazwy ukrytej strony) nie będzie mógł się na nią dostać.
Oczywiście nic nie stoi na przeszkodzie, aby zabezpieczyć w ten sposób kilka różnych stron - każdą innym hasłem. Nie można zabezpieczyć jednak dwóch podstron tym samym hasłem, ponieważ każdy plik musi mieć inną nazwę. Aby zaimplementować taki mechanizm - logowanie i ewentualnie rejestrację nowych użytkowników - trzeba się posłużyć bardziej zaawansowanym skryptem obsługiwanym po stronie serwera, np. w języku PHP.
UWAGA!
Jeśli do komputera z którego korzystają użytkownicy posiadający hasło mają dostęp również inne osoby (np. użytkownicy wchodzą na zabezpieczone strony z kafejki internetowej), po zakończeniu pracy trzeba koniecznie wyczyścić tymczasowe pliki internetowe (tzw. cache przeglądarki) oraz historię w przeglądarce, która była używana. Jeśli nie zostanie to zrobione, zabezpieczenie w ogóle nie będzie skuteczne!
Ponadto konieczne jest, aby w katalogu w którym znajduje się strona chroniona hasłem umieścić plik "index.html", ponieważ bez niego na niektórych serwerach będzie można zobaczyć zawartość katalogu, a tym samym nazwę ukrytej strony, która jest jednocześnie hasłem. Plik "index.html" może być nawet pusty - ważne jest, żeby się znajdował w tym samym katalogu co tajny dokument!
<form action="..."> <input type="checkbox" name="nazwa" value="wartość" />Tu wpisz opis pola </form>
Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikatowy identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.
Jeżeli wysyłasz formularz do skryptu po stronie serwera (np. PHP lub CGI), może to wymagać nadania innej nazwy (atrybut name="...") dla każdego pola tego typu, nawet jeśli dotyczą one tego samego pytania. Jeśli chodzi o PHP jako nazwy wszystkich pól tego samego pytania można wpisać: name="nazwa[]". W takim przypadku w skrypcie będzie dostępna tablica $nazwa ($_POST['nazwa'] lub $_GET['nazwa']), a wartości kolejnych zaznaczonych elementów (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $nazwa[2] ($_POST['nazwa'][0], $_POST['nazwa'][1], $_POST['nazwa'][2] albo $_GET['nazwa'][0], $_GET['nazwa'][1], $_GET['nazwa'][2]) itd. (w zależności ile pól zostanie zaznaczonych).
Polecenie to spowoduje wyświetlenie pola w postaci kwadratu (pole wyboru), które można zaznaczyć, a także "odznaczyć", myszką. Dzięki niemu możesz wprowadzić pytanie, przy którym można wybrać kilka spośród podanych gotowych odpowiedzi.
Przykład:
Zwróć uwagę, że możesz zaznaczyć więcej niż jedno pole tego typu lub nawet nie zaznaczać żadnego. Zaznaczone pole możesz także "odznaczyć", powtórnie klikając na nie myszką:
Możliwe jest tutaj podanie dodatkowych atrybutów:
<input type="checkbox" name="nazwa" value="wartość" checked="checked" />Opis pola
Podanie atrybutu checked="checked" powoduje domyślne zaznaczenie pola. Możliwe jest zaznaczenie kilku pól tego typu, które dotyczą tego samego pytania.
Przykład:
<input type="checkbox" name="nazwa" value="wartość" disabled="disabled" />Opis pola
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład:
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:
<input type="checkbox" name="nazwa" value="wartość" id="pole1" /> <label for="pole1">To jest etykieta pola obok</label>
Polecenie takie wprowadza na ekran etykietę z tekstowym opisem pola, która jest z nim skojarzona logicznie. Dzięki temu kliknięciu etykiety powoduje zwykle taki sam efekt jak kliknięcie samego pola, tzn. jego zaznaczenie lub odznaczenie (Internet Exlorer, Netscape 6/Mozilla/Firefox, Opera 7), a dodatkowo w Windows XP wskazanie etykiety myszką spowoduje "podświetlenie" pola (Internet Exlorer). Etykieta może znajdować się w zupełnie innym miejscu jak samo pole (np. w innej komórce tabeli).
Zwróć uwagę, że wartości wyróżnionych atrybutów muszą być takie same dla etykiety oraz dla pola, którego dotyczy. Ponadto w jednym dokumencie nie mogą znajdować się dwa pola o takim samym identyfikatorze (atrybut id="...").
Etykiety można przypisywać do wszystkich typów pól formularza.
Przykład:
(spróbuj kliknąć opisy powyższych pól)
Możliwe jest przypisanie klawisza skrótu do danego pola (atrybut accesskey="klawisz"). Jeśli wciśniemy na klawiaturze kombinację Alt+klawisz (w przeglądarce Opera należy wcisnąć Shift+Esc+klawisz), zogniskowanie zostanie przeniesione do danego pola. Jeżeli będzie to pole tekstowe, pojawi się w nim kursor tekstowy, natomiast dla pola wyboru (oraz opcji) spowoduje to jego zaznaczenie/odznaczenie. O dostępnych klawiszach skrótu informuje się zwykle poprzez podkreślenie litery w opisie pola, która stanowi skrót:
<input type="checkbox" name="nazwa" value="wartość" accesskey="a" />Pole <u>a</u> (wciśnij Alt+A; jeśli używasz opery, wciśnij Shift+Esc+A)
Atrybut accesskey="..." można zastosować dla znaczników: <a>...</a>, <area />, <button>...</button>, <label>...</label>, <legend>...</legend>, <textarea>...</textarea> oraz <input />.
Przykład:
<form action="..."> <input type="radio" name="nazwa" value="wartość" />Tu wpisz opis pola </form>
Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo atrybut value="..." jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Dla zaawansowanych
Jeśli zamierzasz wykorzystać formularz w skrypcie po stronie klienta (np. JavaScript), każde pole tego typu powinno posiadać dodatkowo unikatowy identyfikator (atrybut id="..."). Żadne dwa elementy w dokumencie nie mogą mieć takiego samego identyfikatora, nawet pola dotyczące tego samego pytania. W skrypcie należy posługiwać się tymi właśnie identyfikatorami a nie nazwami.
Polecenie to spowoduje wyświetlenie okrągłego pola, które możesz zaznaczać myszką (pole opcji). W przypadku gdy istnieje więcej takich pól, jako możliwości odpowiedzi na to samo pytanie, możliwe jest zaznaczenie tylko i wyłącznie jednego z nich. Raz zaznaczone pole tego typu, można "odznaczyć" tylko poprzez zaznaczenie innego z podanych możliwości.
Polecenie to pozwala stworzyć pytanie z kilkoma możliwościami odpowiedzi, z których można wybrać tylko jedną, ponieważ np. wybranie dwóch jednocześnie, jak w przypadku checkbox, byłoby nielogiczne.
Przykład:
Zwróć uwagę, że możesz zaznaczyć (myszką) tylko jedno pole. Jeśli chcesz je "odznaczyć", musisz wybrać inną możliwość:
Możliwe jest tutaj podanie dodatkowych atrybutów:
<input type="radio" name="nazwa" value="wartość" checked="checked" />Opis pola
Podanie atrybutu checked="checked" powoduje domyślne zaznaczenie pola.
Oczywiście nie można zaznaczyć domyślnie dwóch pól tego typu, jako odpowiedzi na to samo pytanie, co wynika z ich sposobu działania.
Przykład:
<input type="radio" name="nazwa" value="wartość" disabled="disabled" />Opis pola
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład:
Do pola tego typu można również przypisać etykietę oraz klawisz skrótu.
<form action="..."> <select name="nazwa"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> (...) </select> </form>
Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <option>...</option>, można wprowadzić dla tych znaczników dodatkowe atrybuty value="wartość". Ich treść może się różnić od tekstu wpisanego po znaczniku <option>...</option>. Atrybuty value="..." są obowiązkowe, jeśli zamierzamy wykorzystać formularz w skrypcie.
Polecenie pozwala wprowadzić listę rozwijalną (menu) - inaczej zwaną również polem kombi - z której możemy wybrać jedną (typ podstawowy) lub kilka możliwości (typ rozszerzony) - za pomocą klawisza Ctrl. Każdy znacznik <option>...</option> odpowiada jednej opcji na liście. Możliwe jest oczywiście wprowadzenie więcej niż dwóch opcji wyboru (w miejsce kropek).
Przykład:
Zwróć uwagę, że po kliknięciu tego pola, rozwija się menu, z którego możesz wybrać jedną z kilku opcji.
Możliwe są tutaj dodatkowe atrybuty:
<select name="nazwa" multiple="multiple"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> </select>
Przykład:
Dodatkowe możliwości wybiera się trzymając wciśnięty klawisz Ctrl ("Control") lub przeciągając myszką:
<select name="nazwa"> <option>Tu wpisz pierwszą możliwość</option> <option selected="selected">Tu wpisz drugą możliwość<option> </select>
Aby można było zaznaczyć kilka opcji domyślnych, koniecznie należy zastosować typ rozszerzony (MULTIPLE)!
Przykład:
Zwróć uwagę, że w poniższym "okienku" jest zaznaczona domyślnie Możliwość 2, a nie jak poprzednio Możliwość 1:
<select name="nazwa" size="w"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> </select>
size="...").Przykład:
Zauważ, że jeśli wysokość pola jest większa niż ilość opcji, to nie pojawia się suwak do jego przewijania:
<select name="nazwa" disabled="disabled"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> </select>
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład:
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.
<form action="..."> <textarea name="nazwa" cols="x" rows="y">Tu wpisz tekst który pojawi się domyślnie</textarea> <form>
Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy). Pozwala ono na wprowadzenie pewnego dłuższego komentarza przez użytkownika, który wypełnia formularz. Można także podać między znacznikami <textarea> a </textarea> treść domyślną, która pojawi się w tym polu (możliwe jest oczywiście jej późniejsze wymazanie przez użytkownika).
Wewnątrz <textarea>...</textarea> (w treści domyślnej) znaczniki nie są interpretowane - jeśli je wpiszemy, pojawią się w polu jako zwykły tekst. Przejście do następnej linii następuje poprzez klawisz Enter. Uwzględniane są dodatkowe spacje oraz tabulacja.
Przykład:
To jest przykład pola komentarza bez podania treści domyślnej:
Możliwe jest tu podanie dodatkowych atrybutów:
<textarea name="nazwa" cols="x" rows="y" readonly="readonly">...</textarea>
Wstawienie atrybutu readonly="readonly" powoduje, że tekstu zapisanego domyślnie w tym polu, nie będzie można modyfikować.
Przykład:
<textarea name="nazwa" cols="x" rows="y" disabled="disabled">...</textarea>
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
UWAGA!
Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Przykład:
<textarea name="nazwa" cols="x" rows="y" wrap="rodzaj">...</textarea>
Dwie ostatnie metody niczym widocznym się nie różnią, jedynie w formularzu tekst będzie przesłany w różnych formach.
Atrybut WRAP nie wchodzi w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.
Przykład:
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora [zobacz także: Kolor suwaków].
<form action="..."> <input type="file" name="nazwa" /> </form>
Polecenie wprowadza selektor plików, składający się z dwóch pól (np. w Internet Explorerze):
Selektor plików został wprowadzony teoretycznie po to, aby można było przesłać wybrany plik w załączniku do listu (formularza). Wtedy dla znacznika <form>...</form> należałoby dodatkowo użyć atrybut enctype="multipart/form-data". Niestety przeglądarki raczej nie interpretują tego polecenia. Jedynie Netscape przesyła załącznik, ale tylko tekstowy, choć polskie znaki mogą zostać błędnie wyświetlone. Natomiast w Internet Explorerze (6), jeśli użyjemy dla znacznika <form>...</form> podany wcześniej atrybut, a także w formularzu istnieje chociaż jeden selektor plików, to nie zostanie przesłany nie tylko załącznik, ale nawet dane z innych pól! Natomiast jeżeli atrybut enctype="..." nie zostanie podany, albo wpiszemy enctype="text/plain" (forma odszyfrowana), z formularzem zostanie przesłana jedynie ścieżka dostępu, wprowadzona do selektora plików.
Dla zaawansowanych
Wysyłanie plików w załączniku jest natomiast obsługiwane m.in. przez PHP (należy wtedy dla znacznika <form>...</form> konieczne podać atrybut: enctype="multipart/form-data").
Przykład:
Zwróć uwagę, że po kliknięciu przycisku, otwiera się okienko z systemowym selektorem plików, a jeśli wybierzesz w nim jakiś plik, to w polu tekstowym pojawi się bezwzględna ścieżka dostępu do niego.
Możliwe jest także podanie dodatkowych atrybutów:
<input type="file" name="nazwa" size="k" />
size="...".Przykład:
<input type="file" name="nazwa" disabled="disabled" />
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
Przykład:
<form action="..."> <input type="hidden" name="nazwa" value="wartość" /> </form>
Polecenie takie tworzy ukryte pole w formularzu. Nie jest ono widoczne ani dostępne dla użytkownika, ale jego wartość (value="wartość") jest przesyłana wraz z formularzem. Może ono służyć np. dla podania informacji o numerze wersji ankiety, dacie jej ostatniej aktualizacji, adresu strony, z której została wysłana, opisu całego formularza lub też poszczególnych jego pól.
Dla zaawansowanych
Ukryte dane są często wykorzystywane do przekazywania informacji pomiędzy klientem a serwerem (skrypty po stronie serwera), które w przeciwnym razie zostałyby utracone, z uwagi na bezstanowy charakter protokołu HTTP.
<form action="..."> <input type="submit" value="wartość" /> </form>
Polecenie wprowadza na ekran przycisk z tekstem, po naciśnięciu którego, nastąpi wysłanie formularza.
Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.
Przykład:
<form action="..."> <input type="submit" value="wartość" disabled="disabled" /> </form>
Wstawienie atrybutu disabled="disabled" powoduje zablokowanie pola.
Przykład:
<form action="..."> <input type="image" src="ścieżka dostępu do obrazka" alt="informacja alternatywna" /> </form>
Polecenie wprowadza na ekran przycisk w postaci obrazka, po naciśnięciu którego, nastąpi wysłanie formularza. Atrybut alt="..." pozwala podać tekst, który będzie wyświetlony zamiast przycisku w przeglądarkach tekstowych, a także jeśli użytkownik wyłączy w swojej przeglądarce wyświetlanie obrazów.
Przykład:
Możesz kliknąć poniższy obrazek, aby wysłać formularz:
Przydatna własność
Pole wysłania formularza posiada ciekawą własność. Mianowicie jeżeli nadamy mu atrybut name="nazwa", wtedy jego wartość zostanie wysłana wraz z formularzem, tak jak to się dzieje w przypadku zwykłych pól przechowujących wpisywane przez użytkownika dane. Nowość polega jednak na tym, że w jednym formularzu może się znajdować kilka różnych pól wysyłających, każde z nich może mieć inną nazwę lub/i wartość, a z formularzem jest wysyłana wartość tylko tego, za pomocą którego został on wysłany - tzn. tego, który został kliknięty. Dzięki temu w niektórych przypadkach prostych formularzy nie trzeba wstawiać dodatkowych pól typu RADIO, a wystarczy umieścić po prostu kilka różnych przycisków wysyłających.
Nie dotyczy to alternatywnego sposobu wysyłania formularzy - wtedy trzeba stosować metody konwencjonalne.
Przykład:
<form action="mailto:e-mail" method="post"> <input type="submit" name="opcja" value="Opcja 1" /> <input type="submit" name="opcja" value="Opcja 2" /> <input type="submit" name="opcja" value="Opcja 3" /> </form>
Z takim formularzem zostanie wysłana tylko jedna z wartości:
w zależności o tego, który przycisk wciśnie użytkownik. Zatem będzie to równoznaczne z następującym konwencjonalnym formularzem:
<form action="mailto:e-mail" method="post"> <input type="radio" name="opcja" value="Opcja 1" /> <input type="radio" name="opcja" value="Opcja 2" /> <input type="radio" name="opcja" value="Opcja 3" /> <input type="submit" value="wyślij" /> </form>
W skryptach np. PHP własność tą często wykorzystuje się do potwierdzania decyzji użytkownika:
<form action="?akcja=kasowanie" method="post"> <input type="hidden" name="id" value="1" /> <p>Czy na pewno chcesz to zrobić?</p> <input type="submit" name="potwierdzenie" value="Tak" /> <input type="submit" name="potwierdzenie" value="Nie" /> </form>
<form action="..."> <input type="reset" value="wartość" /> </form>
Komenda wyświetla na ekranie przycisk, po naciśnięciu którego, nastąpi wyczyszczenie wszystkich udzielonych do tej pory odpowiedzi w ankiecie (np. jeśli się rozmyślimy).
Przykład:
xWypełnij formularz, a następnie kliknij jeden z poniższych przycisków:
Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony).
Możliwe jest także zablokowanie przycisku (nie obsługuje Opera 6):
<form action="..."> <input type="reset" value="wartość" disabled="disabled" /> </form>
Przykład:
Przed wyczyszczeniem całego formularza, można się upewnić, czy użytkownik na pewno chce to zrobić. Dzięki temu wyeliminujemy możliwość przypadkowego naciśnięcia przycisku "reset". Ma to szczególne znaczenie zwłaszcza w przypadku długich formularzy, przy których ponowne wpisywanie wszystkich danych trwałoby dość długo.
Aby potwierdzić wyczyszczenie formularza, należy do znacznika <form> dodać atrybut onreset="...":
<form action="adres" method="post" onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">...</form>
Przykład:
<button type="rodzaj">Treść przycisku</button>
Wprowadza na ekran przycisk. Polecenie to jest zbliżone do przycisków: wysłania oraz wyczyszczenia formularza, a także do: <input type="button" value="napis" />. Jednak pozwala ono dodatkowo, wprowadzić do przycisku grafikę, tabelkę i inne elementy - wystarczy umieścić dodatkowe znaczniki pomiędzy <button> a </button> (w miejsce treści przycisku). Można również dowolnie formatować tekst, np. wprowadzając pogrubienie, pochylenie i inne. W przypadku zastosowania type="button" na ekranie pojawi się przycisk, po kliknięciu którego, nie nastąpi żadna akcja. Aby to zmienić, należy przechwycić wygenerowane zdarzenie onclick. Natomiast Netscape 7 oraz Opera 6, 7 traktują <button>...</button> jak przycisk wysłania formularza.
Przykład:
W Windows XP w Internet Explorerze wygląd przycisków o dużych rozmiarach może być bardzo nieestetyczny!
<fieldset> (Pola formularza) </fieldset>
<fieldset> <legend>Tytuł</legend> (Pola formularza) </fieldset>
<fieldset> <legend align="rodzaj">Tytuł</legend> (Pola formularza) </fieldset>
Atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01.
Pozwala zgrupować tematycznie kilka pól formularza, dzięki czemu zostają one objęte ramką. W drugiej z podanych wersji, powoduje pojawienie się tytułu na ramce grupującej. Możliwe jest określenie ułożenia tytułu, poprzez ustalenie atrybutu align="..." dla znacznika <legend>...</legend> (trzecia wersja).
UWAGA! Znacznik <legend>...</legend> (tytuł ramki grupującej) musi znajdować się bezpośrednio po znaczniku otwierającym <fieldset>.
Atrybut align="..." nie jest obsługiwany przez Netscape 6, natomiast Opera 6 wcale nie obsługuje znacznika <legend>...</legend>!
Wygląd ramki grupującej może się różnić w zależności od przeglądarki.
Przykład:
<form action="..." enctype="text/plain">...</form>
Formularze są wysyłane w formie zakodowanej, np. możesz otrzymać coś takiego:
Imi%EA=S%B3awomir&Nazwisko=Kok%B3owski&P%B3e%E6=M%EA%BFczyzna&Wiek=20-29&Muzyka=Rock&Muzyka=Elektroniczna&Przegl%B9darka=Opera&System+operacyjny=Dos&System+operacyjny=Windows&System+operacyjny=Linux&Komentarz=Prosz%EA%2C+wpisz+tutaj+jaki%9C+komentarz...
Powyższy atrybut (enctype="text/plain") powoduje, że wszystkie formularze będą przysyłane w formie odszyfrowanej, dla powyższego przykładu jest to:
Imię=Sławomir Nazwisko=Kokłowski Płeć=Mężczyzna Wiek=20-29 Muzyka=Rock Muzyka=Inna Muzyka=Elektroniczna Przeglądarka=Opera System operacyjny=Dos System operacyjny=Windows System operacyjny=Linux Komentarz=Proszę, wpisz tutaj jakiś komentarz...
Prawda, że łatwiej przeczytać coś takiego? Zatem staraj się zawsze używać tej metody w formularzach pocztowych, ponieważ może Ci ona zaoszczędzić dużo czasu na odszyfrowywanie przysłanych danych. Nie ma to natomiast większego znaczenia, w przypadku wykorzystywania formularza w skryptach (po stronie klienta lub serwera).
UWAGA!
Jeśli na stronie WWW została zdeklarowana zalecana w polskim Internecie strona kodowa iso-8859-2, a jednocześnie używaną przeglądarką jest Internet Explorer 5 lub 6 (program pocztowy Outlook Express 5 lub 6), to w przesyłanym formularzu, w miejscu niektórych polskich liter (ą, ś, ź, Ą, Ś, Ź), wystąpią błędne znaki!
Błędów prawdopodobnie nie będzie, jeśli w systemie Windows użyjemy stronę kodową windows-1250, ale nie jest ona zalecanym standardem międzynarodowym i dlatego niestety w innych przeglądarkach polskie litery na całej stronie mogą wtedy zostać błędnie wyświetlone (gdy przeglądarka nie obsługuje takiego standardu).
Jeżeli bardzo przeszkadzają Ci błędne litery w przysyłanych formularzach, rozwiązaniem problemu może być zastosowanie mimo wszystko strony kodowej windows-1250, nawet jeśli w niektórych przypadkach miałoby to spowodować błędne wyświetlanie polskich znaków na stronie. Dobre przeglądarki powinny interpretować taką stronę kodową, a poza tym w Polsce większość internautów używa Internet Explorera (który oczywiście poprawnie interpretuje kodowanie windows-1250), zatem ryzyko jest niewielkie. Natomiast na wszystkich innych stronach serwisu powinniśmy nadal używać kodowania iso-8859-2.
Teoretycznie rzecz biorąc, właśnie na taką okoliczność dla znacznika <form>...</form> został stworzony atrybut accept-charset="...", gdzie jako jego wartość należy podać oznaczenie akceptowanej przez program strony kodowej. Jednak biorąc pod uwagę wszystkie możliwe interakcje pomiędzy różnymi programami pocztowymi w różnych systemach operacyjnych i z różnymi przeglądarkami WWW, niestety trudno jest spodziewać się poprawnych znaków diakrytycznych w treści przesyłanych formularzy pocztowych :-(
Innym sposobem rozwiązania problemu jest automatyczne usunięcie przed wysłaniem formularza wszystkich polskich znaków, które mógł podać użytkownik. Odnosi się to do pól tekstowych oraz obszarów tekstowych. Jeśli chodzi o inne pola (np. checkbox, radio), dla nich możesz samodzielnie wpisać w treści atrybutów value="..." tekst bez polskich znaków. Atrybut ten można również podać dla znacznika <option>...</option> (lista rozwijalna):
<select name="nazwa"> <option value="acelnoszz">ąćęłńóśźż</option> <option value="ACELNOSZZ">ĄĆĘŁŃÓŚŹŻ</option> </select>
Zwróć uwagę, że tekst po znaczniku <option> może się różnić od wartości atrybutu value="...". W ten sposób użytkownik wypełniający formularz, zobaczy poprawne polskie litery.
Aby automatycznie usunąć polskie znaki z pól tekstowych i komentarza, można umieścić przed formularzem odpowiedni skrypt:
<script type="text/javascript"> // <![CDATA[ function usun_pl(formularz) { for (i = 0; i < formularz.length; i++) { var pole = formularz.elements[i]; if (pole.type != "text" && pole.type != "textarea") continue; var str = ""; for (j = 0; j < pole.value.length; j++) { switch (pole.value.charat(j)) { case "ą": str += "a"; break; case "ć": str += "c"; break; case "ę": str += "e"; break; case "ł": str += "l"; break; case "ń": str += "n"; break; case "ó": str += "o"; break; case "ś": str += "s"; break; case "ź": str += "z"; break; case "ż": str += "z"; break; case "Ą": str += "a"; break; case "Ć": str += "c"; break; case "Ę": str += "e"; break; case "Ł": str += "l"; break; case "Ń": str += "n"; break; case "Ó": str += "o"; break; case "Ś": str += "s"; break; case "Ź": str += "z"; break; case "Ż": str += "z"; break; default: str += pole.value.charat(j); break; } } pole.value = str; } } // ]]> </script> <form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this)"> (Pola formularza) </form>
Zwróć uwagę, aby dodać atrybut onsubmit="usun_pl(this)" do znacznika <form>!
Jeśli jeszcze niezbyt dobrze rozumiesz formularze, specjalnie dla Ciebie napisałem ten przykład. Myślę, że po jego przeczytaniu, wyjaśni się wiele niezrozumiałych dotąd rzeczy.
Wyróżnione fragmenty, można (a nawet trzeba) zastąpić innym tekstem. Są to np. pytania, poszczególne odpowiedzi, wartości parametrów i inne. Czcionką pogróbioną (pomiędzy znakami <!-- a -->) zaznaczono komentarze. Nie są one oczywiście konieczne (możesz je pominąć). Natomiast pozwalają zorientować się, czego dotyczy fragment kodu poniżej nich.
<form action="mailto:twój_adres_poczty@domena" method="post" enctype="text/plain"><div> <!-- Podstawowe pole tekstowe --> <input name="Imię" />Podaj swoje imię<br /> <input name="Nazwisko" />Podaj swoje nazwisko <!-- Pole typu RADIO --> <p>Podaj swoją płeć:</p> <input type="radio" name="Płeć" value="Kobieta" />Kobieta <input type="radio" name="Płeć" value="Mężczyzna" />Mężczyzna <!-- Pole typu RADIO --> <p>Ile masz lat?</p> <input type="radio" name="Wiek" value="mniej niż 15" />mniej niż 15<br /> <input type="radio" name="Wiek" value="15-19" />15-19<br /> <input type="radio" name="Wiek" value="20-29" />20-29<br /> <input type="radio" name="Wiek" value="30-39" />30-39<br /> <input type="radio" name="Wiek" value="40-60" />40-60<br /> <input type="radio" name="Wiek" value="więcej niż 60" />więcej niż 60 <!-- Pole typu CHECKBOX --> <p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p> <input type="checkbox" name="Muzyka" value="Rock" />Rock<br /> <input type="checkbox" name="Muzyka" value="Heavy Metal" />Heavy Metal<br /> <input type="checkbox" name="Muzyka" value="Pop" />Pop<br /> <input type="checkbox" name="Muzyka" value="Techno" />Techno<br /> <input type="checkbox" name="Muzyka" value="Muzyka poważna" />Muzyka poważna<br /> <input type="checkbox" name="Muzyka" value="Inna" />Inna (podaj jaka): <input name="Muzyka" /> <!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną --> <p>Jakiej przeglądarki internetowej używasz?</p> <select name="Przeglądarka"> <option selected="selected">Internet Explorer</option> <option>Netscape</option> <option>Opera</option> <option>Mozilla</option> <option>Inna</option> </select> <!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością --> <p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p> <select name="System operacyjny" multiple="multiple" size="3"> <option selected="selected">Dos</option> <option>Windows</option> <option>Linux</option> <option>Inny</option> </select> <!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) --> <p>Podaj swój komentarz:</p> <textarea name="Komentarz" cols="50" rows="10">Proszę, wpisz tutaj jakiś komentarz...</textarea> <br /><br /><br /> <!-- Przycisk WYŚLIJ --> <input type="submit" value="Wyślij formularz" /> <!-- Przycisk WYCZYŚĆ DANE --> <input type="reset" value="Wyczyść dane" /> </div></form>
A oto co otrzymamy po wpisaniu powyższego tekstu:
(możesz kliknąć przycisk "Wyślij formularz", aby zobaczyć szybki efekt, bez wysyłania danych)
Aby ustalić dokładne położenie pól formularza, zwykle umieszcza się je w komórkach tabeli. W ten sposób możliwe jest np. ustawienie opisów w lewej kolumnie, a samych pól w równej odległości po prawej (nie dotyczy to pól wyboru, opcji itp., do których użytkownik nie może wpisywać tekstu). Jeśli zrobimy to bez tabeli, pola będą poukładane nierówno z powodu różnej długości opisów. Na przykład po wpisaniu:
<form action="mailto:e-mail" method="post" enctype="text/plain"><div> <table bgcolor="silver"> <tr> <td>Imię:</td><td><input type="text" name="imie" /></td> </tr> <tr> <td>Nazwisko:</td><td><input type="text" name="nazwisko" /></td> </tr> <tr> <br /> <td colspan="2" align="center"><br /> <input type="submit" value="Wyślij" /> <input type="reset" value="Wyczyść" /> </td> </tr> </table> </div></form>
otrzymamy:
Jeśli chcemy, aby opisy w lewej kolumnie przylegały do pól formularza (wyrównanie do prawej), wystarczy dla komórek tabeli <td> (lub pierwszej kolumny) dodać atrybut align="right".
Niestety opisany w tym rozdziale sposób wysyłania prostych formularzy pocztowych nie zawsze działa poprawnie :-( Otóż np. dla Windows XP pojawiła się aktualizacja systemu, po zainstalowaniu której zamiast automatycznego wysłania formularza, otwiera się program pocztowy z pustą wiadomością. Wysłanie takiego listu oczywiście nie przyniesie żadnych korzyści, ponieważ nie będzie on miał treści. Sposobem na ominięcie tej luki może być skorzystanie ze skryptu PHP, który potrafi wysłać formularz w ogóle bez potrzeby używania programu pocztowego przez użytkownika. Niestety nie zawsze nasz serwer WWW obsługuje skrypty PHP, a jeśli nawet, to często właśnie funkcja odpowiadająca za wysyłanie listów jest zablokowana przez administratora. Można sobie jednak poradzić stosując bardzo prosty skrypt JavaScript, do obsługi którego nie potrzebne są żadne dodatkowe funkcje na serwerze WWW. Dzięki niemu możemy próbować ominąć opisany błąd systemowy.
Aby zastosować taki skrypt, wstaw przed formularzem (najlepiej w treści nagłówkowej dokumentu) następujący kod:
<script type="text/javascript"> // <![CDATA[ // www.kurshtml.boo.pl function mail_form(f) { for (var i = 0, text = ''; i < f.elements.length; i++) { if (f.elements[i].name == '') continue; switch (f.elements[i].type) { case 'text': case 'password': case 'hidden': case 'textarea': for (var j = 0, temp = ''; j < f.elements[i].value.length; j++) { if (f.elements[i].value.charAt(j) == "\n") temp += "%0A"; else temp += f.elements[i].value.charAt(j); } text += f.elements[i].name + '=' + temp + "%0A"; break; case 'radio': case 'checkbox': if (f.elements[i].checked) text += f.elements[i].name + '=' + f.elements[i].value + "%0A"; break; case 'select': case 'select-one': case 'select-multiple': for (var j = 0; j < f.elements[i].options.length; j++) if (f.elements[i].options[j].selected) text += f.elements[i].name + '=' + (f.elements[i].options[j].value != '' ? f.elements[i].options[j].value : f.elements[i].options[j].text) + "%0A"; break; default: text += f.elements[i].name + '=' + f.elements[i].value + "%0A"; break; } } window.location.href = f.action + (f.action.indexOf('?') == -1 ? '?' : '&') + 'body=' + text; } // ]]> </script>
Na koniec musisz tylko dodać do znacznika <form> formularza atrybut: onsubmit="mail_form(this); return false", np.:
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="mail_form(this); return false"> (Pola formularza) </form>
Działanie tego skryptu nie jest identyczne jak w przypadku prostego formularza pocztowego. Podczas gdy normalny formularz jest automatycznie wysyłany, w tym przypadku zostanie otwarte okno programu pocztowego użytkownika z wypełnioną na podstawie danych z formularza treścią. Treść tą użytkownik będzie mógł wyedytować, a następnie będzie trzeba kliknąć przycisk wysyłający list. Jednak pomimo różnic i pewnych niedogodności (np. możliwość ręcznej zmiany treści) takie działanie jest chyba raczej lepsze niż zupełny brak możliwości wysłania prostego formularza pocztowego z poziomu strony WWW. Problem ten dotyka naprawdę dużą grupę internautów. Jest bardzo prawdopodobne, że również czytelnicy Twojej strony mają problemy z wysłaniem do Ciebie formularza umieszczonego w serwisie.
UWAGA!
Istnieje duże prawdopodobieństwo, że w formularzu zamiast polskich liter mogą się pojawić nieoczekiwane znaki. Dlatego zaleca się dołączenie również skryptu odpowiadającego za automatyczne usunięcie polskich liter przed wysłaniem formularza.
Aby to zrobić, przed formularzem należy umieścić oba skrypty, a potem następująco zmodyfikować znacznik <form>
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain" onsubmit="usun_pl(this); mail_form(this); return false"> (Pola formularza) </form>
Do wysyłania formularzy opisanych w tym rozdziale konieczny jest program pocztowy, np. MS Outlook, Mozilla Thunderbird lub inny. Program taki musi posiadać zainstalowany i skonfigurowany w swoim systemie operacyjnym użytkownik, który chce wysłać do nas formularz pocztowy. Problem w tym, że część użytkowników w ogóle takiego programu nie posiada, ponieważ swoją pocztę odczytują za pomocą tzw. aplikacji webmail, czyli specjalnej strony WWW. Takie strony-aplikacje udostępniają wszystkie duże portale oferujące darmowe konta e-mail.
Użytkownicy, którzy nie posiadają skonfigurowanego programu pocztowego, ponieważ np. korzystają z systemu webmail, nie będą w stanie wysłać formularza pocztowego.
Jak się przed tym zabezpieczyć? W języku HTML ani nawet JavaScript nic nie da się zrobić. Z pomocą przychodzą skrypty obsługiwane po stronie serwera, jak np. PHP. Aby skorzystać z tego rozwiązania, serwer na którym znajduje się strona przede wszystkim musi obsługiwać PHP. Niestety nie jest to normą. Co więcej, funkcja służąca do wysyłania listów e-mail (pod nazwą: mail) za pośrednictwem skryptów PHP musi być włączona. Niestety administratorzy, zwłaszcza darmowych serwerów, czasami blokują tę funkcję, aby konta nie były wykorzystywane do rozsyłania spamu. O tym, czy Twój serwer WWW obsługuje skrypty PHP i czy funkcja mail nie została zablokowana, możesz się zwykle przekonać odwiedzając stronę domową danego serwera lub kontaktując się z administratorem serwera.
Jeżeli Twój serwer nie obsługuje skryptów PHP albo funkcja mail wysyłająca listy elektroniczne jest zablokowana, jedynym rozwiązaniem dla Ciebie będzie skorzystanie z darmowych komponentów przetwarzających dowolne formularze i wysyłających wynik na wskazany adres e-mail. Jedyne co musisz w takim przypadku zrobić, to zarejestrować się w wybranym serwisie, który oferuje takie komponenty i założyć, a potem skonfigurować odpowiedni komponent.
Przedstawiony poniżej opis zakłada, że Twój serwer jednak obsługuje skrypty PHP, a funkcja mail nie została zablokowana. Ponadto zwracam uwagę, że poniższy skrypt zadziała dopiero po wprowadzaniu strony na serwer WWW. Nie będzie można go przetestować na swoim dysku lokalnym, a co więcej sam wygląd formularza może być wtedy nieprawidłowy.
Aby wysłać formularz bez pośrednictwa programu pocztowego, należy utworzyć normalną stronę HTML. Ważne jest tylko, aby plikowi nadać rozszerzenie *.php, a nie *.html, czyli np. formularz.php. Jeżeli nie dopełnisz tego warunku, skrypt nie zadziała!
<?php
if (count($_POST))
{
////////// USTAWIENIA //////////
$email = 'adres e-mail gdzie wysłać formularz'; // Adres e-mail adresata
$subject = 'temat'; // Temat listu
$message = 'Dziękujemy za wysłanie formularza'; // Komunikat
$error = 'Wystąpił błąd podczas wysyłania formularza'; // Komunikat błędu
$charset = 'iso-8859-2'; // Strona kodowa
//////////////////////////////
$head =
"MIME-Version: 1.0\r\n" .
"Content-Type: text/plain; charset=$charset\r\n" .
"Content-Transfer-Encoding: 8bit";
$body = '';
foreach ($_POST as $name => $value)
{
if (is_array($value))
{
for ($i = 0; $i < count($value); $i++)
{
$body .= "$name=$value[$i]\r\n";
}
}
else $body .= "$name=$value\r\n";
}
echo mail($email, "=?$charset?B?" . base64_encode($subject) . "?=", $body, $head) ? $message : $error;
}
else
{
?>
<form action="?" method="post">
Tutaj umieść wszystkie pola formularza
</form>
<?php
}
?>
Zwróć uwagę na specjalną formę znacznika <form>...</form> - nie należy nic w niej zmieniać. We właściwej treści formularza nie wolno już umieszczać drugiego znacznika <form>...</form>. Zauważ także, że za znacznikiem zamykającym </form> znajduje się jeszcze dodatkowy krótki blok kodu. Nie zapomnij go wpisać!
Jeżeli w formularzu takim znajdują się pola wyboru (<input type="checkbox" />) albo lista rozwijalna z możliwością wyboru kilku opcji - typ rozszerzony (<select multiple="multiple">...</select>), na końcu nazwy każdego pola typu checkbox oraz w nazwie takiego elementu select, obowiązkowo należy postawić pusty nawias kwadratowy: []. Wewnątrz tych nawiasów nie może być żadnego znaku, nawet spacji!
Przykład:
<p>Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?</p> <input type="checkbox" name="Muzyka[]" value="Rock" />Rock<br /> <input type="checkbox" name="Muzyka[]" value="Heavy Metal" />Heavy Metal<br /> <input type="checkbox" name="Muzyka[]" value="Pop" />Pop<br /> <input type="checkbox" name="Muzyka[]" value="Techno" />Techno<br /> <input type="checkbox" name="Muzyka[]" value="Muzyka poważna" />Muzyka poważna<br /> <input type="checkbox" name="Muzyka[]" value="Inna" />Inna (podaj jaka): <input name="Muzyka[]" /> <p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p> <select name="System operacyjny[]" multiple="multiple" size="3"> <option selected="selected">Dos</option> <option>Windows</option> <option>Linux</option> <option>Inny</option> </select>
Sprawdź swoją wiedzę, nabytą w tym rozdziale, rozwiązując testowy QUIZ.