Formularze#
Formularz pocztowy#
Na zakończenie działu pozostało zaprezentowanie czegoś praktycznego. W przypadku formularzy najwłaściwszą opcją będzie prezentacja budowy i działania formularza pocztowego. Osoby początkujące nie powinny mieć problemów ze zrozumieniem zagadnień, a i łatwa obsługa formularza pozwala przetestować wszystko osobiście.
Kilka podstawowych uwag#
Zawartość formularza pocztowego należy umieścić w odpowiednich ramach:
<form action="mailto:adres_poczty@domena" method="post" enctype="format danych">...</form>
lub z ustaleniem tematu:
<form action="mailto:adres_poczty@domena?subject=Temat ankiety" method="post" enctype="format danych">...</form>
Atrybut action nie wymaga wiekszego komentarza. Jako wartość należy umieścić adres skrytki pocztowej, np. bodzio@gmail.com. Więcej uwagi należy poświęcić atrybutowi enctype.
Polskie znaki#
Format danych przesyłanych w formularzu omówiony został w podrozdziale "Ogólne ramy formularza". Bez określania atrybutu enctype przyjmie on domyślną wartość application/x-www-form-urlencoded. Gdyby ktoś wysłał tak skonstruowany formularz, dane dotarłyby nie w liście, a w załączniku, mniej więcej w takiej postaci:
Imi%EA+i+nazwisko=Jan+Kowalski&P%B3e%E6=m%EA%BFczyzna&Wiek=31-40&zaj%EAcie=emerytura&Miejscowo%9C%E6=50-100&komputer=PC+Pentium&system=on&rzegl%B9darka+WWW=Netscape+Navigator&Ocena=bdb&Opinia=prosilbym+o+podobny+kurs+jezyka+java&submit=Wy%9Clij
Problem polega na tym, że przy domyślnych ustawieniach znaki z formularza są w dość osobliwy sposób konwertowane i docierają częściowo w postaci "krzaków". Jeśli nie chcemy, aby odpowiedź przychodziła w postaci "zaszyfrowanego" załącznika, lecz w czytelnej postaci w ramach listu, powinniśmy zastosować parametr enctype="text/plain". Dla powyższego przykładu otrzymamy wówczas:
Imię i nazwisko=Jan Kowalski Płeć=mężczyzna Wiek=31-40 zajęcie=praca Miejscowość=powyżej 1000 komputer=PC Pentium system operacyjny=Windows 95 Przeglądarka WWW=Internet Explorer Przeglądarka WWW=Netscape Navigator Ocena=bdb Opinia=prosilbym o podobny kurs jezyka
Kolejną kwestią pozostaje sprawa używanego oprogramowania przy wysyłaniu formularza. Niektóre programy (szczególnie te starsze np. Internet Explorer 6/7, Outlook Express 5/6) mogą niepoprawnie wysyłać dane, przy deklaracji strony kodowej iso-8859-2. Polskie znaki diakrytyczne (ą, ś, ź, Ą, Ś, Ź) będą nieprawidłowo zakodowane.
Problem można wyeliminować używając na stronie z formularzem strony kodowej windows-1250. Niestety jest to wewnętrzny system kodowania, stosowany w starszych programach firmy Microsoft (w dodatku niezgodny z normami ASCII). Na wszystkich innych stronach serwisu powinniśmy nadal używać międzynarodowych standardów kodowania.
Innym sposobem rozwiązania problemu jest umiejętne tworzenie pól formularza, tzn. w przypadku takich kontrolek jak checkbox, input, option wystarczy samodzielnie wpisać w treści atrybutów value="..." tekst bez polskich znaków. Przykładowo:
<select name="nazwa">
<option value="zdzblo">źdźbło</option>
<option value="SCIAGAWKA">ŚCIĄGAWKA</option>
</select>Zauważ, że tekst po znaczniku <option> może się różnić od przesyłanej wartości atrybutu value="...". W ten sposób użytkownik wypełniający formularz, zobaczy poprawne polskie litery.
W przypadku pól i obszarów tekstowych, za pomocą prostego skryptu JS można podmienić (a nawet usunąć) problematyczne znaki.
Kolejną metodą może być bezpośrednie wybranie strony kodowej w znaczniku <form> (atrybut accept-charset="..."). Metoda nie rozwiąże całkowicie problemu, kiedy nie będziemy wiedzieć, jakie strony kodowe są obsługiwane przez programy wysyłające dane stosowane przez użytkowników.
Praktyczny przykład#
Poniżej prezentuję kod formularza pocztowego, w którym dodatkowo można wybrać kilka parametrów:
<form action="" method="post" onsubmit="this.action = 'mailto:adres' + this.email.value;
this.enctype = this.enc.value; this.acceptCharset = this.char.value; if (this.sub.value != ''){
this.action += '?subject=' + this.sub.value;}">
<fieldset>
<legend>Dane personalne</legend>
<!-- 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ż 18" />mniej niż 15<br />
<input type="radio" name="Wiek" value="18-30" />18-30<br />
<input type="radio" name="Wiek" value="31-60" />31-60<br />
<input type="radio" name="Wiek" value="więcej niż 60" />więcej niż 60
</fieldset>
<fieldset>
<legend>Dane dodatkowe</legend>
<!-- 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="Pop" />Pop<br />
<input type="checkbox" name="Muzyka" value="Techno" />Techno<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">Mozilla Firefox</option>
<option>Google Chrome</option>
<option>Opera</option>
<option>Internet Explorer</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">Windows</option>
<option>Linux</option>
<option>Mac OS X</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 />
</fieldset>
<fieldset>
<legend>Parametry formularza</legend>
<!-- Dodatkowe dane pobierane i ustawiane przed wysłaniem formularza za pomocą JavaScript -->
<input name="email" value="adres@domena.pl" />Podaj adres e-mail odbiorcy (<strong>obowiązkowo</strong>)<br />
<input name="sub" value="Ankieta" />Podaj temat wiadomości<br />
<input name="enc" value="text/plain" />Podaj format danych (<code>enctype</code>)<br />
<input name="char" value="utf-8" />Podaj stronę kodową (<code>accept-charset</code>)
</fieldset>
<fieldset>
<legend>Przyciski sterujące</legend>
<!-- Przycisk WYŚLIJ -->
<input type="submit" value="Wyślij formularz" />
<!-- Przycisk WYCZYŚĆ DANE -->
<input type="reset" value="Wyczyść dane" />
</fieldset>
</form>Efekt:
Obsługa#
Do wysyłania formularzy pocztowych 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.
Osoby chcące tworzyć formularze, które można wysyłać bez programu pocztowego muszą skorzystać z języków skryptowych po stronie serwera (np. PHP). 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.
Do celów testowych wystarczy najprostszy program pocztowy. Po kliknięciu przycisku Wyślij formularz w powyższej ankiecie, uruchomiony zostanie domyślny program pocztowy (podobnie jak w przypadku Odsyłaczy pocztowych). W oknie programu widnieć będą dane pochodzące z formularza, czyli nazwy pól oraz wybrane/wpisane wartości. Przed wysłaniem listu można dokonać stosownych korekt bezpośrednio w aplikacji.