Strona z ćwiczeniami jest stroną archiwalną,
wiele materiałów jest już nieaktualnych,
ale jeżeli ktoś ma ochotę, to zapraszam... :)

Dzieła Człowieka

Głowa do góry! - rzekł kat zarzucając stryczek

Zajęcia specjalizacyjne: III klasa TI
HTML

Ćwiczenie 8 - Formularze

Zadania do wykonania:


  1. spakowane pliki do zadań: pliki_8.zip (8KB)

W ćwiczeniu 8 zajmować się będziemy formularzami, czyli sposobem komunikacji czytelnika strony WWW z jej autorem.

Formularze to sposób komunikacji z autorem strony. Można, dzięki formularzom, uzyskiwać informację zwrotną dotyczącą witryny internetowej, a także wypełniać ankiety i dokonywać jakichś zamówień.

Formularze wiążą się ściśle z obsługą skryptów na serwerze, szczególnie języka PHP. A to nie do końca jest przedmiotem tych ćwiczeń.

Jednak to w niczym nie przeszkadza, aby poznać znaczniki odpowiedzialne za formularze. A gotowy formularz można wysłać na adres e-mail. Warunkiem jest tylko użycie klienta pocztowego.

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.

Głównym znacznikiem w którym mieści się formularz jest: <form>...</form>. Używamy go z takimi atrybutami: <form action="akcja" method="metoda" enctype="enctype">...</form>.


  1. action:
  2. ten atrybut odpowiada za wykonanie formularza
  3. określamy jaka akcja ma być wykonana
  4. w naszych ćwiczeniach użyjemy:
  5. "mailto:adres e-mail gdzie wysłać formularz"
  6. można jeszcze dopisać: ?subject=temat ankiety
  7. w przypadku większej ilości ankiet
  8. atrybut action wygląda wtedy tak:
  9. "mailto:autor_strony@jego_domena?subject=temat_ankiety"

  1. method:
  2. sposób komunikowania się przeglądarki czytelnika z serwerem
  3. czy przesyła ona jakieś informacje, czy też je pobiera
  4. "post" - wysyła informacje - to wybieramy
  5. "get" - pobiera informacje

  1. enctype:
  2. sposób konwersji danych z formularza
  3. w przypadku zwykłych danych wysyłanych pocztą wpisujemy
  4. "text/plain" - aby znaki z formularza były właściwie konwertowane
  5. i docierały w czytelnej postaci
  6. w przypadku plików wpisujemy "multipart/form-data"

W XHTML zawartość formularza należy umieścić wewnątrz znacznika będącego pojemnikiem, takim jak na przykład <div>...</div>. Wtedy szkielet formularza będzie wyglądał następująco:


  1. <form
  2. action="mailto:autor_strony@jego_domena?subject=temat_ankiety"
  3. method="post"
  4. enctype="text/plain">
  5. <div>
  6. Tutaj będzie zawartość formularza
  7. </div>
  8. </form>

Kolejna istotna rzecz w formularzach to pola tego formularza zwane też kontrolkami, które wypełniane są różnego rodzaju informacjami:

Głównym znacznikiem dla kontrolek jest <input type="rodzaj"/>. Mogą być następujące rodzaje atrybutu type:


  1. rodzaj:
  2. "text" - pole tekstowe
  3. "password" - pole do wpisywania hasła
  4. "radio" - pole jednokrotnego wyboru
  5. "checkbox" - pole wielokrotnego wyboru
  6. "submit" - przycisk wysłania formularza
  7. "image" - graficzny przycisk wysyłania formularza
  8. "reset" - przycisk czyszczenia formularza
  9. "button" - przyciski ogólnego zastosowania
  10. "file" - wysyłanie plików na serwer
  11. "hidden" - pole ukryte

Typ "text" jest podstawowym rodzajem pola tekstowego. Tworzy pole tekstowe o wysokości jednej linii i określonej długości. W nim umieszcza się tekst.

Można użyć z takimi atrybutami: <input type="text" name="nazwa" value="wartość" size="k" maxlength="m" readonly="readonly" disabled="disabled"/>

