technologie internetowe cw 02 Formularze Html


Ćwiczenie 2
Temat:
Tworzenie i praca
z formularzami
HTML
Cel ćwiczenia:
Celem ćwiczenia jest zapoznanie studenta z możliwościami tworzenia
i wykorzystania formularzy utworzonych w języku HTML. Student zapozna się
w tym module z metodami wstawiana na stronę HTML poszczególnych
elementów tworzących formularz, m.in. pozna jak utworzyć pola wyboru, pola
tekstowe, pola opcji, listę rozwijaną, pole hasła, a także nauczy się tworzyć
przycisk czyszczący i wysyłający zawartość formularza.
Formularze HTML - Wstęp
Formularze są elementami stron internetowych, które umożliwiają użytkownikowi
wprowadzenie danych za pomocą odpowiednich pól. W zależności od potrzeb, na stronie
umieścić można pola formularza umożliwiające odwiedzającemu wpisanie dowolnego tekstu
lub tylko wybranie jakiejś opcji z wcześniej przez nas zdefiniowanej listy. Możliwe jest także
zastosowanie pól wyboru (jednokrotnego i wielokrotnego), a także maskowanych pól
tekstowych, w których podczas wpisywania tekst zamieniany jest na symbole (kropki lub
gwiazdki) co jest konieczne, gdy w polu ma się znajdować hasło użytkownika. Nierozłączną
częścią formularzy są także przyciski, które umożliwiają wysłanie wypełnionego formularza,
lub np. wyczyszczenie jego zawartości.
Formularze mają wiele zastosowań w dzisiejszym Internecie. Głównym celem
stosowania formularzy na stronach jest chęć uzyskania jakiś informacji od odwiedzającego
naszą stronę, a więc formularze mogą posłużyć do zbudowania ankiety, sklepu
internetowego, forum dyskusyjnego, okna logowania się na stronie, panelu wyszukiwania na
stronie itd. Choć sama technologia HTML nie pozwala na jakiekolwiek przetwarzanie danych
zawartych w formularza, to są one nieodzowną częścią wszystkich stron internetowych. Do
przetwarzania danych z formularzy niezbędne jest wykorzystanie dodatkowych technologii,
takich jak skrypty JavaScript (działające po stronie klienta  przeglądarki), czy skrypty
działające po stronie serwera (takie jak ASP czy PHP).
Warto zaznaczyć, że formularze same w sobie (technologia HTML) nie zapewniają
bezpieczeństwa przesyłanych za pomocą formularzy danych. Bezpieczeństwo danych
zapewnia protokół transportujący dane, a nie sama strona internetowa. Protokół http nie
jest protokołem szyfrowanym, dlatego wszystkie dane przesyłane tym protokołem np. dane
wpisywane do formularzy przekazywane są do sieci Internet tzw.  otwartym tekstem . Fakt,
iż pole formularza jest typu  hasło także nie gwarantuje jego bezpieczeństwa podczas
wysyłania, a jedynie zasłonięcie wpisywanego hasła przed ewentualnym podejrzeniem hasła
przez inną osobę. Bezpieczeństwo danych wysyłanych za pomocą formularzy zapewnia
protokół https. Możliwość konfiguracji protokołu jakim mają być transportowane dane i
strona internetowa ma tylko administrator serwera WWW na którym znajduje się strona.
Tworzenie i praca z formularzami HTML 15
Tworzenie formularza
Formularz, podobnie jak inne elementy stron tworzące strukturę (ul, ol, table, body,
head, html) rozpoczyna się znacznikiem wymagającym zamknięcia, a pomiędzy nimi definiuje
się inne znaczniki odpowiedzialne za elementy składowe formularza:
& & &

W znaczniku form definiowane są parametry, które są bardzo istotne dla poprawności
działania formularza:
" action  parametr definiuje to, gdzie ma zostać wysłany formularz.
" method - definiuję metodę wysłania formularza (możliwe wartości:  GET lub
 POST )
" name  nazwa formularza wykorzystywana przez skrypty
" enctype  parametr definiuje typ zawartości wysyłanej przez formularz (wartością
domyślą jest wartość "application/x-www-form-urlencoded". Jeśli w formularzy
występują tylko pola tekstowe parametr może przyjąć wartość: "text/plain". Jeśli
jednym z pól formularza będzie pole wgrywania pliku z dysku to wartość parametru
powinna zawierać: "multipart/form-data". Inne typy zawartości odnalezć można np.
na stronie http://filext.com , gdzie zdefiniowane odpowiednie typy zawartości Mime
type )
" target  okno w którym ma się otworzyć plik (strona) do którego zostanie wysłany
formularz
Podczas tworzenia formularzy należy pamiętać, że formularzy nie można tworzyć w
ramach innego formularza. Nic nie stoi na przeszkodzie, aby na stronie było kilka
formularzy (każdy z innym parametrem name), jednak znacznik otwarcia nowego
formularza musi znajdować się za zamknięciem poprzedniego formularza np. :
& & &

