KOLEJ.pl - Jak założyć własny formularz ?

Prędzej, czy później każdy webmaster pragnie mieć na swojej stronie formularz. To chyba drugi (po poczcie elektronicznej) sposób na poznanie bliżej odwiedzających stronę WWW, choć nie tylko - może być to także strona typu "Zredaguj list i wyślij".

Zazwyczaj pierwsze kroki kończą się na formularzu wywyłającym dane prosto na adres e-mail. Wszystko fajnie pięknie, ja też tak zaczynałem. Szybko jednak przekonałem się, że ten sposób nie działa z wieloma przeglądarkami, nieraz powoduje błędy, etc. Nie pozostało nic innego jak zainstalowanie odpowiedniego skryptu CGI, bądź skorzystanie z usług serwisu, który oferuje darmowe formularze. CGI na darmowym koncie instalować nie mogłem, z usług serwisów które wrzucały swoje bannery reklamowe też nie skorzystałem.
Zaraz zapytasz się zapewne Drogi Czytelniku co w takim razie zrobiłem... Ano nic. Wyrzuciłem formularz ;)

Oczywiście użytkownicy KOLEJ.pl nie muszą dokonywać tak drastycznych wyborów, mają pod ręką gotowy skrypt przetwarzający dane. Sprawa jest o tyle prosta, że strona z formularzem/ankietą/subskrypcją/podziękowaniami za wypełnienie może być wykonana według własnego gustu użytkownika.
Zakładam, że użytkownik posiada wiedzę w zakresie tworzenia formularzy w HTML i JavaScriptu.

DO DZIEŁA.
Aby zrealizować nasz cel potrzebne są dwa pliki (nazwy podaję przykładowe, mogą być dowolne): formularz.html i dzieki.html.
Pierwszy plik będzie zawierał kompletny formularz, a drugi podziękowania za wypełnienie i wysłanie tego pierwszego. Oczywiście drugi plik koniecznie istnieć nie musi, można w podziękowaniu wykorzystać np. stronę główną KOLEJ.pl ;)) Żeby tak bardzo nie zagmatwać, to wyjaśnię, że osoba, która wypełni formularz po naciśnięciu przycisku "Wyślij" jest przekierowywana na inną stronę, którą mogą być np. podziękowania za wypełnienie tegoż formularza.
Poniżej widzimy przykład takiego formularza:

Przykładowy formularz

Powyższy formularz jest nieco ascetyczny, ale pamiętajmy iż stanowi tylko punkt wyjściowy do tworzenia formularzy w/g własnych upodobań.
Prześledźmy teraz jego uproszczone źródło:

 <FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST>
 <INPUT TYPE="text" NAME="realname" VALUE="">
 <INPUT TYPE="text" NAME="email" VALUE="">
 <INPUT TYPE="text" name="subject" VALUE="">
 <TEXTAREA NAME="Wiadomosc" ROWS=6 COLS=60></TEXTAREA>
 <INPUT TYPE="submit" VALUE=" wyślij "> <INPUT TYPE="reset" VALUE=" skasuj ">
 <INPUT TYPE="hidden" name="required" VALUE="email">
 <INPUT TYPE="hidden" name="required" VALUE="realname">
 <INPUT TYPE="hidden" NAME="redirect" VALUE="/stacja.html">
 <INPUT TYPE="hidden" name="recipient" VALUE="webmaster@kolej.pl">
 </FORM>

Kod celowo zabarwiłem, aby można było łatwo rozróżnić jego poszczególne części składowe:

definicję (ramy) formularza
pola widoczne
pola sterujące (ukryte)

Teraz parę słów bliższych wyjaśnień:

<FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST>
...
</FORM>
- ten fragment kodu pozostaje niezmienny, nie trzeba go modyfikować, chyba, że bedzie tu funkcjonować skrypt analizujący poprawność wypełnienia formularza, o którym dalej.

<INPUT TYPE="text" NAME="realname" VALUE="">
Pole realname służy do podawania imienia/nazwiska/nicka/ksywki osoby wypełniającej formularz.

<INPUT TYPE="text" NAME="email" VALUE="">
Pole email służy do podania adresu e-mail w/w osoby.

<INPUT TYPE="text" name="subject" VALUE="">
W tym polu można podać temat listu. Oczywiście może być ono ukryte (hidden) i mieć domyślny temat narzucony przez autora WWW, czyli Ciebie.

<TEXTAREA NAME="Wiadomosc" ROWS=6 COLS=60></TEXTAREA>
Tu znajdzie się treść wiadomości (body) do przesłania.

<INPUT TYPE="submit" VALUE=" wyślij ">
<INPUT TYPE="reset" VALUE=" skasuj ">
Tych dwóch przycisków omawiać nie trzeba... ;))