Typ "password" wprowadza pole, dzięki któremu można wpisać hasło. Wpisane zanki wyświetlane są w postaci gwiazdek ("*") lub kropek ("•")

Można również stosować dokładnie te same atrybuty jak w polu tekstowym (jednak raczej bez podawania hasła domyślnego). Możliwe atrybuty to: <input type="password" name="nazwa" size="k" maxlength="m" readonly="readonly" disabled="disabled"/>.


  1. nazwa:
  2. nazwa danego pola
  3. niepowtarzalna w obrębie jednego formularza

  1. wartość:
  2. domyślna treść odpowiedzi
  3. będzie dołączona jeżeli użytkownik nie wpisze innej

  1. k:
  2. długość pola w ilości znaków
  3. użytkownik może wpisać dowolną ilość znaków

  1. m:
  2. maksymalna dopuszczalna ilość liter
  3. użytkownik nie będzie mógł wpisać więcej

  1. readonly:
  2. tekstu domyślnego nie będzie można modyfikować

  1. disabled:
  2. zablokowanie pola

Z tymi dwoma typami proszę wykonać:


  1. text:
  2. a) pole tekstowe o wielkości 40 znaków, 35 znaków dopuszczalnych, bez domyślnej odpowiedzi
  3. b) pole tekstowe o wielkości 40 znaków, 35 znaków dopuszczalnych, z domyślną odpowiedzią
  4. c) pole tekstowe o wielkości 40 znaków, 35 znaków dopuszczalnych, zablokowane

Krok 1

Krok 2


  1. password:
  2. a) pole z hasłem o wielkości 25 znaków, 20 znaków dopuszczalnych

Krok 3

Krok 4

Typ "radio" spowoduje wyświetlenie pola opcji, które można zaznaczać myszką - włączać i wyłączać. Możliwe jest zaznaczenie tylko jednego takiego pola - pozostałe są wyłączone. Włączenie innego pola - wyłącza to poprzednie. To pole jest okrągłe.

Typ "checkbox" spowoduje wyświetlenie pola wyboru, które można zaznaczyć myszką, ale też i odznaczyć. Możliwe jest zaznaczenie większej ilości takich pól. To pole jest kwadratowe.

Atrybuty dla tych typów są następujące: <input type="radio" name="nazwa" value="wartość" checked="checked" disabled="disabled"/>


  1. nazwa:
  2. nazwa danego pola
  3. wszystkie pola tego typu dla tego samego pytania
  4. muszą nosić taką samą nazwę

  1. wartość:
  2. domyślna treść odpowiedzi
  3. absolutnie konieczna
  4. inna dla każdej możliwości

  1. checked:
  2. domyślne zaznaczenie pola

  1. disabled:
  2. zablokowanie pola

Z tymi dwoma typami proszę wykonać:


  1. radio:
  2. a) pole typu radio, trzy możliwe odpowiedzi, jedna wybrana
  3. b) pole typu radio, trzy możliwe odpowiedzi, z domyślną odpowiedzią

Krok 5


  1. checkbox:
  2. a) pole typu checkbox, trzy możliwe odpowiedzi, jedna domyślna
  3. b) pole typu checkbox, trzy możliwe odpowiedzi, żadna wybrana

Krok 6


A tu wszystkie trzy odpowiedzi wybrane:

Krok 7

Typ "submit" spowoduje wyświetlenie przycisku z tekstem. Naciśnięcie go spowoduje wysłanie formularza z danymi.

Atrybuty dla tego typu to: <input type="submit" value="wartość" disabled="disabled" />.


  1. wartość:
  2. napis, który pojawi się na przycisku
  3. "Prześlij kwerendę" - domyślnie
  4. jeśli nie podamy value

  1. disabled:
  2. zablokowanie pola

Zadanie do wykonania:


  1. submit:
  2. a) pole typu submit z określonym napisem

Krok 8


