Do tworzenia aktywnych formularzy



Pobieranie 380.04 Kb.
Strona1/3
Data29.04.2016
Rozmiar380.04 Kb.
  1   2   3



PREZENTACJA MOŻLIWOŚCI JĘZYKA HTML5

DO TWORZENIA AKTYWNYCH FORMULARZY

DO WSPÓŁPRACY Z BAZAMI DANYCH

Opracowanie: Michał Wojtusiak


  1. Wstęp

Wszechobecny już Hyper Text Markup Language służący do tworzenia dokumentów jest technologią stosunkowo młodą. W roku 1991 fizyk Berners-Lee po raz pierwszy zamieści ją w Internecie pod nazwą HTMLTags, w wersji zawierającej 22 znaczniki – zdolne stworzyć prosty szkielet dokumentu. Do przesyłania tych dokumentów posłużył odpowiedni protokół Hyper Text Transfer Protocol. Te dwa elementy wraz z konieczną do przeglądania dokumentów przeglądarką stworzyły powszechnie znane w sieci trio „WWW” będące skrótem od słów World Wide Web1.

HTML został napisany w oparciu o Standard Generalized Markup Language (SGML), standardowy uogólniony język służącym do definiowania dowolnych znaczników i ustalania zasad ich poprawnego użytkowania. Choć HTML na początku nie posiadał formalnej definicji w SGML to w dwa lata po udostępnieniu przez Bernersa-Lee swoich znaczników, opublikowana została również jego autorstwa, przy współudziale Danay’a Connolly pierwsza propozycja specyfikacji języka HTML. Specyfikacja ta zawierała opis gramatyki w postaci SGML - Document Type Definition, dzięki któremu można było swobodnie modyfikować atrybuty istniejących już znaczników HTML–a oraz dodawać całkowicie nowe2. Rozwijający się język HTML w 1995 roku został zatwierdzony jako wersja dwa, wersja trzecia nie doczekała się rekomendacji. Otrzymała ją dwa lata później wersja 3.2. W kolejnych specyfikacjach wprowadzono zmiany, których zadaniem było poprawienie przenośności dokumentów HTML między różnymi platformami i przeglądarkami. Zrozumiano bowiem, że jedynie całkowita zgodność różnych systemów zagwarantuje dalszy rozwój Internetu. Brak tej zgodności doprowadził by do powstania gąszczu różnego rodzaju formatów, paraliżujących powszechne wykorzystanie sieci. W tym celu specjaliści rozszerzając potencjał języka HTML, zadbali min by starsze wersje dokumentów były nadal dostępne w przeglądarkach.

Dodatkowym motorem ewolucji HTML-a była potrzeba umożliwienia korzystania z informacji sieciowych za pomocą różnych urządzeń, takich jak choćby telefony komórkowe, a także uwolnienie się konfiguracji sprzętowej i parametrów łączy sieciowy.

Prawdziwie widoczne zmiany znane nam dzisiaj przyniosła wersja czwarta HTML-a, która to została wzbogacona o kaskadowe arkusze stylów3, skrypty, ramki i osadzanie obiektów. Poprawiono obsługę tekstu, rozbudowano opcję tabel i formularzy4. Tym ostatnim poświęcona zostanie niniejsza praca, która będzie miała charakter porównawczy ostatniej już zatwierdzonej wersji poprawkowej 4.01 a szkicem zaskakującej pod wieloma względami wersji piątej - HTML5.

Wyżej wymieniony porównawczy charakter pracy postawił przede mną następujące cele:

Przedstawienie możliwości formularzy w HTML 4.01

Przedstawienie możliwości formularzy HTML 4.01 w połączeniu z Java Script

Instalacja i konfiguracja programów Aptana Studio 2.0, ConText, serwerów: NetworkActivWebServerV3.5 i sqlite3

Przedstawienie możliwości formularzy XForms i HTML5

Przetestowanie przykładowych formularzy przy wykorzystaniu skryptu PHP w połączeniu z bazą danych SQlite3.

  1. Możliwości formularzy w HTML 4.01

Początkowo dokumenty HTML służyły jedynie do odbierania informacji. Użytkownik nie miał fizycznej możliwości wysłania danych, co uznano za poważną wadę. Rozbudowano więc HTML tak, że przeglądarki stały się aplikacjami graficznymi o rozbudowanych interfejsach użytkownika (GUI)5.

