Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Pola wprowadzania danych

Pola wprowadzania danych są elementami formularzy. W czasie poprzednich zajęć poznaliśmy pola typu text oraz submit, a więc "zestaw minimalny" niezbędny do wysyłania danych. Dzisiaj dołączmy jeszcze element <inut type="number" />, przeznaczony do wprowadzania liczb.

Atrybuty pól wprowadzania danych

Atrybuty, których wartości są wysyłane z formularzem:

  • name="" - nazwa pola: wartość tego atrybutu piszemy małymi literami stosując zasady nazewnictwa w programowaniu. Wszystkie pola powinny mieć unikatową nazwę, za wyjątkiem pól typu radio, czyli pól opcji, które powinny mieć nazwę identyczną.
  • value="" - wartość pola.

Atrybuty związane z wyglądem i wypełnianiem formularza:

  • size="" - rozmiar pola: mierzony liczbą znaków czcionki monotypicznej, mieszczących się w widocznej części pola tekstowego, wpisanie dłuższego łańcucha znaków, spowoduje przewinięcie zawartości pola;
  • maxlength="" - maksymalna długość: maksymalna liczba znaków jaką można wprowadzić do pola tekstowego;
  • autocomplete="on" lub autocomplete="off" - poznaliśmy już jako atrybut znacznika form, ten atrybut można również zastosować do ustalania właściwości konkretnego pola;
  • autofocus="autofocus" - zdefiniowany dla elementu sprawia, że po wczytaniu strony element ten staje się domyślnie aktywny i gotowy do odbierania danych od użytkownika;
  • checked="checked" - ma zastosowanie dla elementów radio oraz checkbox i oznacza zaznaczenie danego pola. Poznamy te elementy na następnych zajęciach;
  • disabled="disabled" - ten atrybut powoduje, że element jest co prawda widoczny (zwykle nabiera odcienia szarości), ale nie można go użyć, np. nie można nic w nim wpisać;
  • min="" oraz max="" - minimum, maksimum: przeznaczone są do prezentacji liczb i określają zakres liczb, które możemy wprowadzić;
  • required="required"- pole wymagane, nie może pozostać puste;
  • placeholder="" - wartość domyśla;
  • readonly="readonly" - tylko do odczytu, blokuje edycję danego elementu;

Znaczniki odpowiedzialne za pokazywanie układu pól formularza

  • <fieldset>...<fieldset> - dodaje obramowanie grupujące jakąś część formularza,
  • <legend>...<legend> - dołącza tytuł wkomponowany w ramkę,
  • <label>...<label> - obejmuje opis pola i pole łącząc je w całość.

Ćwiczenie 2_6_2_1

Wykonaj stronę, na której przetestujesz działanie atrybutów pól wprowadzania danych. Zastosuj znaczniki odpowiedziane za pokazywanie układu pól formularza. Zastosuj następujący kod:

<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <fieldset>
    <legend>size, autofocus, required</legend>
    <input type="text" name="tekst_1" value="size 10" size="10" style="font-family: Courier;" />
    <input type="text" name="tekst_2" value="autofocus" autofocus="autofocus" />
    <input type="text" name="tekst_3" value="required" required="required" />
    <input type="submit" name="przycisk_1" value="Ok" />
  </fieldset>
</form>  
<br /><br />
<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <fieldset>
    <legend>maxlength, autocomplete, readonly, disabled</legend>
    <input type="text" name="tekst_4" value="maxlength 15" maxlength="15" />
    <input type="text" name="tekst_5" value="autocomplete off" autocomplete="off" />
    <input type="text" name="tekst_6" value="readonly" readonly="readonly" />
    <input type="text" name="tekst_7" value="disabled" disabled="disabled" />
    <input type="submit" name="przycisk_2" value="Ok" />
    <input type="submit" name="przycisk_3" value="disabled" disabled="disabled" />
  </fieldset>
</form>  
<br /><br />
<form action="mailto:jan_kowalski@example.com" method="post" enctype="text/plain">
  <fieldset>
    <legend>min, max, placeholder</legend>
    <input type="number" name="number_1" value="10" min="5" max="20" />
    <input type="number" name="number_2" value="100" placeholder="5"  />
    <input type="submit" name="przycisk_4" value="Ok" />
  </fieldset>
</form>  

Zwróć uwagę, że dla poprawienia czytelności treści wiadomości generowanej przez program pocztowy zastosowałem "odszyfrowanie" enctype="text/plain, unikałem również polskich "ogonków". Fragment kodu style="font-family: Courier;" jest zastosowaniem CSS, wykonanym po to, aby użyć czcionkę monotypiczną. Tak powinna wyglądać wykonana strona:

Strona pokazuje trzy formularze. W pierwszym formularzu:

  • Tekst w drugim polu tekstowym jest zaznaczony, ponieważ w tym polu autofocus="autofocus". Zwróć uwagę, że na pokazanej w ramce stronie tego efektu nie ma, ponieważ bieżąca strona niniejszego opracowania otwierałaby się zawsze tak, aby to pole było widoczne. Nie działałyby wtedy prawidłowo linki do wskazanym miejsc na tej stronie.
  • W pierwszym polu tekstowym jest wprowadzone 7 znaków. Ile jeszcze znaków możesz dopisać? Ponieważ size zostało określone jako 10 więc przy dopisywaniu czwartego znaku, pole pownno zacząć się przewijać. Sprawdź czy tek jest faktycznie.
  • Usuń wpis w pierwszym polu tekstowym i pisząc kolejne dowolne znaki sprawdź, czy jego rozmiar wynosi 10 znaków. W tym polu autocomplete jest domyślnie ustawione na on, więc poniżej pola powinny pojawić się propozycje wpisu.
  • Usuń wpis w trzecim polu i kliknij Ok. W tym polu required="required", jest to więc pole obowiązkowe i wysłanie formularza powinno zostać zablokowane, dodatkowo przeglądarka powinna pokazać stosowny komunikat.

W drugim formularzu:

  • W pierwszym polu, spróbuj wpisać więcej jak 15 znaków. Nie jest to możliwe, ponieważ maxlength="15".
  • W drugim polu autocomplete="off", a więc nie widać żadnych podpowiedzi podczas pób wprowadzania nowego tekstu.
  • W trzecim polu nie możemy nic napisać, ponieważ readonly="readonly".
  • Z czwartym polem, podobnie jak z przyciskiem disabled, nie możemy zrobić nic, ponieważ w tych polach disabled="disabled". Te pola nie są również wysyłane, sprawdź to, klikając Ok.

W trzecim formularzu znajdują się pola przeznaczone do wprowadzania liczb:

  • Wpisz w pierwszym polu literę a i kliknuj Ok. Powinien pojawić się komunikat, ponieważ litera nie jest liczbą.
  • Wpisz w pierwszym polu wartość 7,2, a potem 7.2 - zauważysz, że w polach można wpisac tylko liczby całkowite.
  • Wpisz w pierwszym polu wartość 2 - przeglądarka odpowie, że wartość nie może być mniejsza od 5, ponieważ min="5".
  • Podobnie będzie, jeżeli wpiszesz wartość tym razem większą od 20 co musi być zablokowane, ponieważ max="20".
  • Usuń wpis w drugim polu - pojawi się wtedy wartość domyślna równa 5, ponieważ w tym polu placeholder="5".

Praca domowa

Wykonaj ponownie ćwiczenie z zajęć, zmieniając według własnego uznania układ pól i ich atrybutów. Opisz przebieg testowania formularzy i zapisz w pliku opis_testowania.txt.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.