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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<form action="mailto:adres_poczty@domena" method="post" enctype="format danych">...</form>

lub z ustaleniem tematu:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<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:

Dane personalnePodaj swoje imię
Podaj swoje nazwisko

Podaj swoją płeć:

Kobieta Mężczyzna

Ile masz lat?

mniej niż 15
18-30
31-60
więcej niż 60
Dane dodatkowe

Jaką lubisz muzykę (możesz zaznaczyć więcej możliwości)?

Rock
Pop
Techno
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:




Parametry formularzaPodaj adres e-mail odbiorcy (obowiązkowo)
Podaj temat wiadomości
Podaj format danych (enctype)
Podaj stronę kodową (accept-charset)
Przyciski sterujące

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.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Formularze (H1) Formularz pocztowy (H2) Kilka podstawowych uwag (H3) Polskie znaki (H4) Praktyczny przykład (H3) Obsługa (H4)