Pojawienie się formularzy w dokumentach HTML uczyniło wielki technologiczny krok w sposobie przesyłania danych po stronie klienta. Stworzone formularze, stanowiące zbiór złożonych i elastycznych platform, umożliwiły stosowanie podstawowych kontrolek . Dzięki nim użytkownik może przekazywać informacje do skryptów lub przesyłać dane do serwera. Poniższy rysunek przedstawia formularz Kandydat w standardzie 4.01 utworzony na potrzeby niniejszej pracy.



Rys.1 Formularz Kandyda

Po wprowadzeniu zbioru danych w odpowiednich polach formularza, są one następnie przekazane do odpowiedniego programu obsługi formularzy odpowiadającego za ich przetwarzanie.

    1. Formularze w dokumentach HTML

Wstawianie formularza do dokumentu sprowadza się do wymienienia wszystkich jego pól w obszarze znacznika
. Przy czym HTML 4.01 umożliwia formatowanie formularza wraz z występującymi w jego obszarze znacznikami tak samo jak inne elementy dokumentu, oraz otwarł przed nim możliwość stanięcia się elementem wewnętrznym różnego rodzaju kontenerów takich jak np. tabele.


Podstawowa składnia znacznika zawiera atrybut action wyznaczający adres URL skryptu, do którego zostaną przesłane wprowadzone dane, jak przedstawiono poniżej:



Adres ten może być dowolny, powinien jednak wyznaczać skrypt lub inny mechanizm poprawnie interpretujący przekazane informacje i przetwarzający je w określony sposób.

Drugi atrybut method określa sposób przesyłania danych do programów obsługi. Przyjmuje on dwie wartości get i post, które odpowiadają metodzie dostarczania danych w protokole HTTP o tej samej nazwie. Get zakłada przekazywanie informacji przez dołączanie ich do ciągu tekstowego adresu URL6, post wiąże się z przekazaniem danych zakodowanych w ciele protokołu HTTP7 .

Kolejne atrybuty w ramach znacznika , wykorzystywane w bardziej skomplikowanych formularzach to akcept, akcept-charset, enctype i id. Trzy pierwsze mają kluczowe znaczenie w przypadku przetwarzania danych binarnych i danych zapisanych za pomocą narodowych zestawów znaków. Atrybut id, który zastąpił atrybut name, służy do identyfikowania formularza w dokumencie, co jest szczególnie potrzebne, gdy strona WWW zawiera kilka formularzy. Ostatni atrybut omawianej technologii HTML target, określający ramkę lub okno, w których dokument ma zostać otwarty stanowi już parametr przestarzały8.

    1. Etykiety pól

Niewątpliwą zasługą HTML 4.01 jest ułatwienie osobom niepełnosprawnym obsługę formularzy poprzez wprowadzenie znacznika

    1. Pola tekstowe i pola haseł

Wypełniają dowolny formularz dostępny na stronie WWW, można bez trudu zauważyć, że pola tekstowe są najczęściej wykorzystywanymi polami formularza. Do nich wprowadza się treści o niedużych rozmiarach jak: imiona, nazwiska, nazwy miejscowości stanowiących integralną część każdego adresu. Zapis składni pola tekstowego prezentuje się następująco:

<input type=”text” id=”nazwa_pola” value=”wartość_początkowa”

size=”rozmiar_pola” maxlength=”maksymalna liczba znaków”>

Nie wszystkie wyżej wymienione atrybuty znacznika muszą być zawsze stosowane, ale ich użycie służy optymalizacji działania pola tekstowego formularza.

Przykładowy kod pola testowego przeznaczonego do wprowadzania adresu poczty elektronicznej umieszczony w strukturze tabeli przyjmuje następującą postać:

<tr>

<td><label for=”email”> e-mail label>td>

<td><input type=”text” id=”email” value=jnowak@wp.pl size=”25” maxlength=”35”>td>



Oprócz zwykłych pól tekstowych formularz umożliwia użycie pola haseł. Pola te charakteryzują się tym, że użytkownik nie może zobaczyć wprowadzonego tekstu, zamiast nich wyświetlają się gwiazdki. W celu umieszczenia pola hasła na stronie należy wpisać następujący kod

<tr>

<td><label for=”hasło”> Hasło label>td>

<td><input type=”password” id=”hasło” value=”” size=”20” maxlength=”25”>td>

tr>

Pamiętać należy, że pole hasła chroni wprowadzony tekst przed podejrzeniem przez niepożądaną osobę, nie zapewnia jednak ochrony danych na poziomie transmisji danych10.

    1. Przyciski opcji