<INPUT TYPE="hidden" name="required" VALUE="email">
<INPUT TYPE="hidden" name="required" VALUE="realname">
Parametr required wskazuje skryptowi, które pola muszą zawierać dane. W przypadku gdy nie zostaną wypełnione skrypt będzie monitował o ich powtórne wypełnienie. Ta definicja powinna się znajdować tyle razy, ile jest pól, które wymagają wypełnienia (w tym przypadku są to dwa pola).

<INPUT TYPE="hidden" NAME="redirect" VALUE="/stacja.html">
Wartość VALUE tego pola, to adres strony z podziękowaniami, którą Internauta zobaczy po wypełnieniu formularza.

<INPUT TYPE="hidden" name="recipient" VALUE="userid@kolej.pl">
W tym polu znajduje się adres osoby, do której trafią dane z formularza, czyli (krótko mówiąc) Twój adres.

CO DALEJ?
W zasadzie powyższe wskazówki umożliwiają uruchomienie formularza, była jednak mowa o wykorzystaniu JavaScriptu. Owszem. Javascript (nie mylić z Apletami Javy) to mechanizm wykorzystywany z reguły do uatrakcyjniania stron WWW, lecz tutaj zajmiemy się jego praktycznym wykorzystaniem. Tych parę linijek skryptu będzie odpowiedzialnych za kontrolę poprawności wypełnienia formularza.
Zaraz, zaraz - zapyta każdy, przecież tym zajmuje się nasz skrypt CGI poprzez pola required!
Oczywiście, ale CGI dokonuje kontroli po stronie serwera, czyli dane z formularza są przesyłane przez sieć do serwera, tam porównywane przez CGI i odsyłane z powrotem w postaci strony z podziękowaniami, albo monitem o ponowne wypełnienie jeśli jakieś pole posiada niewłaściwe dane, lub w ogóle ich nie posiada. Oczywiście można dokonać kontroli danych w przeglądarce użytkownika, co eliminuje niepotrzebną "korespondencję" z serwerem, i tu przychodzi nam z pomocą JavaScript. Korzyści takiego rozwiązania jest kilka, a zasadnicza to szybkość sprawdzania formularza.

No dobrze, ale po co kontrola w CGI, skoro mamy JavaScript?
Powód jest prosty - nie wszystkie przeglądarki go obsługują. Więc jeśli jakaś przeglądarka nie rozumie JavaScriptu, to zrobi to za nią CGI.

Po tym wstępie przyjrzymy się kodowi JavaScriptu:


 <script language="JavaScript" type="text/javascript">
 <!-- Hide it
 function validate_form() {
  validity = true;
  if (!check_empty(document.form.realname.value))
  	{ validity = false; alert('Brakuje imienia i nazwiska...'); }
  if (!check_email(document.form.email.value))
  	{ validity = false; alert('Podany adres e-mail nie jest poprawny'); }
  return validity;
}

function check_empty(text) {
	  return (text.length > 0);
}
function check_email(address) {
  if ((address == "")
    || (address.indexOf ('@') == -1)
    || (address.indexOf ('.') == -1))
      return false;
  return true;
}
// -->
</script>

Powyższy kod powinien się znaleźć w sekcji <HEAD> dokumentu. Nie będę opisywał go bliżej, zajmiemy się tylko najważnieszymi linijkami:

if (!check_empty(document.form.realname.value))
  	{ validity = false; alert('Brakuje imienia i nazwiska...'); }

Ta linijka jest odpowiedzialna za sprawdzenie, czy pole realname (imię/nazwisko/nick/xsywa) nie jest puste - odpowiada za to funkcja !check_empty. Zdanie na różowo to komentarz wyświetlany w przypadku nie wypełnienia pola. Jeśli chcesz też sprawdzić, czy np. pole subject (Temat listu) nie jest puste, dorzucasz następną linijkę odpowiednio modyfikując nazwę pola i komentarz:

if (!check_empty(document.form.subject.value))
  	{ validity = false; alert('nie wpisałeś tematu listu!'); }

Należy pamiętać, że nazwy pól są definiowane w formularzu przez parametr name="nazwapola" i muszą się zgadzać z tymi podanymi w kodzie JavaScriptu.

Oddzielną sprawą jest sprawdzenie poprawności wpisania adresu e-mail, który musi posiadać znak "@" i przynajmniej kilka liter. Korzystamy więc z funkcji !check_email:

if (!check_email(document.form.email.value))
  	{ validity = false; alert('Podany adres e-mail nie jest poprawny'); }

Należy jeszcze odpowiednio zmodyfikować definicję formularza:

<FORM ACTION="/cgi-bin/formmail.pl" METHOD=POST name="form" onSubmit="return validate_form()">

I gotowe.

Jeśli jednak miałbyś trudności z uruchomieniem tego wszystkiego, to:
a) przeczytaj kilka razy uważnie niniejszą stronę,
b) wróć do punktu a:)
c) napisz do nas.