Formularze





W tym rozdziale dowiesz się:


WSTĘP

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).



RAMY FORMULARZA

<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>

gdzie jako "adres e-mail gdzie wysłać formularz" podaj swój adres poczty elektronicznej (e-mail).
Natomiast zamiast "temat" można wpisać tytuł, jaki będzie nosił formularz (jest to przydatne zwłaszcza w przypadku stosowania programów obsługujących formularze).

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ć!

Dla zaawansowanych
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 NAME="formularz" onsubmit="alert(document.formularz.tekst.value); return false">
<INPUT TYPE="text" NAME="tekst"><INPUT TYPE="submit" VALUE="OK">
</FORM>
Otrzymamy:
Wpisz tutaj coś i naciśnij OK:

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" NAME="formularz2"
  onsubmit="if (document.formularz2.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>
Naciśnij OK, bez wpisywania tekstu:

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" LANGUAGE="JavaScript">
<!--
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">
  <INPUT TYPE="text" NAME="a"><BR>
  <INPUT TYPE="password" NAME="b"><BR>
  <TEXTAREA NAME="c"></TEXTAREA><BR>
  <INPUT TYPE="submit" VALUE="OK">
</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 tutaj.



POLE TEKSTOWE

<FORM>
     <INPUT TYPE="text" NAME="nazwa">
</FORM>
lub
<FORM>
     <INPUT NAME="nazwa">
</FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być jednak zbyt długa! Zostanie ona póĽniej wysłana wraz z formularzem.

Atrybut NAME, powinien być unikatowy w obrębie dokumentu, tzn. żadne dwa pytania nie powinny mieć takiej samej nazwy. Dotyczy to również znacznika FORM, gdy chcemy wykorzystać formularz do współpracy ze skryptem po stronie klienta.

Dla zaawansowanych
Jeśli formularz ma zostać wykorzystany przez skrypt, nazwa musi spełniać wymagania, stawiane identyfikatorom w danym języku programowania. Najczęściej można wpisywać pojedyncze wyrazy, składające się z liter (oprócz polskich znaków), cyfr (ale nie na początku) i znaków podkreślnika ("_"). Zwykle wielkość liter jest rozróżniana.


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:
  1. OdpowiedĽ domyślna:
    <INPUT TYPE="text" NAME="nazwa" VALUE="odpowiedĽ domyślna">

    W miejsce tekstu: "odpowiedĽ domyślna" można wpisać domyślną treść danej odpowiedzi. Zostanie ona dołączona do formularza, jeśli użytkownik nie wpisze innej.

    Przykład:


  2. Długość pola:
    <INPUT TYPE="text" NAME="nazwa" SIZE="k">

    gdzie jako "k" można podać długość pola w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu SIZE.

    Przykład:

    SIZE="10"

  3. Maksymalna ilość znaków, które można wpisać do pola:
    <INPUT TYPE="text" NAME="nazwa" MAXLENGTH="n">

    gdzie jako "n" podaj maksymalną dopuszczalną ilość liter, z których może składać się odpowiedĽ - użytkownik nie będzie mógł wpisać dłuższego tekstu.

    Przykład:

    MAXLENGTH="10"

  4. Pole tylko do odczytu:
    <INPUT TYPE="text" NAME="nazwa" READONLY>

    Wstawienie atrybutu 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:

    Teksu w tym polu nie można usunąć ani zmienić (READONLY).

  5. Blokada pola:
    <INPUT TYPE="text" NAME="nazwa" DISABLED>

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.

    Przykład:

    To pole jest zablokowane (DISABLED).


HASŁO

<FORM>
     <INPUT TYPE="password" NAME="nazwa">
</FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola. Zostanie ona póĽniej wysłana wraz z formularzem. Nazwa nie powinna być zbyt długa!

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.

Podaj hasło...

SIZE="10"

Tutaj możesz wprowadzić najwyżej 10-znakowe hasło (MAXLENGTH="10").

To jest pole tylko do odczytu (READONLY).

To pole jest zablokowane (DISABLED).


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 onsubmit="window.location.href = this.password.value + '.html'; return false">
<INPUT TYPE="password" NAME="password">
<INPUT TYPE="submit" VALUE="OK">
</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!



POLE WYBORU

<FORM>
     <INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość">Tu wpisz opis pola
</FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona póĽniej wysłana wraz z formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

Wszystkie pola tego typu, które dotyczą tego samego pytania, powinny nosić taką samą nazwę! Dodatkowo parametr 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 (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, a wartości kolejnych zaznaczonych elementów (tylko zaznaczonych), będzie można odczytać poprzez użycie: $nazwa[0], $nazwa[1], $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ą:

OdpowiedĽ nr1 OdpowiedĽ nr2 OdpowiedĽ nr3


Możliwe jest tutaj podanie dodatkowych atrybutów:
  1. Domyślne zaznaczenie pola:
    <INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość" CHECKED>Opis pola

    Podanie atrybutu CHECKED powoduje domyślne zaznaczenie pola. Możliwe jest zaznaczenie kilku pól tego typu, które dotyczą tego samego pytania.

    Przykład:

    To pole jest domyślnie zaznaczone, ale można go odznaczyć.
    To pole również jest zaznaczone.
    Natomiast to nie jest.

  2. Blokada pola:
    <INPUT TYPE="checkbox" NAME="nazwa" VALUE="wartość" DISABLED>Opis pola

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:

    Tych pól nie możesz zaznaczać ani odznaczać:

    Pole 1 Pole 2


Etykieta
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, 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 wyróżnione fragmenty 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:


To jest zwykły opis bez etykiety
(spróbuj kliknąć opisy powyższych pól)



Klawisz skrótu
Możliwe jest przypisanie klawisza skrótu do danego pola (ACCESSKEY="klawisz"). Jeśli wciśniemy na klawiaturze kombinację Alt+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 (nie obsługuje Opera 7). 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)

Atrybut ACCESSKEY="..." można zastosować dla znaczników: A,AREA, BUTTON, LABEL, LEGEND, TEXTAREA oraz INPUT.

Przykład:

Pole a (wciśnij Alt+a)
Pole tekstowe (wciśnij Alt+k)


POLE OPCJI

<FORM>
     <INPUT TYPE="radio" NAME="nazwa" VALUE="wartość">Tu wpisz opis pola
</FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona póĽniej wysłana wraz z formularzem.
Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.

Pamiętaj aby wszystkie pola tego typu, które dotyczą tego samego pytania, nosiły koniecznie taką samą nazwę! Dodatkowo parametr 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ść:

OdpowiedĽ nr1 OdpowiedĽ nr2 OdpowiedĽ nr3


Możliwe jest tutaj podanie dodatkowych atrybutów:
  1. Domyślne zaznaczenie pola:
    <INPUT TYPE="radio" NAME="nazwa" VALUE="wartość" CHECKED>Opis pola

    Podanie atrybutu 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:

    To pole jest domyślnie zaznaczone, ale można go odznaczyć, klikając inne.
    To pole nie może być zaznaczone domyślnie, ponieważ zaznaczone już zostało pierwsze.

  2. Blokada pola:
    <INPUT TYPE="radio" NAME="nazwa" VALUE="wartość" DISABLED>Opis pola

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:

    Tych pól nie możesz zaznaczać ani odznaczać:

    Pole 1 Pole 2


Do pola tego typu można również przypisać etykietę oraz klawisz skrótu.



LISTA ROZWIJALNA

<FORM>
     <SELECT NAME="nazwa">
          <OPTION>Tu wpisz pierwszą możliwość
          <OPTION>Tu wpisz drugą możliwość
          (...)
     </SELECT>
</FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona póĽniej wysłana wraz z formularzem (wysłane zostaną również wpisane możliwości odpowiedzi).

Jeśli chcemy, aby w formularzu zostały przesłane inne wartości niż treść znaczników <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>. 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> 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.

To jest typ podstawowy