Formularze w wersji 4.01 HTML – a umożliwiają użycie przycisków opcji w celu wybrania, którejś z nich przez użytkownika. Zaznaczenie jednej opcji wiąże się z automatycznym wyłączeniem innej. Znacznik dla przycisku opcji prezentuje następujące składniki:

<tr>

<td> <p><input type=”radio” id=”nazwa_grupy”

[checked=”checked”]

value=”wartość_wybranej_pozycji” />Opis przycisku opcji.
td
>

tr>

gdzie atrybut checked powoduje domyślne zaznaczenie jednej z pozycji.

Poniżej przedstawiam przykładowy kod umożliwiający wybór wieku

<tr>

<td> <p><input type=”radio” id=”0-3” value=”0-3”/>0-3 lat

td
>

<td> <p><input type=”radio” id=”4-5” value=”4-5”/> 4-5 lat

td
>

tr>

W przypadku zaznaczenia którejkolwiek prezentowanej opcji atrybut value określający jej wartość, przekazuje ją programowi obsługi formularza. Wartość każdej opcji musi być niepowtarzalna w danej grupie. W przeciwieństwie do atrybutu value atrybut id w danej grupie opcji powinien przyjmować jednakową wartość, gdyż jest on jej identyfikatorem11.

    1. Pola i listy wyboru

Zbliżoną do definicji przycisku opcji jest definicja pola wyboru. Obie w zasadzie różni tylko to, że w grupie kontrolek pól wyboru występuje możliwość zaznaczenia kilku kontrolek naraz. Zamieszczony na stronie poniższy kod

<tr>

<td> <p><input type=”checkbox” id=”nazwa_grupy”

value=”wartość_wybranej_pozycji”/>Opis przycisku opcji


td>

tr>

graficznie przyjmuje postać kwadratów. Warto pamiętać, że w przypadku gdy nie zostanie określona wartość w obrębie definicji pola, value przyjmuje wartość on12.

Formularze w standardzie 4.01 umożliwiają również dokonywanie wyboru przy pomocy listy wyboru. Tekst listy opcji może być wyświetlony w widocznym polu lub w formie listy rozwijanej, a do utworzenia go służą znaczniki <select>, <option> i <optgroup>. Użycie tego pierwszego:

<tr>

<td> <select id=”nazwa ” size=”liczba_wyświetlonej_pozycji”

[multiple=”multiple”] > select>

td>

tr>

skutkuje stworzeniem kontenera tekstowego, a obecny w jego obrębie atrybut multiple umożliwia zaznaczenie większej liczby opcji. Z kolei znacznik <option> odpowiada za dodanie jednej wartości do listy. W przypadku gdy zamierzamy zgrupować zbiór opcji stosujemy znacznik <optgroup>. Użycie wszystkich trzech wyżej wymienionych znaczników w przykładowym niżej kodzie prezentuje się następująco:

<p><tr>

<td> Wybierz rower: td>

<td> <select id=”rowery []13” size=”7” multiple=”multiple”>

<optgroup label=”Rowery krosowe” >

<option=”Kross Sign DS”>

<option=”Kross Trans Continental 2010”> optgroup>

select>td>

tr>p>

    1. Obszary tekstowe i ukryte pola

Bardzo przydatną funkcją formularza dostępną w standardzie HTML 4.01 jest wprowadzanie większej ilości tekstu w obszarze tekstowym. Obszar ten możemy wywołać stosując znacznik <textarea>. Możemy określić jego wysokość i szerokość przy pomocy atrybutów określających liczbę kolumn i wierszy:

<textarea id=”nazwa pola” cols=”l._kolumn” rows=”l._wierszy”>

Teks umieszczony między znacznikiem otwierającym <textarea …> a zamykającym textarea> zostaje wyświetlony na stronie, w możliwie jak najdłuższym wierszu, chyba, że umieszczony w obszarze tekstowym ciąg znaków został uprzednio podzielony na wiersze przy pomocy klawisza Enter.

Oprócz obszarów tekstowych formularz może zawierać pala ukryte, niewidoczne dla użytkownika, ale z wartością przesyłaną wraz z formularzem. Pola te mogą służyć np. do podania różnego rodzaju informacji jak opis formularza lub jego części itd. Aby ukryć dowolny tekst w formularzu należy użyć następującej składni kodu:

<input type=”hidden” id=”nazwa_pola” value=”wartość_pola” />

    1. Przyciski, rysunki i pola plików

Podobnie jak pola tekstowe przyciski są stałym elementem formularzy HTML. Umieszczenie ich na stronie wymusza wypisanie następującego ciągu znaków:

<tr>

<td>

<input type=”button” id=”nazwa_pola” value=”wartość_pola”

onclick=”buynow”/>

td>

tr>

Obecny w kodzie atrybut onclick nie jest elementem wpływającym na graficzne utworzenie przycisku, ale odpowiada za procedurę skryptową, w tym wypadku za procedurę kupowania (”buynow”). Gdy wartość atrybutu type przyjmie wartość ”submit” lub ”reset” to w pierwszym przypadku użytkownik będzie mógł przesłać dane do serwera, a w drugim przywrócić zawartość pól do stanu początkowego, a atrybut value jeśli nie zostanie wzbogacony o wartość =”opis_przycisku” to automatycznie przycisk otrzyma odpowiedni domyślny tekst Prześlij kwerendę lub Resetuj.

Do przekazywania informacji służyć mogą również rysunki:

<tr>

<td>

<input type=”image” id=”nazwa_pola” src=”adres_URL_rysunku”/>

td>

tr>

Mogą one bez kłopotu wyręczyć klasyczne przyciski nadając formularzowi niestandardowego graficznego stylu. Aby jednak rysunek spełniał funkcję przesyłacza danych konieczne jest wzbogacenie kodu o atrybut onclick.

Z kolei pola plików służą do wyszukiwania plików lokalnych, które następnie można przesłać jako załącznik formularza. Składają się one z pola tekstowego i przycisku. Aby uzyskać wyżej opisany efekt należy przypisać atrybutowi type wartość ”file”. Całościowa składnia prezentuje się następująco:

<tr>

<td>

<input type=”image” id=”nazwa_pola” src=”adres_URL_rysunku”/>

td>



    1. Grupy pól i ich opis

Opisane w podrozdziale 1.4 przyciski opcji można zgrupować w ramach jednego kontenera za pomocą znacznika <fieldset>. W wyniku jego zastosowania dana grupa kontrolek zostaje otoczona cienką linią. Za pomocą znacznika <legend> można dokonać opisu zbioru co przedstawiono poniżej:

<fieldset>

<legend> Zawierzątkalegend>

<input type=”radio” id=”zwirzątka” value=”kot”/> kot br>

<input type=”radio” id=”zwierzątka” value=”pies”/> pies



    1. Uniemożliwienie wprowadzania zmian

Zdarza się, że zachodzi konieczność zastosowania pola wyłączonego lub pola tylko do odczytu. Pole wyłączone tworzy się za pomocą atrybutu disabled dodanego do znacznika pola tekstowego, zaś dodanie atrybutu readonly uniemożliwia modyfikację wprowadzonych w nie danych. Oto przykład zastosowania omawianych znaczników:

<tr>

<td>

<input type=”text” size=”15” value=”dowolny_tekst”

disabled=”disabled”> td>

<td>

<input type=”text” size=”15” value=” dowolny_tekst”

readonly =”readonly”> td>



    1. Funkcje zdarzeń w obsłudze formularzy

Jeśli mielibyśmy podać absolutne novum w czwartej wersji języka HTML, które wywołało wielkie emocje to zdarzenia bez wątpienia się do nich zaliczają. Innowację tą w skrócie można scharakteryzować jako akcje wyzwalane przez użytkownika lub przeglądarkę na które można w wybrany sposób reagować. Akcje te można wyzwolić przez umieszczenie wybranego odpowiedniego atrybutu w kodzie HTML i wydanie polecenia przy użyciu dowolnego języka skryptowego. Poniżej przedstawiony został przykładowy atrybut, który powoduje wykonanie skryptu przez kliknięcie przycisku myszą:

<tr>

<td>

<input type=”button” id=”evaluate” value=”Oblicz”

onclick=”eval_eg();”/>td>



Obecnie liczba dostępnych atrybutów zdarzeń przekracza dwadzieścia14

W formularzu Kandydat zastosowane zostały wybrane zdarzenia. Ustawiając kursor myszy w obrębie banera kolor czcionki zmienia się z czarnego na zielony(|rys.2). Usuwając kursor czcionka odzyskuje swoją pierwotną barwę (rys.1).



Rys.2 Wywołanie zdarzenia zmiany koloru czcionki z czarnej na zieloną po najechaniu kursora myszy na obszar banera

Opisany wyżej efekt uzyskany został stosując zdarzenia onmouseover i onmouseover:

<div class=”baner”

onmouseover=”akcja2();” onmouseover=”akcja3();”>



  1   2   3


©absta.pl 2019
wyślij wiadomość

    Strona główna