Typ "image" wyświetli na ekranie przycisk z obrazkiem, po naciśnięciu którego, nastąpi wysłanie formularza.

Atrybuty dla tego typu to: <input type="image" src="ścieżka dostępu do pliku graficznego" alt="tekst alternatywny" />.


  1. ścieżka dostępu do strony:
  2. względna ścieżka dostępu do pliku html
  3. należy wpisać drogę uwzględniając wszystkie foldery
  4. wchodząc do folderu wpisujemy jego nazwę/
  5. wychodząc z folderu wpisujemy ../
  6. na końcu podajemy nazwę pliku z rozszerzeniem html

  1. tekst alternatywny:
  2. tekst zastępczy, kiedy nie wyświetla się obrazek
  3. i który pojawi się po najechaniu kursorem

Zadanie do wykonania:


  1. image:
  2. a) pole typu image,
  3. spakowane pliki do zadań: pliki_8.zip (8KB)

Krok 9

Krok 10

Typ "reset" wyświetla na ekranie przycisk, który wyczyszcza wszystkie udzielone do tej pory odpowiedzi w ankiecie lub przywraca domyślne wartości.

Atrybuty dla tego typu są takie: <input type="reset" value="wartość" disabled="disabled" />.


  1. wartość:
  2. napis, który pojawi się na przycisku
  3. "Resetuj" - domyślnie
  4. jeśli nie podamy value

  1. disabled:
  2. zablokowanie pola

Zadanie do wykonania:


  1. reset:
  2. a) pole typu reset

Krok 11


Typ "button" wstawia zwykły przycisk. Podobnie działa znacznik <button>...</button>. Pomiędzy znacznikami wpisujemy napis na przycisku.

Domyślnie naciśnięcie żadnego z nich nie spowoduje wykonania jakiejś akcji (np. wysłania formularza) - aby coś się stało, należy skorzystać ze skryptu JavaScript.

Atrybuty dla typu "button" są takie: <input type="button" value="wartość" />.


  1. wartość:
  2. napis, który pojawi się na przycisku

Zadania do wykonania:


  1. input typu button:
  2. a) przycisk typu button

  1. <button>...</button>:
  2. a) przycisk wykonany za pomocą <button>...</button>, z dowolnym napisem

Krok 12


Typ "file" to pole wyboru pliku który ma zostać wysłany na serwer. Dodatkowo trzeba ustawić typ kodowania formularza na: multipart/form-data za pomocą atrybutu enctype znacznika <form enctype="multipart/form-data">.

Dodatkowo wymagana jest odpowiednia obsługa tak przesłanego pliku na serwerze. Na szczęście współczesne języki takie jak np. PHP załatwiają większość "czarnej roboty", więc jest to stosunkowo proste.

Ten typ opisujemy z takimi atrybutami: <input type="file" name="nazwa" />.


  1. nazwa:
  2. nazwa danego pola
  3. zostanie wysłana wraz z formularzem

Zadanie do wykonania:


  1. file:
  2. a) pole typu file

Krok 13

Krok 14

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

źródło: www.kurshtml.boo.pl


Kolejny znacznik obsługujący formularze to <select> <option>...</option> </select>. Dzięki niemu można zbudować listę rozwijaną (przewijaną) lub menu wielokrotnego wyboru. Kliknięcie powoduje zaznaczenie jednej opcji, a przy wciśniętym klawiszu Ctrl większej ilości. Również wpisujemy w znaczniku <form>...</form>.


  1. <form action="...">
  2. <select>
  3. <option >pierwsza możliwość</option>
  4. <option>druga możliwość</option>
  5. ...
  6. </select>
  7. </form>

Atrybuty dla tego znacznika: <select name="nazwa" multiple="multiple" size="w" disabled="disabled"> <option selected="selected">...</option> </select>.


  1. nazwa:
  2. nazwa danego pola
  3. zostanie wysłana wraz z formularzem

  1. multiple:
  2. możliwość wyboru kilku opcji
  3. za pomocą klawisza Ctrl

  1. w:
  2. ilość wierszy (linii) z odpowiedziami
  3. będą jednocześnie widoczne na ekranie
  4. pole może posiadać więcej opcji
  5. niezależnie od atrybutu size="..."

  1. disabled:
  2. zablokowanie pola

  1. selected:
  2. wybrana domyślnie odpowiedź