Możliwe są tutaj dodatkowe parametry:
  1. Możliwość wyboru kilku opcji (typ rozszerzony):
    <SELECT NAME="nazwa" MULTIPLE>
         <OPTION>Tu wpisz pierwszą możliwość
         <OPTION>Tu wpisz drugą możliwość
    </SELECT>

    Przykład:

    Dodatkowe możliwości wybiera się trzymając wciśnięty klawisz Ctrl ("Control") lub przeciągając myszką:

    To jest typ z możliwością wyboru kilku opcji jednocześnie

  2. Z zaznaczoną domyślnie opcją:
    <SELECT NAME="nazwa">
         <OPTION>Tu wpisz pierwszą możliwość
         <OPTION SELECTED>Tu wpisz drugą możliwość
    </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:


    MULTIPLE

  3. O określonej wysokości pola:
    <SELECT NAME="nazwa" SIZE="w">
         <OPTION>Tu wpisz pierwszą możliwość
         <OPTION>Tu wpisz drugą możliwość
    </SELECT>

    gdzie "w" oznacza ilości wierszy (linii) z odpowiedziami, które będą jednocześnie widoczne na ekranie (pole może oczywiście posiadać więcej opcji, niezależnie od atrybutu SIZE).

    Przykład:


    Zauważ, że jeśli wysokość pola jest większa niż ilość opcji, to nie pojawia się suwak do jego przewijania:

    SIZE="5"

  4. Blokada pola:
    <SELECT NAME="nazwa" DISABLED>
         <OPTION>Tu wpisz pierwszą możliwość
         <OPTION>Tu wpisz drugą możliwość
    </SELECT>

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:

    To pole jest zablokowane (DISABLED).

    To pole jest zablokowane (DISABLED).



Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom generatora.



OBSZAR TEKSTOWY

<FORM>
     <TEXTAREA NAME="nazwa">Tu wpisz tekst który pojawi się domyślnie</TEXTAREA>
<FORM>

gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania). Zostanie ona póĽniej wysłana wraz z formularzem.

Polecenie to wyświetla na ekranie wieloliniowe pole tekstowe (obszar tekstowy) o domyślnym rozmiarze 20 kolumn i 2 wierszy (w Internet Explorerze). 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> oraz </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 (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żesz tu coś wpisać...


A to jest przykład podania treści domyślnej (możesz ją wymazać):

Możesz tu coś wpisać...


Możliwe jest tu podanie dodatkowych parametrów:
  1. Rozmiar pola:
    <TEXTAREA NAME="nazwa" COLS="x" ROWS="y">...</TEXTAREA>

    gdzie "x" oraz "y" oznaczają odpowiednio: ilość kolumn i wierszy tekstu, które mogą się jednocześnie zmieścić w polu, bez jego przewijania.

    Przykład:


  2. Pole tylko do odczytu:
    <TEXTAREA NAME="nazwa" READONLY>...</TEXTAREA>

    Wstawienie atrybutu READONLY powoduje, że tekstu zapisanego domyślnie w tym polu, nie będzie można modyfikować.

    Przykład:


  3. Blokada pola:
    <TEXTAREA NAME="nazwa" DISABLED>...</TEXTAREA>

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:


  4. Zawijanie tekstu (Internet Explorer, Opera 7):

    <TEXTAREA NAME="nazwa" WRAP="rodzaj">...</TEXTAREA>

    gdzie jako "rodzaj" należy wpisać:

    1. "off" - wyłączenie zawijania tekstu

      Przykład:

    2. "physical" - zawijanie tekstu na stronie i przesyłanie w formularzu tekstu zawiniętego

      Przykład:

    3. "virtual" - zawijanie tekstu na stronie, ale przesyłanie w formularzu tekstu w "długich linijkach" (tak jak został wpisany)

      Przykład:


    Jak widzisz 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.




Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonegogeneratora Kolor suwaków].



SELEKTOR PLIKÓW

<FORM>
     <INPUT TYPE="file" NAME="nazwa">
</FORM>

gdzie jako "nazwa" należy wpisać krótką nazwę danego pola. Zostanie ona póĽniej wysłana wraz z formularzem.

Polecenie wprowadza selektor plików, składający się z dwóch pól (np. w Internet Explorerze):

  1. pola tekstowego, w którym wpisuje się ścieżkę dostępu do pliku,
  2. przycisku, po naciśnięciu którego, można przeszukać dysk, aby odnaleĽć plik.

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 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 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 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:
  1. Długość pola (tekstowego):
    <INPUT TYPE="file" NAME="nazwa" SIZE="k">

    gdzie jako "k" podaje się długość pola (tekstowego) w ilości znaków, które będą w nim jednocześnie widoczne (domyślnie 20 - w Internet Explorerze). Oczywiście użytkownik będzie mógł wpisać do takiego pola dowolną liczbę znaków, niezależnie od atrybutu SIZE.

    Przykład:

    SIZE="10"

  2. Blokada pola (nie obsługuje Opera 6):
    <INPUT TYPE="file" NAME="nazwa" DISABLED>

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:

    To pole jest zablokowane (DISABLED).


