Indtrukcja

Laboratorium Informatyki
HTML (ang. Hyper Text Markup Language)
hipertekstowy język znaczników
Ćwiczenie 6.
1. Wprowadzenie
Formularze są elementami umieszczanymi w dokumentach HTML w celu interakcji
z użytkownikiem i uzyskaniem od niego danych w celu wykonania zaprogramowanych
czynności. Formularze stosowane są na stronach sklepów internetowych w celu
złożenia zamówienia, innym sposobem jest generowanie wiadomości e-mail.
Formularze na stronach WWW zazwyczaj wspomagają skrypty napisane w php lub
javascript.
2. Ramy formularza
Formularz na stronie WWW definiowany jest pomiędzy znacznikami <FORM>
</FORM>. Najprostszym sposobem zastosowania formularzy jest wysłanie maila
Prost ze strony HTML.
<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>
W drugiej wersji definicji formularza poza podaniem adresu e-mail dodatkowo
podawany jest temat wiadomości.
W przypadku chęci powiązania skryptu php z formularzem pod atrybut ‘action=’
należy podpiąć adres pliku ze skryptem php.
3. Pole tekstowe
Podstawowym elementem formularza jest okno tekstowe umożliwiające pobranie
danych tekstowych od użytkownika.
<input type="text" name="nazwa_1" />
<input name="nazwa_2" />
Atrybut z definicją typu nie jest obowiązkowy. Ponadto nazwa pola tekstowego
w ramach formularza musi być unikalna. Dodatkowo okno tekstowe można formatować
za pomocą dodatkowych atrybutów.
 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.
1

Długość pola:
<input type="text" name="nazwa" size="X" />
W miejsce „X” podaje się długość pola w ilości znaków, które będą w nim
jednocześnie widoczne (domyślnie 20). Oczywiście użytkownik będzie mógł wpisać
do takiego pola dowolną liczbę znaków, niezależnie od atrybutu size="...".