Zadanie do wykonania:


  1. select:
  2. a) lista rozwijalna, na 5 wierszy, 9 opcji, z jedną odpowiedzią
  3. b) lista rozwijalna, na 9 wierszy, 15 opcji, z możliwą większą ilością odpowiedzi

Krok 15


Kolejnym elementem, który może być wykorzystany przy budowie formularza jest wielowierszowe pole tekstowe. Używa się do tego znaczników <textarea>...</textarea>.

Polecenie to wyświetla obszar tekstowy, który może składać się z dowolnej ilości kolumn i wierszy. Można w nim wpisać dłuższą treść.

Uwaga techniczna:

Wewnątrz <textarea>...</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.

źródło: www.kurshtml.boo.pl


Można użyć takich atrybutów: <textarea name="nazwa" cols="r" rows="l" readonly="readonly" disabled="disabled">...</textarea>.


  1. nazwa:
  2. nazwa danego pola
  3. zostanie wysłana wraz z formularzem

  1. r:
  2. ilość kolumn tekstu, które zmieszczą się bez przewijania

  1. l:
  2. ilość wierszy tekstu, które zmieszczą się bez przewijania

  1. readonly:
  2. tekstu zapisanego domyślnie w tym polu
  3. nie będzie można modyfikować

  1. disabled:
  2. zablokowanie pola

Zadanie do wykonania:


  1. <textarea>...</textarea>:
  2. a) wielowierszowe pole tekstowe, 25 kolumn na 25 wierszy, z możliowścią modyfikacji
  3. b) wielowierszowe pole tekstowe, 25 kolumn na 25 wierszy, tylko do odczytu

Krok 16

Krok 17

Krok 18

W formularzu można jeszcze użyć znaczników <fieldset> <legend>...</legend>...</fieldset>. Dzięki nim można zgrupować tematycznie kilka pól formularza, które będą objęte ramką. Znacznik <legend>...</legend> dodaje ponadto tytuł na ramce grupującej.

Można w nim użyć atrybutu: <legend align="sposób">...</legend>. Atrybut align jest zdeprecjonowany przez specyfikację HTML 4.01.


  1. sposób:
  2. "left" - tytuł położony przy lewej krawędzi ramki grupującej (domyślnie)
  3. "center" - tytuł ułożony na środku
  4. "right" - po prawej

Na koniec proszę wykonać formularz zbiorczy:


  1. formularz zbiorczy:
  2. a) pole typu text, rozmiar 40 znaków, 35 znaków dopuszczalnych
  3. b) pole typu password, rozmiar 25 znaków, 20 znaków dopuszczalnych
  4. c) pole typu radio, trzy możliwości
  5. c) pole typu checkbox, pięć możliwości
  6. d) lista rozwijalna, rozmiar 5 wierszy, 9 opcji, dopuszczalna większa ilość odpowiedzi
  7. e) pole typu file
  8. f) pole typu reset
  9. g) pole typu submit
  10. h) wielowierszowe pole tekstowe, 50 kolumn na 3 wiersze
  11. każde pole opisane komentarzem
  12. wszystko objęte znacznikiem <form>...</form>
  13. wszystko zgrupowane w jednej ramce <fieldset>...>/fieldset>, opatrzonej tytułem

Krok 19

Krok 20


Oceniany będzie plik formularze.html z wykonanymi wszystkimi formularzami, polami, listami po kolei, pojedynczo oraz formularz zbiorczy - wszystko zgodnie z krokami.




Strona Główna


do góry

Przy przygotowywaniu powyższego ćwiczenia wielką pomocą służył kurs HTML-a - w wersji online: http://www.kurshtml.boo.pl, jak również w wersji offline do pobrania z tej samej strony.

Copyright © 2008   Sławek Rokicki