Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Formularze w praktyce

Email Drukuj PDF

Spróbujmy teraz wykorzystać poznane właściwości i metody związane z formularzami. Przydatną i ułatwiającą wpisywanie danych w formularzu funkcją byłoby na przykład automatyczne przemieszczanie kursora do kolejnego elementu. Oczywiście rozwiązanie takie jest sensowne tylko w przypadku danych, których format jest z góry określony. Bardzo dobrym przykładem jest tu kod pocztowy mający format dwie cyfry – trzy cyfry, np. 01-950.

Przemieszczenie kursora do wybranego elementu można osiągnąć w wyniku użycia metody focus w ogólnej postaci:

document.forms.nazwa_formularza.nazwa_elementu.focus();

Dodatkowo należy wykrywać liczbę znaków aktualnie wpisanych do pola tekstowego. Najwygodniej będzie wykorzystać w tym celu zdarzenie onkeyup wywoływane w momencie zwolnienia klawisza. Warto też ograniczyć liczbę znaków, które użytkownik może wpisać. To jednak można zrobić z poziomu HTML-a, przy użyciu atrybutu maxlength znacznika input. Konstrukcja HTML powinna zatem wyglądać następująco:

<input type="text" size ="wielkość początkowa"

  name="nazwa" maxlength="maksymalna liczba znaków"

  onkeyup="procedura_obsługi();"

Pełny kod skryptu realizujący takie zadanie jest widoczny na listingu 5.12.

Listing 5.12. Automatyczna zmiana aktywnego pola tekstowego

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function sprawdz()

    {

      if (document.forms.form1.kod1.value.length >= 2){

        document.forms.form1.kod2.focus();

      }

    }

    </script>

  </head>

  <body>

    <form name="form1"

          action="index.php"

          method="get"

    >

    <div>

    Kod pocztowy

    <input size="2" name="kod1"

      maxlength="2" onKeyUp="sprawdz();"

    >

    -

    <input size="3"name="kod2" maxlength="3">

    </div>

    </form>

  </body>

</html>

W kodzie zostały umieszczone dwa pola tekstowe o nazwach kod1 i kod2 zdefiniowane za pomocą znaczników input z atrybutem type ustawionym na text. Umożliwiają wprowadzenie obu części kodu pocztowego i są częścią formularza o nazwie form1. Pierwszemu z pól została przypisana procedura obsługi zdarzenia onkeyup w postaci funkcji sprawdz. Ta funkcja przy każdym zwolnieniu klawisza w obrębie pola bada, czy liczba wpisanych do niego znaków jest równa 2 lub większa. Odpowiada za to instrukcja:

if (document.forms.form1.kod1.value.length >= 2){

Jeśli przedstawiony warunek jest prawdziwy, wywoływana jest metoda focus drugiego pola, która przenosi do niego kursor.

Równie ciekawym efektem jest automatyczne zwiększanie rozmiaru pola tekstowego w trakcie wpisywania do niego danych. Jak się zapewne domyśla większość czytelników, można to osiągnąć poprzez manipulację atrybutem size wybranego pola. Liczbę wpisanych znaków można odczytać przy użyciu konstrukcji:

document.forms.nazwa_formularza.nazwa_pola.value.length

Modyfikację rozmiaru pola osiąga się natomiast dzięki instrukcji:

document.forms.nazwa_formularza.nazwa_pola.size = rozmiar;

Te informacje pozwalają na napisanie skryptu zachowującego się w opisany sposób. Będzie miał on postać przedstawioną na listingu 5.13.

Listing 5.13. Pole tekstowe automatycznie zmieniające rozmiar

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    var size = 10;

    function sprawdz()

    {

      var pole = document.forms.form1.f1;

      if (pole.value.length <= size){

        pole.size = size;

      }

      else if(pole.value.length < pole.maxLength){

        pole.size = pole.value.length;

      }

      else{

        pole.size = pole.maxLength;

      }

    }

    </script>

  </head>

  <body>

    <form name="form1"

          action="index.php"

          method="get"

    >

    <div>

    Wpisz dowolny tekst

    (rozmiar pola będzie się zmieniał automatycznie):

    <input size="10" name="f1" maxlength="128"

     style="font-family:courier" onkeyup="sprawdz()"

    >

    </div>

    </form>

  </body>

</html>

W formularzu zostało umieszczone pole tekstowe o nazwie f1 (atrybut name). Jego początkowy rozmiar to 10 (atrybut size), a rozmiar maksymalny to 128 (atrybut maxlength). Polu została przypisana procedura obsługi zdarzenia onkeyup w postaci funkcji o nazwie sprawdz. Funkcja ta porównuje liczbę znaków wpisanych do pola tekstowego z jego aktualnym rozmiarem i rozpatruje trzy różne sytuacje:

  1. Liczba wpisanych znaków jest mniejsza od minimalnego rozmiaru pola (pole.value.length <= size) — polu tekstowemu jest przypisywany minimalny rozmiar (wartość zmiennej size).

  2. Liczba wpisanych znaków jest większa od minimalnego rozmiaru pola i mniejsza od maksymalnego (pole.value.length < pole.maxLength) — polu tekstowemu jest przypisywany rozmiar zgodny z aktualną liczbą wpisanych znaków.

  3. Liczba wpisanych znaków jest większa od maksymalnego rozmiaru pola — polu tekstowemu jest przypisywany maksymalny rozmiar (wartość zapisana we właściwości maxLength).

Dzięki takiemu rozwiązaniu rozmiar pola nie zmniejszy się poniżej wartości początkowej ani nie zwiększy powyżej wartości zdefiniowanej w kodzie HTML jako maksymalna.

Przy pracy z formularzami może się również zdarzyć, że konieczne będzie zablokowanie możliwości wpisywania przez użytkownika niektórych znaków. Dzięki temu osoba wprowadzająca dane nie będzie mogła popełnić tak prostego błędu jak podanie liter w numerze telefonu czy kodzie pocztowym. Aby tego rodzaju blokada była możliwa, trzeba sprawdzać, który klawisz został wciśnięty. Niezbędne jest zatem oprogramowanie zdarzenia onkeydown, onkeyup lub onkeypress pola tekstowego służącego do wprowadzania danych. W kodzie funkcji będącej procedurą obsługi zdarzenia należy wtedy rozpoznać kod wciśniętego klawisza i jeśli będzie to klawisz, który należy zablokować, uniemożliwić wyświetlenie znaku.

Zmodyfikujmy zatem prezentowany wcześniej skrypt służący do wprowadzania kodu pocztowego w taki sposób, aby przy wpisywaniu danych istniała możliwość wprowadzania do formularza wyłącznie cyfr. Kody cyfr w standardzie Unicode pokrywają się ze standardem ASCII, zatem zero to 48 (30 szesnastkowo), a dziewięć to 57 (39 szesnastkowo). Tym razem oprogramowane zostanie zdarzenie onkeypress, którego obsługą zajmie się funkcja keyPress.

Niestety, przeglądarki w różny sposób obsługują to zdarzenie. Trzeba zatem będzie rozpoznawać dwie różne sytuacje. Z pierwszą mamy do czynienia, jeśli istnieje obiekt window.event (co jest charakterystyczne dla przeglądarek Internet Explorer i Opera). Jeśli istnieje, to kod klawisza jest zapisany we właściwości keyCode tego obiektu. Zablokowanie klawisza można wtedy osiągnąć przez przypisanie właściwości returnValue obiektu window.event wartości false.

W sytuacji drugiej, kiedy nie istnieje obiekt window.event, można założyć, że do funkcji keyPress został przekazany obiekt evt, a kod wciśniętego klawisza znajduje się we właściwości which tego obiektu (co jest charakterystyczne dla przeglądarek Firefox i Netscape Navigator). W takiej sytuacji zablokowanie klawisza następuje przez przypisanie właściwości returnValue wartości false oraz, co ważne (!), wywołanie metody preventDefault. Należy również zwrócić uwagę, że w przypadku wymienionych przeglądarek taki sposób realizacji spowoduje niemożność wykorzystania także klawiszy funkcyjnych (np. backspace czy klawisze kursorów).

Ostatecznie kod skryptu przyjmie postać zaprezentowaną na listingu 5.14.

Listing 5.14. Zablokowanie wpisywania liter w polu tekstowym

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function sprawdz()

    {

      if (document.forms.form1.kod1.value.length >= 2){

        document.forms.form1.kod2.focus();

     }

    }

    function keyPress(evt)

    {

      if(window.event){

        kod = window.event.keyCode;

      }

      else{

        kod = evt.which;

      }

      if(window.event){

        if(kod < 48 || kod > 57){

          window.event.returnValue = false;

        }

        else{

          window.event.returnValue = true;

        }

      }

      else{

        if(kod < 48 || kod > 57){

          evt.returnValue = false;

          evt.preventDefault();

        }

        else{

          evt.returnValue = true;

        }

      }

    }

    </script>

  </head>

  <body>

    <form name="form1"

          action="index.php"

          method="get"

    >

    <div>

    Podaj kod pocztowy:

    <input size="2" name="kod1"

     maxlength="2" onKeyUp="sprawdz();"

     onkeypress="keyPress(event);"

    >

    -

    <input size="3"name="kod2" maxlength="3"

     onkeypress="keyPress(event);"

    >

    </div>

    </form>

  </body>

</html>

Definicja formularza i pól tekstowych jest zbliżona do przedstawionej we wcześniejszym przykładzie. Różnicą jest obsługa zdarzenia onkeypress. Została mu przypisana procedura obsługi w postaci funkcji keyPress. W tej funkcji najpierw uzyskiwany jest kod naciśniętego klawisza. Rozpatrywane są dwie sytuacje. Pierwsza ma miejsce, gdy istniej obiekt window.event, czyli gdy mamy do czynienia z przeglądarką Internet Explorer lub Opera. Wtedy kod jest odczytywany z właściwości keyCode tego obiektu. Z drugą sytuacją mamy do czynienia, gdy nie istnieje obiekt window.event, czyli gdy mamy do czynienia z przeglądarką Firefox lub Nestcape Navigator. Wtedy kod jest odczytywany z właściwości which obiektu evt przekazanego funkcji jako argument.

Niezależnie od sposobu pobrania kod klawisza jest zapisywany w zmiennej kod. Dalej badane jest, czy wartość zmiennej zawiera się w przedziale 48 – 57 (czyli czy mamy do czynienia z cyfrą). Tu znów konieczne jest rozpoznanie, z jaką przeglądarką mamy do czynienia, i przypisanie odpowiedniej wartości właściwości window.event.returnValue lub evt.returnValue. Odbywa się to zgodnie z zasadami podanymi wyżej.

Kolejny przykład pozwoli na zliczanie wystąpień danego ciągu znaków w tekście. Zostanie w tym celu użyta prezentowana wcześniej metoda operująca na ciągach znaków — indexOf. Formularz będzie miał postać zaprezentowaną na rysunku 5.4.

Rysunek 5.4. Formularz pozwalający na przeszukiwanie tekstu

Składa się on z rozszerzonego pola tekstowego typu textarea, do którego będzie wprowadzany przeszukiwany tekst; dwóch pól tekstowych, które umożliwią wprowadzenie szukanej frazy i prezentację wyników; przycisku Szukaj, który umożliwi rozpoczęcie wyszukiwania. Pełna treść skryptu będzie miała postać widoczną na listingu 5.15.

Listing 5.15. Zliczanie liczby wystąpień wybranej frazy

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function szukaj()

    {

      var tekst=document.forms.formularz1.okno_tekstowe.value;

      var ciag=document.forms.formularz1.ciag_znakow.value;

      if((ciag == "") || (tekst == "")) return;

      var indeks = 0;

      var indeks_wystapienia = 0;

      var liczba_wystapien = 0;

 

      while (indeks_wystapienia != -1){

        indeks_wystapienia = tekst.indexOf(ciag, indeks);

        if (indeks_wystapienia != -1){

          indeks = indeks_wystapienia + ciag.length;

          liczba_wystapien++;

        }

      }

      document.forms.formularz1.ile.value = liczba_wystapien;

    }

    </script>

  </head>

  <body>

    <form name="formularz1"

          action=""

    >

    <table border="0">

    <tr>

      <td>Wpisz w tym oknie tekst:

      </td>

      <td>Wpisz szukany ciąg znaków:

      </td>

    </tr>

    <tr>

      <td rowspan="2">

        <textarea name="okno_tekstowe"

                  cols="35"

                  rows="10"></textarea>

    </td>

     <td valign="top" align="right">

       <input type="text"

              name="ciag_znakow">

       <br /><br />

       <input type   ="button"

              value  ="Szukaj"

              onClick="szukaj();">

    </td>

    </tr>

    <tr>

      <td align="right">

        Podany ciąg znaków wystąpił w tekście:<br />

        <input type="text" name="ile"><br />

        razy.

     </td>

    </tr>

    </table>

    </form>

  </body>

</html>

Wszystkie wymienione elementy zostały zdefiniowane w formularzu za pomocą znaczników <input> z atrybutem type ustawionym na text lub button oraz znacznika <textarea>. Do formatowania formularza została użyta typowa tabela zdefiniowana za pomocą znaczników <table>, <tr> i <td>.

Przeszukiwaniem tekstu oraz wyświetleniem wyniku zajmuje się funkcja szukaj, która jest procedurą obsługi zdarzenia onclick przycisku Szukaj. Tekst przeszukiwany jest zapisywany w zmiennej tekst, a tekst poszukiwany — w zmiennej ciag. Zliczanie wystąpień odbywa się w pętli while, w której jest używana metoda indeksOf operująca na ciągach znaków. Wywołanie tej funkcji ma schematyczną postać:

indeks_wystąpienia = przeszukiwany_tekst.indexOf(szukany_tekst, indeks);

Argumentami wywołania są tu szukany tekst i indeks znaku w analizowanym tekście, od którego ma się rozpocząć przeszukiwanie. Metoda indexOf zwraca indeks pierwszego wystąpienia szukanego ciągu znaków lub wartość –1, jeśli ten ciąg nie został odnaleziony. Tak więc za każdym razem, kiedy wywołanie indexOf zwróci wartość różną od –1, zwiększana jest wartość zmiennej liczba_wystapien, kiedy natomiast wynikiem działania indexOf jest –1, pętla kończy działanie.

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15211403