Maksymalna ilość znaków:
<input type="text" name="nazwa" maxlength="X" />
W miejsce „X” podaje się 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.
4. Pole hasła
Odmianą okna tekstowego jest pole hasła, w którym wprowadzany tekst
wyświetlany jest za pomocą „*”. Pole to może być formatowane atrybutami
analogicznie jak pole tekstowe.
<input type="password" name="nazwa" />
5. Pole wyboru
Formularz ten powoduje umieszczenie na stronie okna wyboru wraz z tekstem
pytania.
Pytanie?<br>
<input type="checkbox" name="pyt_1" value="co" />Odpowiedź pierwsza<br>
<input type="checkbox" name="pyt_1" value="gdzie" />Odpowiedź drugia<br>
<input type="checkbox" name="pyt_1" value="kiedy" />Odpowiedź trzecia<br>
Atrybut „value” zawiera wartość która w przypadku zaznaczenia boxa zostania wysłana
w formularzu. W odróżnieniu okna tekstowego nazwa „name” dla każdej odpowiedzi na
pytanie musi być taka sama.
W niektórych przypadkach może zaistnieć konieczność aby niektóre pola wyboru były
zaznaczone jako domyślne na TAK.
<input type="checkbox" name="pyt_1" value="faktura" checked="checked" />Odpowiedź.
6. Pole opcji
Pole opcji ma budowę i zasadę działania podobną do pola wyboru z tą różnicą, że
wybrana może być tylko jedna z opcji.
<input type="radio" name="nazwa" value="odp_1" />Odpowiedź 1<br>
<input type="radio" name="nazwa" value="odp_2" />Odpowiedź 2<br>
<input type="radio" name="nazwa" value="odp_3" />Odpowiedź 3<br>
Zadając drugie zapytanie z polami opcji wystarczy zmienić tylko zawartość
atrybutu „name” aby wybór był możliwy.
7. Listy rozwijane
Kolejnym formularzem umożliwiający wybranie jednej lub kilku wartości ze
zdefiniowanej wcześniej listy jest formularz listy rozwijanej.
<select name="nazwa">
<option>Tu wpisz pierwszą możliwość</option>
<option value="wartość">Tu wpisz drugą możliwość</option>
</select>
Jeżeli w formularzu ma być wysłana inna wartość niż ta zdefiniowana pomiędzy
znacznikami <option></option>, należy wprowadzić do znacznika atrybut „value” z
wybraną skróconą wartością. Zdefiniowana powyżej lista umożliwia dokonanie
pojedynczego wyboru, w przypadku konieczności zastosowania wielokrotnego wyboru
należy do znacznika <select> dodać atrybut multiple="multiple".
2
8. Obszar tekstowy
Obszar tekstowy jest rozszerzoną wersją okna tekstowego, umożliwiający
wprowadzanie do formularza większego tekstu, np.: treści wiadomości e-mail.
<textarea name="nazwa" cols="X" rows="Y">Tekst domyślny opcjonalny</textarea>
Pod wartości X i Y podstawia się odpowiednio liczbę znaków w wierszu i liczbę
wierszy tekstu, określając w ten sposób rozmiar obszaru tekstowego na stronie
WWW.
9. Selektor pliku
Formularz ten składa się z dwóch elementów, okna tekstowego i przycisku który
aktywuje okno wskazania pliku. Formularz ten stosuje się w celu wskazania pliku
załącznika do wiadomości e-mail. W kodzie formularza należy zmodyfikować
znacznik definicji formularza i dodać znacznik przycisku.
<form action="..." enctype="multipart/form-data">
<input type="file" name="nazwa" />
</form>
Niestety nie wszystkie przeglądarki potrafią właściwie zinterpretować kod
tego formularza. W konsekwencji znajduje on zastosowanie tylko w przypadku
stosowania skryptów php.
10. Przycisk – wysłanie formularza
Wysłanie formularza można zrealizować za pomocą przycisku.
<input type="submit" value="wartość" />
W miejsce wartości atrybutu „value” podaje się tekst wyświetlany na
przycisku. Możliwe jest w miejsce standardowej grafiki przycisku wstawić własny
obrazek.
<input type="image" src="ścieżka dostępu do obrazka" alt="informacja alternatywna" />
11. Czyszczenie formularza
Za pomocą formularza przycisku można także wyczyścić dane wprowadzone do
formularza.
<input type="reset" value="wartość" />
12. Wysyłanie formularza – e-mail’a
Utworzony formularz po wypełnieniu danymi przez użytkownika po kliknięciu
przycisku „Wyślij” powinien zostać przesłany wiadomością e-mail pod wskazany
wcześniej adres. Standardowo po kliknięciu przycisku powinien uruchomić się
domyślny program pocztowy systemu i automatycznie utworzona nowa wiadomość z
zawartością formularza. Niestety w systemie Windows pojawiają się problemy.
Standardowa przeglądarka nie przekazuje formularza w sposób właściwy i w
efekcie otwierana jest pusta wiadomość email. Inne przeglądarki radzą sobie z
tym lepiej. Rozwiązaniem tego problemu jest skorzystanie ze skryptów javascript
lub php.
W przypadku skryptu javascript, udostępnionego na stronie, korygowany jest
problem z przesłaniem formularza przez przeglądarkę systemową. Poza skryptem,
umieszczonym w obszarze nagłówkowym, konieczne jest właściwe zapisanie
definicji formularza.
<form action="mailto:adres e-mail?subject=temat" method="post" enctype="text/plain"
onsubmit="mail_form(this); return false">
3
Zastosowanie skryptu php zapewnia
korzystania z programu pocztowego.
wysłanie
formularza
bez
konieczności
ZADANIE
Za pomocą znaczników formularzy napisać i umieścić na stronie ankietę której
odpowiedzi zostaną przesłane na wybrany adres e-mail.
4