HTML   Lekcja 3.3   - Formularze

Formularze są elementami wprowadzania danych. Dane te mogą być przetwarzane przez skrypty, wysyłane pocztą, a także zapisywane na serwerze. Stanowią zatem input witryny pozwalający uzyskać informację od użytkownika.

Para znaczników wprowadzających formularz na stronę WWW to: <form> i </form>. Pomiędzy nimi znajduje się pewna ilość zróżnicowanych elementów kontrolnych służących do wprowadzania danych. Można je podzielić na grupy:

P R Z Y C I S K I  -  BUTTONs, służące do podjęcia jakiejś akcji,

O K I E N K A   W Y B O R U  -  CHECKBOXes i RADIO buttons, do zaznaczenia wyboru,

L I S T Y   S E L E K C Y J N E  -  MENUS, służące do dokonywania wyboru,

P O L A   T E K S T O W E  -  TEXT INPUTS służące do wpisywania informacji,

Omówimy je po kolei w tej lekcji. Najważniejszym atrybutami znaczników tworzących te elementy są: - name - służący do identyfikacji, oraz - value - służący do przechowania wpisanej informacji. Jeśli formularz jest wysyłany informacja jest przekazywana w postaci par name - current value.
Current value to wartość value przypisana do elementu kontrolnego w momencie wysyłania formularza. Może mieć ona wartość początkową nadaną przez autora formularza lub wartość zmodyfikowaną przez skrypt lub użytkownika, jeśli wpisał on jakąś nową wartość.

Jeśli dane z formularza nie są nigdzie wysyłane, a tylko przetwarzane na stronie znacznik <form> nie musi zawierać dodatkowych atrybutów, jednakże przy wysyłaniu formularza pocztą e-mail, lub przy wysyłaniu go na serwer np. w celu przetwarzania, lub zapisu danych, dodatkowe atrybuty sa niezbędne. Określają one rodzaj podejmowanej akcji, metodę użytą do wysłania danych, oraz cechy przesyłanej zawartości..
Są to atrybuty: action , method oraz enctype

Atrybut action podaje adres URL na który nalęży przesłać dane. Może to być adres poczty email, np. action="mailto:jacek@firma.pl" albo adres pliku na serwerze, który jest odpowiedzialny za przyjęcie i przetworzenie danych. A oto przykład wartości tego atrybutu: action="../skrypty/formularz1.php"

Przed wprowadzenie ASP i PHP formularze były przetwarzane przez specjalne programy CGI, a zakres tego przetwarzania ograniczał się do możliwości zaimplementowanych w programie obsługującym. Obecnie webmasterzy sami piszą odpowiednie skrypty.

Atrybut method pozwala na wybór jednej z dwóch dostępnych metod, a mianowicie get i post.

Metoda GET jest metodą jawną widoczną dla osób postronnych, a dane przesyłane są jako część adresu URL wymienionego w atrybucie action. Z tego powodu metoda ta używana jest do przesyłania krótkich informacji, do 100 znaków i nie wymagających poufności. Korzyścią jest możliwość zapisu informacji w ramach URL w bookmark-ach (ulubionych)

Metoda POST przesyła dane zawarte w formularzu w sposób niewidoczny dla użytkownika i stosowana jest powszechnie do przesyłania większych ilości informacji wymagających czasami również zaszyfrowania.

Atrybut enctype określa sposób dostarczenia informacji, jeśli nie wpiszemy atrybutu jego domyślną wartością jest enctype=application/x-www-form-urlencoded Informacja będzie ciągiem: name1=value1&name2=value2...
spacje bęą wymienione na "+" , a znaki specjalne zastąpione będą odpowiednim dla nich kodem, (szestnastkowym numerem poprzedzonym znakiem %), np przeniesienie do następnej lini będzie zakodowane jako: "%0D%0A"

Bardziej przyjaznym dla adresata maila będzie użycie enctype=="text/plain" przy którym dane zostaną dostarczone jako pary name - value w oddzielnych liniach dla każdego elementu.

Wreszcie przy przesyłaniu złożonych danychw tym np. plików stosuje sie enctype=multipart/form-data W tym przypadku oczywiście konieczne jest użycie metody post.

A tak oto mogą wyglądać przykładowe znaczniki otwierający i zamykające formularz:
<form name="f1" action="getform.php" method="post"> tutaj znajdujlą się elementy kontrolne </form> i znacznik zamykający.

Przejdziemy teraz do omówienia elementów kontrolnych...



Elementy kontrolne znajdują się pomiędzy znacznikami <form>. Budowane slą przy użyciu znaczników i atrybutów. Oto one:


P R Z Y C I S K I - BUTTONs