& & & {zawartość strony} & & &
& & &

Tworzenie i praca z formularzami HTML 16
Pola formularza
W formularzach wyróżnić można następujące pola:
" pole tekstowe
" pole hasła
" pole wyboru pliku
" pole wyboru (wielokrotnego wyboru)
" pole opcji (jednokrotnego wyboru)
Wszystkie powyższe pola formularzy tworzone są za pomocą jednego samodzielnego
znacznika input, którego parametr type określa które z powyższych pól ma zostać
zastosowane.

Pole tekstowe
Podstawowym składnikiem formularzy są pola tekstowe. Pozwalają użytkownikowi na
wprowadzenie jednej linii testu. Tworzone są za pomocą parametru type= text znacznika
input:

Pole tekstowe może zostać dopasowane do potrzeb strony za pomocą parametrów:
" value  definiuje wartość domyślną pola (po wejściu na stronę pole będzie już
wypełnione tą wartością)
" size  określa wizualną szerokość pola tekstowego (szerokość podawana jest w ilości
widocznych znaków. Użytkownik może wprowadzić dowolną liczbę znaków,
parametr określa tylko ile znaków będzie widzianych).
" maxlength  określa maksymalną ilość znaków jaką można wprowadzić do pola
" name  określa nazwę własną pola, parametr służy jako nazwa zmiennej podczas
wysyłania wartości pola do serwera.
Tworzenie i praca z formularzami HTML 17
Zadanie 1. Pola tekstowe
Odtworzyć poniższy wydruk strony. Wykorzystać wiedzę poznaną w poprzednim module
(tabele). Podpowiedzi znajdują się na zielonym tle. Pola tekstowe powinny mieć
odpowiednie parametry name.
Pamiętać należy, iż znacznik form otwarcia formularza musi znajdować się przed tabelą,
tabela i jej komórki służą tutaj tylko jak element formatujący formularz.
Nagłówek h2 Formularz w tabeli (tab. bez
Karta danych studenta
obramowania)
Imię Nazwisko
Wiek Nr Indeksu
Grupa Kierunek (symbol)
Specjalność
Parametry pól tekstowych ( szerokość pola / ilość możliwych znaków)
" Pola  imię i  nazwisko : 20 / 25.
" Polę  wiek i  grupa : 2 / 2
" Polę  nr indeksu : 10/10
" Polę  kierunek : 3/3
" Specjalność 20/50
Pole hasła
Pole reprezentujące hasło jest zwykłym polem tekstowym, które maskuje wpisywane znaki.
W polu typu hasło mogą zastosowane takie same parametry jak w polu tekstowym. Niestety
na poziomie języka HTML nie jest możliwe zdefiniowanie minimalnej liczby znaków w polu
hasła, co z punktu bezpieczeństwa ma znaczenie kluczowe (sprawdzenie długości hasła i
Tworzenie i praca z formularzami HTML 18
ewentualne odrzucenie zbyt krótkiego hasła musi odbyć za pomocą innej technologii np.
walidacja za pomocą skryptów klienckich JavaScript lub po stronie serwera PHP, ASP)
Zadanie 2. Pola hasła
Odtworzyć poniższy wydruk strony. Podpowiedzi znajdują się na zielonym tle. Pola powinny
mieć odpowiednie parametry name. Pamiętać należy, iż jeśli stosuje się metodę
dwukrotnego potwierdzania hasła lub adresu e-mail (w celu uniknięcia błędu użytkownika)
każe z pól musi mieć inną nazwę name. Wybrane pola powinny mieć ustaloną wartość
początkową.
Nagłówek h2 Formularz w tabeli (tab. bez obramowania)
Zarejestruj się!
Imię:
Nazwisko:
Na ten adres wysłane
E-mail:
zostanie potwierdzenie
Powtórz e-mail:
Hasło (min. 8 znaków):
Powtórz hasło:
Musisz być pełnoletni
Wiek:
Wszystkie pola tekstowe i hasła powinny mieć szerokość = 25 znaków. Maksymalna
ilość możliwych znaków w poszczególnych polach:
" Pola  imię i  nazwisko : 25.
" Polę  e-mail : 35
" Polę  hasło : 35
" Polę  wiek : 2
Tworzenie i praca z formularzami HTML 19
Pole wyboru pliku
Pole wyboru pliku to pole tekstowe zawierające ścieżkę do pliku. Pole to dodatkowo posiada
guzik, który otwiera okno przeglądania systemu plików w celu odnalezienia i zaznaczenia
interesującego nas pliku. Wykorzystanie guzika wskazującego plik w żaden sposób nie
narusza systemu plików, jest tylko narzędziem wskazującym ścieżkę do pliku, czyli nadal jest
polem tekstowym. Sam mechanizm HTML nie pozwala na jakiekolwiek zastosowanie tego
pola (poza wskazaniem ścieżki). Wgranie pliku na serwer może odbywać się tylko za pomocą
skryptów po stronie serwera (np. PHP lub ASP). Pole uzyskuje się za pomocą znacznika input
z parametrem type= file .
Parametry pola wyboru plików to:
" size  określa wizualną szerokość pola tekstowego
" name  określa nazwę własną pola, parametr służy jako nazwa zmiennej podczas
wysyłania wartości pola do serwera.
Zadanie 3. Pole wyboru pliku
Rozbudować poprzednie ćwiczenie o pola wyboru pliku.
Załącz swoje CV (.doc):
Wgraj list motywacyjny (.doc)
Wgraj zdjęcie profilowe (.jpg)
Tworzenie i praca z formularzami HTML 20
Pole wyboru i pole opcji
Pola wyboru i pola opcji to pola, a w zasadzie grupy pól, które pozwalają wybrać
użytkownikowi wypełniającemu formularz jedną (w przypadku pola opcji) lub wiele (w
przypadku pola wyboru) z zaprezentowanych propozycji odpowiedzi. Użytkownik nie ma
możliwości wprowadzenia swojej wartości pola, wartość jest wcześniej zdefiniowana, a
użytkownik może tylko zaznaczyć odpowiadającą mu opcję. Pole opcji (jednokrotnego
wyboru) uzyskuje się za pomocą parametru type= radio , natomiast pole wyboru
wielokrotnego za pomocą parametru type= checkbox . Pozostałe parametry pól są takie
same dla obu typów.
Parametry wspólne dla pól wyboru i pól opcji:
" name  określa nazwę własną pola, parametr służy jako nazwa zmiennej podczas
wysyłania wartości pola do serwera.
UWAGA! W przypadku pól opcji i pól wyboru parametr NAME musi być taki sam dla
wszystkich pól prezentujących jedną opcję (jedno pytanie do użytkownika). Czyli np.
jeśli pytamy za pomocą pól jednokrotnego wyboru o przedział wiekowy użytkownika
(np. od 18-30 lat, 30-40 lat czy od 40-50) to wszystkie pola muszą mieć taką samą
wartość parametru name np. name= wiek , ponieważ wszystkie dotyczą jednej
zmiennej  wieku, a wartości tej zmiennej są narzucane użytkownikowi. W
przypadku, gdy pytamy użytkownika o zainteresowana za pomocą pól wielokrotnego
wyboru, wszystkie pola jako parametr name będą miały wartość np.  hobby .
" value  wartość pola. Skrypty odczytują pola opcji i pola wyboru jako ich wartości, a
nie opisy, dlatego każde pole musi mieć unikalną wartość, reprezentującą skrót
odpowiedzi lub swoisty kod odpowiedzi, np. nawiązując do powyższego przykładu:
jeśli istnieją trzy pola jednokrotnego wyboru o nazwie name= wiek (np. od 18-30 lat,
30-40 lat czy od 40-50) to poszczególne wartości pól mogą wynosić np.  gw1 ,  gw2 ,
 gw3 (od skrótu  grupa wiekowa 1,2,3) lub po prostu 1,2,3, interpretacja tych