UKRYTE DANE

<FORM>
     <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.



WYSŁANIE FORMULARZA

  1. Przycisk tekstowy:
    <FORM>
         <INPUT TYPE="submit" VALUE="wartość">
    </FORM>

    gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny tekst, np.: "Prześlij kwerendę".

    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:

    VALUE="Kliknij tutaj!"

    To jest przykład bez podania wartości VALUE.

  2. Blokada pola:
    <FORM>
         <INPUT TYPE="submit" VALUE="wartość" DISABLED>
    </FORM>

    Wstawienie atrybutu DISABLED powoduje zablokowanie pola.

    Przykład:

    To pole jest zablokowane (DISABLED).

  3. Przycisk obrazkowy:
    <FORM>
         <INPUT TYPE="image" SRC="ścieżka dostępu do obrazka" ALT="informacja alternatywna">
    </FORM>

    gdzie jako "ścieżka dostępu do obrazka" należy podać lokalizację na dysku, gdzie znajduje się obrazek, który ma zostać wyświetlony jako przycisk wysłania formularza.
    Natomiast zamiast "informacja alternatywna" można podać treść informacji, która powinna pojawić się w przypadku, gdy obrazek nie zostanie wyświetlony, a także po wskazaniu go myszką (atrybut ten nie jest konieczny).

    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.



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>


WYCZYSZCZENIE DANYCH

<FORM>
     <INPUT TYPE="reset" VALUE="wartość">
</FORM>

gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny napis, np.: "Resetuj".

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:

Wypełnij formularz, a następnie kliknij jeden z poniższych przycisków:

Wpisz tu jakiś tekst.

OdpowiedĽ nr1 OdpowiedĽ nr2

OdpowiedĽ nr1 OdpowiedĽ nr2


VALUE="Kliknij tutaj!"...

To jest przykład bez podania wartości VALUE.

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>
     <INPUT TYPE="reset" VALUE="wartość" DISABLED>
</FORM>

Przykład:

To pole jest zablokowane (DISABLED).


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:

Wpisz tu jakiś tekst.

OdpowiedĽ nr1 OdpowiedĽ nr2

OdpowiedĽ nr1 OdpowiedĽ nr2




PRZYCISK

<BUTTON TYPE="rodzaj">Treść przycisku</BUTTON>

gdzie "rodzaj" określa typ przycisku i można tutaj podać:

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> oraz </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:







Ten przycisk jest zablokowany - DISABLED (nie obsługuje Opera 6).



W Windows XP w Internet Explorerze wygląd przycisków o dużych rozmiarach jest bardzo nieestetyczny!



GRUPOWANIE PÓL

  1. Wersja podstawowa:
    <FIELDSET>
         (Pola formularza)
    </FIELDSET>
  2. Wersja z tytułem:
    <FIELDSET>
    <LEGEND>Tytuł</LEGEND>
         (Pola formularza)
    </FIELDSET>
  3. Ułożenie tytułu:
    <FIELDSET>
    <LEGEND ALIGN="rodzaj">Tytuł</LEGEND>
         (Pola formularza)
    </FIELDSET>

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 (trzecia wersja), gdzie jako "rodzaj" należy wpisać:

UWAGA! Znacznik 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!
Wygląd ramki grupującej może się różnić w zależności od przeglądarki.

Przykład:

Wybierz opcję:
Opcja 1
Opcja 2
Opcja 3
Wpisz dane


Tytuł Wybierz opcję:
Opcja 1
Opcja 2
Opcja 3


FORMA ODSZYFROWANA

<FORM 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=Underground&Przegl%B9darka=Internet+Explorer&System+operacyjny=Dos&System+operacyjny=Windows&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=Underground
Przeglądarka=Internet Explorer
System operacyjny=Dos
System operacyjny=Windows
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.

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> (lista rozwijalna):

<SELECT NAME="nazwa">
  <OPTION VALUE="acelnoszz">ąćęłń󜼿
  <OPTION VALUE="ACELNOSZZ">ˇĆĘŁŃÓŚŹŻ
</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" LANGUAGE="JavaScript">
<!--
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>!