Możliwe jest tworzenie 3 typów przycisków:
  • Submit buttons: kiedy aktywowane powodują wysłanie formularza. Formularz może zawierać więcej niż jeden submit button.
  • Reset buttons: kiedy aktywowane powodują wpisanie początkowych wartości elementów kontrolnych.
  • Push buttons: nie posiadają z góry przypisanej roli. Każdy z nich może uruchamiać przypisany mu skryp.

      Buttons, czyli przyciski mogą być tworzone za pomocą znacznika <input> lub znacznika <button>. Przyciski stworzone znacznikiem <button> funkcjonują tak samo jak stworzone znacznikiem <input>. Różnica jest taka, że <button> jako odrębny znacznik blokowy posiada część otwierającą i zamykającą , a zatem może posiadać również zawartość. podczas gdy <input> jest znacznikiem pojedynczym.

    Przykładowo BUTTON zawierający obrazek może przypominać INPUT element, którego type=image ale button pozwala także na dodatkową treść. Dodatkowo większość przeglądarek gwarantuje dla BUTTONS wizualny efekt wciskania. Przykłady:

    Proszę coś wpisać:

    <BUTTON name="reset" type="reset">Reset<IMG src="nie.gif" alt="nie wysyłaj, resetuj" align="absmiddle" hspace="2"></BUTTON>

    <BUTTON name="submit" value="submit" type="submit"> Send<IMG src="tak.gif" alt="tak" align=absmiddle hspace=2> </BUTTON>

    <input type=image src="tak.gif" alt="Tak, tak, wyślij to ">
     

    O K I E N K A   W Y B O R U   -   CHECKBOX i RADIO, do zaznaczenia wyboru,

    Działają jak przełączniki włącz/wyłącz w stosunku do opcji, które obsługują. Jeśli dany checkbox zostaje zaznaczony powoduje to włączenie danej opcji. Kiedy formularz jest wysyłany jedynie zaznaczona informacja jest przekazywana.

    Wiele checkboxes może posiadać ten sam name daje to możliwość zaznaczenie wielu wartości dla tej samej właściwości. Aby utworzyć checkbox używamy znacznika <input>.

    RADIO buttons są podobne do checkbox-es z tą różnicą, że noszą zawsze ten same name i są wzajemnie wyłączne, to znaczy tylko jeden ma szansę być zaznaczony. Jeśli jeden jest zaznaczony reszta jest niezaznaczona. Jeden z Radio buttons jest zawsze zaznaczony i można go wybrać na wstępie używając atrybutu checked wpisanego do znacznika. Jeśli nie przeglądarka powinna zaznaczyć pierwszy z danej grupy. Przykład:

    lubię psy
      <input type=checkbox name="A3" checked> value="lubi psy"

    lubię koty
      <input type=checkbox name="A4"> value="lubi koty"

    jestem kobietą   <input type=radio name="A5" value="kobieta">
    jestem mężczyzną   <input type=radio name="A5" value="mężczyzna">

    L I S T Y     S E L E K C Y J N E     -     MENUS, służące do dokonywania wyboru,

    Tworzone są za pomocą znacznika <select> w połączeniu ze znacznikami: <optgroup> oraz <option>.

    Znacznik <SELECT> posiada następujące atrybuty: name, size oraz atrybut boolowski, bez wartości, multiple. Atrybut size precyzuje ilość rzędów, które mają być widoczne z całej listy opcji. Atrybut multiple zezwala na wybór wielu opcji jednocześnie natomias jego brak umożliwia wybranie tylko jednej.
     
    Znaczniki <OPTION> są odpowiedzialne za tworzenie poszczególnych wierszy listy menu. Jeśli chcemy zaznaczyć jedną z opcji jako domyślną możemy użyć atrybutu selected. Jeśli go nie użyjemy większość przeglądarek uzna pierwszą pozycję listy jako wstępnie wybraną. Jeśli użyliśmy atrybutu multiple możemy zaznaczyć więcej opcji jako wstępnie wybranych.

    Jeśli znacznik <OPTION> zawiera atrybut value, a opcja jest wybrana wysylana jest wartość value, jeśli znacznik nie ma wpisanego walue wtedy jako value wysyłana jest zawartość tekstowa pomiędzy znacznikami <OPTION> i </OPTION>.
    Przykłady:

    > <SELECT size="4" name="selekcja3">

      <OPTION value=nic selected> wybierz: </OPTION>
      <OPTION> Wybór_1 </OPTION>
      <OPTION> Wybór_2 </OPTION>
      <OPTION> Wybór_3 </OPTION>
      <OPTION value=W4> Wybór_4 </OPTION>
      <OPTION value=W5> Wybór_5 </OPTION>
      <OPTION value=W6> Wybór_6 </OPTION>

      </SELECT>
     
     
    A teraz do tej samej listy, do znacznika <SELECT>, dołóżymy atrybut multiple. Spowoduje to możliwość wybrania więcej niż jednej opcji. Przy zaznaczaniu, trzeba będzie trzymać wciśnięty klawisz [SHIFT lub [CTRL].

          Pierwszą opcję zaznaczyliśmy jako wstępnie wyselekcjonowaną.
    A oto przykład tej samej listy menu bez atrybu size w znaczniku <SELECT>. Powoduje to utworzenie listy rozwijalnej.

          Pierwszą opcję zaznaczyliśmy jako wstępnie wyselekcjonowaną.
     



     
    Znaczniki <OPTGROUP> służą do skupiania opcji menu w grupy tematyczne i posiadają atrybut label w celu wyświetlenia nazwy grupy. Zobaczmy teraz przykład użycia znaczników <OPTGROUP>:

       
    <SELECT name="wybory">
    <OPTION selected label="nic" value="nic">wybierz</OPTION>
    <OPTGROUP label="Grupa 1">
    <OPTION label="G1W1" value="W1">Wybór 1</OPTION>
    <OPTION label="G1W2" value="W2">Wybór 2</OPTION>
    <OPTION label="G1W3" value="W3">Wybór 3</OPTION>
    </OPTGROUP>
    <OPTGROUP label="Grupa 2">
    <OPTION label="G2W4" value="W4">Wybór 4</OPTION>
    <OPTION label="G2W5" value="W5">Wybór 5</OPTION>
    </OPTGROUP>
    <OPTGROUP label="Grupa 3">
    <OPTION label="G3W6" value="W6">Wybór 6</OPTION>
    <OPTION label="G3W7" value="W7">Wybór 7</OPTION> </OPTGROUP>
    </SELECT>




    [dalej]