wartości należy do projektującego stronę.
Tworzenie i praca z formularzami HTML 21
" checked="checked"  parametr w tej postaci powoduje, ze dane pole jest domyślnie
zaznaczone. Jeśli parametr w ogóle nie występuje pole nie jest domyślnie
zaznaczone.
Zadanie 4. Pola wyboru i pola opcji
Odtworzyć poniższy wydruk strony. Pola powinny mieć odpowiednie parametry name.
Zastosować układ tabelaryczny.
Wypełnij ankietę:
Zaznacz swoje zainteresowania: Liczba mieszkańców miasta w którym
mieszkasz:
Programowanie
Do 50 tysięcy
Grafika komputerowa
od 50  100 tysięcy
Systemy operacyjne
od 100  150 tysięcy
Technologie internetowe
Powyżej 150 tysięcy
Wykształcenie: Znane języki obce:
Zawodowe Angielski
Średnie
Francuski
Wyższe (inż. / lic)
Niemiecki
Wyższe (mgr)
Hiszpański
Tworzenie i praca z formularzami HTML 22
Listy rozwijane
Listy rozwijane działają analogicznie jak pola wyboru oraz pola opcji, ale prezentują możliwe
do wybrania opcje w postaci listy. Listę rozwijaną jednokrotnego wyboru uzyskuje używając
znacznika:

Kod tworzący listę wielokrotnego wyboru różni się od powyższego tylko parametrem
multiple= multiple w znaczniku select. Wielokrotnego wyboru na tym rodzaju listy
dokonuje się poprzez kliknięcie żądanych opcji z przyciskiem Ctrl (control) .
Parametry znacznika select:
" name  określa nazwę własną pola, parametr służy jako nazwa zmiennej podczas
wysyłania wartości pola do serwera.
" size  rozmiar okna listy (dotyczy tylko listy wielokrotnego wyboru. Określa ile opcji
pola wyboru ma być widocznych.
Parametry znacznika option:
" value  określa wartość zaznaczonego pola. (szczegółowy opis parametru w punkcie
Pole wyboru i pole opcji)
" selected= selected - parametr w tej postaci powoduje, ze dane pole jest domyślnie
zaznaczone.
Tworzenie i praca z formularzami HTML 23
Obszar tekstowy
Obszar tekstowy to pole analogiczne do pola tekstowego z tą różnicą, że użytkownik może
wprowadzić więcej niż jedną linię tekstu. Pole wywoływane jest za pomocą znacznika:

Parametry obszaru tekstowego:
" name  określa nazwę własną pola, parametr służy jako nazwa zmiennej podczas
wysyłania wartości pola do serwera
" cols  ilość kolumn, czyli szerokość pola wyrażona w ilości znaków.
" rows  ilość wierszy widocznych w polu. Po przekroczeniu tej ilości uaktywniony
zostaje pasek przesuwu tekstu.
Zadanie 5. Listy rozwijane oraz obszar tekstowy
Odtworzyć poniższy wydruk strony. Pola powinny mieć odpowiednie parametry name.
Zastosować układ tabelaryczny.
Wybierz miasto: Dodatkowe umiejętności: Opisz, co możesz wnieść do
naszej firmy
Tworzenie i praca z formularzami HTML 24
Tabulator w formularzach
Pomiędzy kolejnymi polami formularzy można przemieszczać się za pomocą klawisza
TABULATOR. Kursor przemieszcza się pomiędzy polami formularzy w kolejności w jakiej
pojawiają się one na stronie. W przypadku, gdy zaistnieje potrzeba, aby kursor przemieszał
się pomiędzy poszczególnymi polami w kolejności innej niż kolejność wystąpienia na stronie,
zastosować można parametr tabindex="x", gdzie x oznacza kolejność przejść. Parametr
tabindex można stosować w znacznikach:
" a
" button
" textarea
" select
" input
Parametr ten ma wpływ globalny na elementy na stronie, tzn. że działa niezależnie, czy pola
znajdują się w jednym formularzu, czy w dwóch różnych formularzach. Jeśli na stronie
istnieją dwa różne formularze i każdy z nich posiada 10 elementów, a elementy każdego z
formularzy są ponumerowane kolejno za pomocą parametru tabindex od wartości 1 do 10,
to kursor na stronie będzie się przemieszczał według kolejności: pierwszym będzie pole z
parametrem tabindex= 1 z pierwszego na stronie formularza (f1), a następnie kursor
przemieści się do pola z parametrem tabindex= 1 z drugiego formularza itd. (2f1, 2f2, 3f1,
3f2). Dlatego właśnie używając parametru tabindex należy numerować pola w sposób
globalny niezależnie od tego w którym formularzu się one znajdują.
Zadanie 6. Tabulator w formularzach
W utworzonych w poprzednich ćwiczeniach formularz zmienić kolejność przejścia kursora za
pomocą klawisza TABULATOR. Przetestować działanie
Tworzenie i praca z formularzami HTML 25
Przyciski i wysyłanie formularza
W formularzach HTML wyróżnić można dwa rodzaje przycisków (guzików). Pierwszym jest
guzik kasowania (czyszczenia) zawartości formularza. Wywoływany jest za pomocą
znacznika:

Gdzie value to parametr określający treść napisu na przycisku. Naciśnięcie tak stworzonego
przycisku powoduje, iż dane w formularzu zostaną wyczyszczone, a wartości pól powrócą do
wartości domyślnych.
Kolejnym typem przycisku jest przycisk wysyłania zawartości formularza definiowany przez
znacznik:

Tak jak w przypadku guziku kasowania zawartości, parametr value określa treść napisu na
przycisku. Po naciśnięciu przycisku wysyłania przeglądarka wysyła zawartość formularza do
pliku (skryptu) zdefiniowanego w parametrze action znacznika formularza form.
Zadanie 7. Wysyłanie formularza
Do formularzy wykonanych we wcześniejszych ćwiczeniach dodać guzik kasowania
zawartości oraz guzik wysyłania. Wysłać formularz metodą GET do pliku na serwerze (adres
należy dopisać jako wartość parametru action znacznika form):
http://157.158.131.167/get_table.php
Ponieważ na tym etapie niniejszego kursu nie była jeszcze poruszana tematyka
przetwarzania informacji po stronie serwera, na potrzeby tego ćwiczenia został
przygotowany i umieszony na serwerze plik, który realizuje bardzo proste zadanie: wyświetla
tablicę zmiennych wysłanych do niego, zatem efektem wysłania formularza do w/w pliku
powinno być tylko wyświetlenie na ekran wartości i nazw zmiennych wysłanych przez
formularz HTML. (skrypt dostępny w dodatku nr 1 tego ćwiczenia).
Tworzenie i praca z formularzami HTML 26
Zadanie 8. Wysyłanie formularza - Ankieta
Celem tego ćwiczenia jest zbudowanie kompletnej ankiety dotyczącej dowolnej tematyki np.
dotyczącej danych użytkownika zakładającego konto na portalu studenckim lub użytkownika
portalu wyszukiwania pracy.
Założenia ankiety:
" Minimum 8-10 pytań
" Zastosować wszystkie poznane pola formularzy
" Ankietę wysłać metodą GET do strony (skryptu) z poprzedniego ćwiczenia.
Po wykonaniu powyższego ćwiczenia należy zmienić parametr action znacznika form na wpis:
 mailto:adres@domena.pl oraz parametr method z GET na POST. Przetestować działanie
formularza po dokonanych zmianach.
Zadanie 9. Wysyłanie formularza  Własna wyszukiwarka
Stworzyć własny formularz wyszukiwania plików opierający się na wyszukiwaniu
zaawansowanym wyszukiwarki Google.pl. W tym celu, wyślij metodą GET utworzony
formularz z odpowiednimi wartościami i zmiennymi pod adres: http://www.google.pl/search
Wyniki wyszukiwania powinny otworzyć się w okienku iframe.
Aby sprawdzić, jakie zmienne potrzebne są wyszukiwarce Google do wyszukiwania danej
frazy, plików o danym rozszerzeniu czy zawartości w danym języku, należy prześledzić
zawartość adresu URL podczas wyszukiwania zaawansowanego w wyszukiwarce Google.
Przykładowe zmienne:
" num  odpowiada za ilość wyników na jednej stronie
" as_q  szukana fraza
" lr - języ wyszukiwanych stron (zastosować tylko angielski i polski)
Parametry wyszukiwania (język i rozszerzenie pliku) powinny być listą rozwijaną.
Tworzenie i praca z formularzami HTML 27
ĆWICZENIE 2 - DODATEK 1
Skrypt programu występującego w zadaniu nr 7:
get_table.php




Tablica GET


echo "

Tablica zmiennych wysłanych metodą GET

";
echo "
"; 
print_r($_GET);
echo "
";
?>


Skrypt programu występującego w zadaniu nr 7: 28


Wyszukiwarka

Podobne podstrony:
technologie internetowe cw HTML
technologie internetowe cw MasterPage Sitemap themes
technologie internetowe cw CSS
technologie internetowe cw UC
technologie internetowe cw JS2
technologie internetowe cw WS
technologie internetowe cw KontrolkiSerw1
technologie internetowe cw KontrolkiSerw2
technologie internetowe cw SkrSerw
technologie internetowe cw JS
cw formularz
cw formularz
cw formularz
cw formularz
cw formularz
Technologie Internetowe 2
cw formularz
cw formularz
Technologie Internetowe 1

więcej podobnych podstron