PRZYKŁAD

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.


Uwaga!
Czcionką pogrubioną zaznaczono fragmenty, które można (a nawet trzeba) zastąpić innym tekstem. Są to np.: pytania, poszczególne odpowiedzi, wartości parametrów i inne.

Kolorem czerwonym (pomiędzy znakami <!-- oraz -->) zaznaczono komentarz. Nie jest on oczywiście konieczny (możesz go pominąć); pozwala zorientować się, czego dotyczy fragment kodu poniżej niego.


Oto treść kodu Ľródłowego:


<FORM ACTION="mailto:twój_adres_poczty@domena" METHOD="post" ENCTYPE="text/plain">
<!-- Podstawowe pole tekstowe -->
<INPUT NAME="Imię">Podaj swoje imię<BR>
<INPUT NAME="Nazwisko">Podaj swoje nazwisko
<BR><BR> 
<!-- Pole typu RADIO -->
Podaj swoją płeć:<BR>
<INPUT TYPE="radio" NAME="Płeć" VALUE="Kobieta">Kobieta
<INPUT TYPE="radio" NAME="Płeć" VALUE="Mężczyzna">Mężczyzna
<BR><BR>
<!-- Pole typu RADIO -->
Ile masz lat?<BR>
<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
<BR><BR>
<!-- Pole typu CHECKBOX -->
Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?<BR>
<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">
<BR><BR>
<!-- Lista rozwijalna (typ podstawowy) z zaznaczoną opcją domyślną -->
Jakiej przeglądarki internetowej używasz?<BR>
<SELECT NAME="Przeglądarka">
  <OPTION SELECTED>Internet Explorer
  <OPTION>Netscape
  <OPTION>Opera
  <OPTION>Mozilla
  <OPTION>Inna
</SELECT>
<BR><BR>
<!-- Lista rozwijalna (typ rozszerzony) z zaznaczoną opcją domyślną i zmniejszoną wysokością -->
Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?<BR>
<SELECT NAME="System operacyjny" MULTIPLE SIZE="3">
  <OPTION SELECTED>Dos
  <OPTION>Windows
  <OPTION>Linux
  <OPTION>Inny
</SELECT>
<BR><BR>
<!-- Pole komentarza (o powiększonych rozmiarach oraz z tekstem domyślnym) -->
Podaj swój komentarz:<BR>
<TEXTAREA NAME="Komentarz" COLS="50" ROWS="10">Proszę, wpisz tutaj jakiś komentarz...</TEXTAREA>
<BR><BR><BR><BR>
<!-- Przycisk WYŚLIJ -->
<INPUT TYPE="submit" VALUE="Wyślij formularz">
<!-- Przycisk WYCZYŚĆ DANE -->
<INPUT TYPE="reset" VALUE="Wyczyść dane">
</FORM>


A oto co otrzymamy po wpisaniu powyższego tekstu:


Podaj swoje imię
Podaj swoje nazwisko

Podaj swoją płeć:
Kobieta Mężczyzna

Ile masz lat?
mniej niż 15
15-19
20-29
30-39
40-60
więcej niż 60

Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?
Rock
Heavy Metal
Pop
Techno
Muzyka poważna
Inna (podaj jaka):

Jakiej przeglądarki internetowej używasz?


Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?


Podaj swój komentarz:




(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.

np. po wpisaniu:
<FORM ACTION="mailto:e-mail" METHOD="post" ENCTYPE="text/plain">
<TABLE BGCOLOR="silver">
<TR>
  <TD>Imię:</TD><TD><INPUT TYPE="text" NAME="imie"></TD>
</TR>
<TR>
  <TD>Nazwisko:</TD><TD><INPUT TYPE="text" NAME="imie"></TD>
</TR>
<TR>
  <TD COLSPAN="2">&nbsp;</TD>
</TR>
<TR>
  <TD COLSPAN="2" ALIGN="center">
    <INPUT TYPE="submit" VALUE="Wyślij">
    <INPUT TYPE="reset" VALUE="Wyczyść">
  </TD>
</TR>
</TABLE>
</FORM>
otrzymamy:
Imię:
Nazwisko:
 

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".



ALTERNATYWNY SPOSÓB WYSŁANIA FORMULARZA

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łówkowejdokumentu) następujący kod:

<script type="text/javascript">
<!--
// 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>