Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
00498 008930 14655783 na godz. na dobę w sumie
HTML5. Nieoficjalny podręcznik - książka
HTML5. Nieoficjalny podręcznik - książka
Autor: Liczba stron: 416
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-3948-9 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> html i xhtml - programowanie
Porównaj ceny (książka, ebook, audiobook).

Poznaj możliwości HTML5!

HTML5 to coś więcej niż język służący do tworzenia stron WWW - to zbiór kilkunastu niezależnych standardów sieciowych pod jednym wspólnym szyldem. Z rozmachem wkracza do codziennego życia projektantów stron internetowych. Jego nowe możliwości naprawdę robią wrażenie: obejmują ścisłą integrację ze środowiskiem przeglądarki internetowej, usługi geolokalizacyjne, doskonałe wsparcie dla multimediów i aplikacji offline. Jeszcze niedawno takie możliwości nie śniły się żadnym webmasterom, a dziś są w zasięgu każdego!

Dzięki kolejnej książce z serii 'Nieoficjalny podręcznik' nie musisz odkrywać tajników HTML5 na własną rękę. Znajdziesz tu wszystkie istotne informacje, dzięki którym błyskawicznie zaczniesz korzystać z dobrodziejstw HTML5. W trakcie lektury nauczysz się dynamicznie rysować elementy, używać geolokalizacji oraz przechowywać dane użytkowników w lokalnych magazynach danych. Ponadto poznasz nowe znaczniki oraz ich przeznaczenie. HTML5 to przyszłość sieci, dlatego już dziś warto poznać jego możliwości!

HTML5 to:

Sprawdź, jak będzie wyglądać sieć jutra,
i zacznij korzystać z tego już dziś!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Tytuł oryginału: HTML5: The Missing Manual Tłumaczenie: Maciej Reszotnik ISBN: 978-83-246-3948-9 © 2012 Helion S.A. Authorized Polish translation of the English edition of HTML5: The Missing Manual, 1st Edition 9781449302399 © 2011 Matthew MacDonald. This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną, fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje naruszenie praw autorskich niniejszej publikacji. Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich właścicieli. Autor oraz Wydawnictwo HELION dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Wydawnictwo HELION nie ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce. Wydawnictwo HELION ul. Kościuszki 1c, 44-100 GLIWICE tel. 32 231 22 19, 32 230 98 63 e-mail: helion@helion.pl WWW: http://helion.pl (księgarnia internetowa, katalog książek) Drogi Czytelniku! Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres http://helion.pl/user/opinie/htm5np Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję. Printed in Poland. • Kup książkę • Poleć książkę • Oceń książkę • Księgarnia internetowa • Lubię to! » Nasza społeczność Spis treŁci Nieoficjalna czoęówka ...................................................................................... 11 Wstñp .................................................................................................................15 Czýļë I. Wprowadzenie do jýzyka ................................................23 Rozdziaę 1. Wprowadzenie do HTML5 ............................................................ 25 Historia HTML5 ....................................................................................... 25 XHTML 1.0: rygor ponad wszystko ........................................................ 26 XHTML 2: niespodziewana poraška ....................................................... 27 HTML5: reaktywacja ............................................................................. 27 HTML: šywy jĂzyk ................................................................................. 29 Trzy pryncypia HTML5 ............................................................................ 30 1. Nie psuj sieci ...................................................................................... 30 2. Brukuj Łcieški ..................................................................................... 30 3. Bîdş praktyczny ................................................................................. 32 Rzut oka na skĪadniĂ HTML5 ................................................................... 32 Element doctype a HTML5 .................................................................... 34 Kodowanie znaków ................................................................................ 35 JĂzyk ...................................................................................................... 36 Dodawanie arkusza stylów ..................................................................... 36 DoĪîczanie JavaScriptu ........................................................................... 36 Ostateczny produkt ................................................................................ 37 SkĪadnia HTML5 z bliska .......................................................................... 38 Rozluşnione reguĪy ................................................................................ 38 Walidacja HTML5 ................................................................................. 39 Powrót XHTML-u .................................................................................. 41 Rodzina znaczników HTML5 .................................................................... 43 Dodane elementy ................................................................................... 43 Komponenty usuniĂte ze specyfikacji ..................................................... 44 Elementy zaadaptowane ......................................................................... 45 Zmodyfikowane znaczniki ..................................................................... 46 Elementy standaryzowane ...................................................................... 47 Korzystanie z HTML5 juš dziŁ ...................................................................48 Ocenianie wsparcia ze strony przeglîdarek ..............................................49 Statystyki poziomu przyjĂcia przeglîdarek ..............................................51 Wykrywanie obsĪugi wĪasnoŁci z aplikacjî Modernizr ..............................52 UzupeĪnianie braków przy ušyciu wypeĪniania ........................................55 Rozdziaę 2. Nowe podejIJcie do projektowania stron ......................................57 WstĂp do elementów semantycznych .........................................................58 Modernizacja tradycyjnej strony HTML ....................................................59 Struktura strony w stylu klasycznym ......................................................60 Struktura strony w HTML5 ....................................................................63 PodtytuĪy i znacznik hgroup ..............................................................65 DoĪîczanie rysunków przy ušyciu znacznika figure ...........................66 Dodawanie ramki redaktorskiej — znacznik aside .............................68 Elementy semantyczne a kompatybilnoŁð z przeglîdarkami .......................69 Projektowanie strony z nowymi elementami semantycznymi ....................72 WiĂcej o nagĪówkach ..............................................................................72 OdnoŁniki i element nav ...................................................................74 WiĂcej o stopce .......................................................................................77 WiĂcej o sekcjach ...................................................................................81 System tworzenia konspektu strony w HTML5 ..........................................82 Jak zobaczyð konspekt? ...........................................................................82 Konspekt podstawowy ............................................................................83 Komponenty sekcji .................................................................................84 Problemy z tworzeniem konspektów .......................................................87 Rozdziaę 3. Semantyczny kod HTML ................................................................91 Elementy semantyczne raz jeszcze .............................................................92 Data, czas i znacznik time ................................................................93 Obliczenia w JavaScripcie i element output .......................................94 Element mark i zaznaczanie tekstu ...................................................95 Inne standardy kodu semantycznego .........................................................97 ARIA (ang. Accessible Rich Internet Applications) ..................................97 RDFa (ang. Resource Description Framework) ........................................98 Mikroformaty .........................................................................................99 Mikrodane ...........................................................................................104 Fragmenty sformatowane opracowane przez Google .................................107 Lepsze wyniki wyszukiwania ................................................................107 Wyszukiwarka przepisów .....................................................................110 Czýļë II. Tworzenie nowoczesnych stron ................................... 115 Rozdziaę 4. Udoskonalone formularze ............................................................117 Formularze ..............................................................................................118 Modernizowanie tradycyjnego formularza HTML ....................................119 Znak wodny — dodawanie wskazówek ..................................................123 Dobry punkt zaczepienia: wĪaŁciwoŁð focus ..........................................124 4 S P I S T R E ĝ C I Walidacja: wykrywanie bĪĂdów ................................................................ 125 Proces walidacji w HTML5, krok po kroku ........................................... 125 WyĪîczanie mechanizmu walidacji ....................................................... 127 Formatowanie kontrolek walidacyjnych ............................................... 128 Walidacja wyrašeĬ regularnych ............................................................ 129 WĪasne reguĪy walidacji ........................................................................ 130 ObsĪuga mechanizmu walidacji ............................................................ 132 Nowe typy znacznika input ..................................................................... 134 Adresy e-mail ....................................................................................... 137 Adresy URL ......................................................................................... 137 Pola wyszukiwania ............................................................................... 137 Telefon ................................................................................................ 138 Liczby .................................................................................................. 138 Suwak .................................................................................................. 139 Czas: daty i godziny .............................................................................. 140 Kolor .................................................................................................... 141 Nowe elementy ....................................................................................... 141 Sugerowane odpowiedzi i element datalist ...................................... 142 Pasek stanu i miernik ........................................................................... 144 Paski narzĂdzi i menu — znaczniki command i menu ............... 146 Edytor HTML na stronie ......................................................................... 147 Edytowanie zawartoŁci za pomocî contentEditable ............................... 147 Edytowanie strony za pomocî atrybutu designMode ............................. 149 Rozdziaę 5. Multimedia ...................................................................................153 Wideo dziŁ .............................................................................................. 154 Wprowadzenie do audio i wideo w HTML5 .............................................. 155 Wydobywanie dşwiĂku z elementu audio ........................................ 156 Znacznik video z szerszej perspektywy ............................................ 158 Wojna o format ....................................................................................... 159 WiĂcej o formatach .............................................................................. 160 ObsĪuga multimediów w przeglîdarkach .............................................. 161 Wiele formatów, czyli jak udobruchað kašdî przeglîdarkĂ ..................... 164 Element source ............................................................................... 164 Alternatywa — wtyczka Flasha ............................................................. 166 Sterowanie odtwarzaniem za pomocî JavaScriptu .................................... 169 Dodawanie efektów dşwiĂkowych ........................................................ 170 Budowa wĪasnego odtwarzacza filmów ................................................. 173 Odtwarzacze JavaScript ........................................................................ 175 Napisy i dostĂpnoŁð ............................................................................. 177 Rozdziaę 6. Podstawy rysowania na elemencie canvas ................................ 179 PĪótno — wprowadzenie .......................................................................... 180 Linie proste .......................................................................................... 182 ŀcieški i figury ...................................................................................... 184 Krzywe ................................................................................................. 186 Transformaty ....................................................................................... 188 PrzezroczystoŁð .................................................................................... 192 S P I S T R E ĝ C I 5 Tworzenie prostego programu graficznego ...............................................194 Przygotowanie narzĂdzi ........................................................................195 Malowanie po pĪótnie ...........................................................................196 Zachowywanie pĪótna ...........................................................................198 PĪótno i kompatybilnoŁð z przeglîdarkami ...............................................201 WypeĪnianie pĪótna ..............................................................................201 Alternatywne pĪótna i wykrywanie obsĪugi ............................................203 Rozdziaę 7. Wiñcej o pęótnie .......................................................................... 205 Inne wĪasnoŁci pĪótna ..............................................................................205 Rysowanie obrazów ..............................................................................206 Wycinanie i zmienianie wielkoŁci obrazu ..............................................207 Rysowanie tekstu .................................................................................208 Cienie i inne ozdobniki ............................................................................210 Dodawanie cieni ...................................................................................210 WypeĪnianie figur deseniem .................................................................212 WypeĪnianie figur gradientem ...............................................................213 SkĪadanie wszystkiego w caĪoŁð: rysowanie wykresów ...........................216 Interaktywne figury .................................................................................221 ŀledzenie rysowanych elementów .........................................................221 WspóĪrzĂdne i lokalizowanie trafieĬ .....................................................224 Animowanie pĪótna .................................................................................226 Podstawowa animacja ..........................................................................227 Animowanie wielu obiektów ................................................................228 Praktyczny przykĪad: labirynt ...................................................................233 Rysowanie labiryntu .............................................................................234 Animowanie ikony ...............................................................................235 Lokalizowanie trafieĬ a barwa pikseli ....................................................237 Rozdziaę 8. Rewolucja w stylach — CSS3 ......................................................241 Ušywanie CSS3 juš dziŁ ..........................................................................242 Strategia 1.: Wykorzystaj to, co mošesz .................................................242 Strategia 2.: Traktuj wĪasnoŁci CSS3 jak usprawnienia .........................243 Strategia 3.: Dodanie awaryjnych mechanizmów za pomocî Modernizra ......................................................................244 Style wĪaŁciwe konkretnym przeglîdarkom ...........................................246 Typografia w sieci ....................................................................................247 Formaty fontów ....................................................................................248 Ušywanie zestawów fontów ..................................................................250 Korzystanie z fontów sieciowych Google ...............................................253 Korzystanie z wĪasnych fontów .............................................................255 Wielokolumnowy tekst ........................................................................256 Przystosowanie stron do róšnych urzîdzeĬ ..............................................258 Zapytania medialne ..............................................................................259 Zapytania medialne — wyšsza szkoĪa jazdy ...........................................262 ZastĂpowanie caĪego arkusza stylów .....................................................263 Rozpoznawanie urzîdzeĬ mobilnych ....................................................264 6 S P I S T R E ĝ C I Kontenery na bĪysk .................................................................................. 265 PrzezroczystoŁð .................................................................................... 266 Zaokrîglane rogi .................................................................................. 268 TĪo .......................................................................................................... 269 Cienie .................................................................................................. 269 Gradienty ............................................................................................ 271 Efekty przejŁcia ....................................................................................... 273 PrzeksztaĪcanie koloru ......................................................................... 274 PrzejŁcia — teczka z pomysĪami ............................................................ 276 Transformaty ....................................................................................... 276 Czýļë III. Konstruowanie aplikacji sieciowych przy uŜyciu komponentów desktopowych ................................281 Rozdziaę 9. Magazyn danych ......................................................................... 283 Magazyn sieciowy — podstawy ................................................................ 284 Magazynowanie danych ....................................................................... 285 Praktyczny przykĪad: zapisywanie stanu gry .......................................... 286 Magazyn sieciowy a obsĪuga przeglîdarek ............................................. 288 Magazyn sieciowy — na gĪĂbszych wodach ............................................... 289 Usuwanie wpisów ................................................................................ 289 Listowanie wszystkich zachowanych wpisów ........................................ 289 Zapisywanie liczb i dat ......................................................................... 290 Zachowywanie obiektów ...................................................................... 292 Reagowanie na zmiany w magazynie .................................................... 293 Odczytywanie plików .............................................................................. 295 Pobieranie pliku ................................................................................... 295 File API i obsĪuga przeglîdarek ............................................................. 296 Odczytywanie pliku tekstowego ........................................................... 296 ZastĂpowanie standardowej kontrolki Īadowania plików ...................... 298 Odczytywanie wielu plików jednoczeŁnie ............................................. 299 Odczytywanie pliku graficznego ........................................................... 299 Rozdziaę 10. Aplikacje sieciowe z trybem offline ......................................... 303 Cachowanie plików ................................................................................. 304 Tworzenie manifestu ........................................................................... 305 Korzystanie z manifestu ....................................................................... 306 Przenoszenie manifestu na serwer ........................................................ 307 Uaktualnianie manifestu ..................................................................... 310 ObsĪuga w przeglîdarkach aplikacji w trybie offline ............................... 312 Praktyczne techniki cachowania .............................................................. 313 Uzyskiwanie dostĂpu do cachowanych plików ...................................... 313 Tryb awaryjny ...................................................................................... 315 Sprawdzanie stanu poĪîczenia .............................................................. 316 Wykrywanie uaktualniania przy ušyciu JavaScriptu .............................. 317 S P I S T R E ĝ C I 7 Rozdziaę 11. Komunikacja z serwerem sieciowym .........................................321 WysyĪanie wiadomoŁci na serwer .............................................................322 Obiekt XMLHttpRequest .....................................................................322 WysyĪanie zapytaĬ na serwer ................................................................323 Pobieranie nowych treŁci ......................................................................327 Zdarzenia przesyĪane na serwer ...............................................................331 Format wiadomoŁci ..............................................................................332 WysyĪanie wiadomoŁci za pomocî skryptu serwera ...............................333 Przetwarzanie wiadomoŁci na stronie ...................................................335 Polling a zdarzenia po stronie serwera ...................................................336 Technologia WebSocket ..........................................................................337 Ocena technologii WebSocket ...............................................................338 Prosty klient w technologii WebSocket ..................................................339 PrzykĪady technologii WebSocket w sieci ..............................................341 Rozdziaę 12. Wiñcej ciekawych sztuczek JavaScriptu ................................... 343 Geolokalizacja .........................................................................................344 Jak dziaĪa geolokalizacja? ......................................................................345 Odnajdywanie wspóĪrzĂdnych ušytkownika ..........................................347 Usuwanie bĪĂdów .................................................................................349 Ustawienia geolokalizacji .....................................................................350 Generowanie mapy ..............................................................................352 Monitorowanie ruchu ušytkownika ......................................................355 Obiekt pracownika ..................................................................................355 CzasochĪonne zadanie ..........................................................................357 Wykonywanie zadaĬ w tle ....................................................................359 ObsĪuga bĪĂdów pracownika .................................................................361 Anulowanie zadania uruchomionego w tle ............................................362 Przekazywanie bardziej zĪošonych wiadomoŁci .....................................362 Zarzîdzanie historiî ................................................................................364 Kwestia URL ........................................................................................366 Tradycyjne rozwiîzanie: znak kratki i adres URL ..................................366 Rozwiîzanie HTML5: historia sesji ......................................................368 Historia sesji i kompatybilnoŁð .............................................................370 Czýļë IV. Dodatki ........................................................................ 373 Dodatek A. Krótki wstñp do arkuszy stylów ..................................................375 ZaĪîczanie stylów do stron .......................................................................375 Anatomia arkusza stylów ........................................................................376 WĪasnoŁci CSS .....................................................................................377 Formatowanie elementów przy ušyciu klas ...........................................377 Komentarze w arkuszach stylów ...........................................................379 OdrobinĂ bardziej zaawansowane arkusze stylów .......................................379 Konstruowanie struktury strony przy ušyciu elementu div ..............380 Wiele selektorów ..................................................................................380 Selektory kontekstowe ..........................................................................381 8 S P I S T R E ĝ C I Selektor identyfikatora ......................................................................... 382 Selektory pseudoklas ............................................................................ 382 Selektory atrybutów ............................................................................. 383 Wycieczka po stylach ............................................................................... 384 Dodatek B. Krótki wstñp do jñzyka JavaScript .............................................. 389 W jaki sposób witryny korzystajî z JavaScriptu? ....................................... 390 Zagniešdšanie kodu w dokumencie HTML .......................................... 390 Ušywanie funkcji ................................................................................. 391 Przenoszenie kodu JavaScript do oddzielnego pliku ............................... 393 Odpowiadanie na zdarzenia .................................................................. 394 Podstawy skĪadni jĂzyka .......................................................................... 395 Zmienne .............................................................................................. 395 WartoŁð null ........................................................................................ 397 Zakres zmiennych ............................................................................... 397 Typy danych ........................................................................................ 398 Operacje .............................................................................................. 398 Instrukcje warunkowe .......................................................................... 400 PĂtle .................................................................................................... 401 Tablice ................................................................................................. 401 Funkcje — otrzymywanie i zwracanie danych ....................................... 402 Interakcja ze stronî ................................................................................. 403 Manipulowanie elementem .................................................................. 404 Dynamiczne Īîczenie ze zdarzeniem .................................................... 406 Zdarzenia wplatane .............................................................................. 408 Skorowidz ........................................................................................................410 S P I S T R E ĝ C I 9 10 S P I S T R E ĝ C I 4 ROZDZIAà Udoskonalone formularze F ormularze HTML sî zbiorem elementów, których przeznaczeniem jest po- branie informacji od osób odwiedzajîcych stronĂ. Sî wŁród nich pola tek- stowe, w które mošna wpisað treŁci, rozwijane listy, z których mogî wybrað opcjĂ, pola wyboru, które mošna zaznaczað i usuwað znaczenie itp. Istnieje wiele sposobów na wykorzystanie formularzy HTML, a jeŁli przebywaĪeŁ w sieci przez wiĂcej niš tydzieĬ, pewnie wiesz, še pojawiajî siĂ praktycznie wszĂdzie — od strony z informacjami o gieĪdzie, po stronĂ rejestracji skrzynki e-mail. Formularze HTML sî z nami od czasu wyklarowania siĂ tego jĂzyka i od zeszĪego stulecie nie zmieniĪy siĂ ani trochĂ pomimo wielu prób. Twórcy standardów inter- netowych przez lata opracowywali ich nastĂpcĂ, okreŁlanego mianem XForms, który ostatecznie okazaĪ siĂ takim samym niewypaĪem jak XHTML 2 (strona 27). Choð XForm doŁð elegancko rozwiîzywaĪ pewne problemy z oryginalnym pomy- sĪem, to jednak tworzyĪ teš kolejne. Kod XForms byĪ rozwlekĪy i zakĪadaĪ, še projektant strony jest dobrze obeznany z jĂzykiem XML. NajwiĂkszî wadî byĪo to, še XForms nie byĪ w šadnym wzglĂdzie kompatybilny z HTML, co oznaczaĪo tyle, iš twórcy stron musieliby zamknîð oczy i „przeskoczyð” na nowy standard, ma- jîc nadziejĂ, še jakoŁ to bĂdzie. Co mošna byĪo przewidzieð, wiĂkszoŁð webdewelo- perów nie zawracaĪa sobie gĪowy implementacjî XForms — byĪ to standard zbyt zĪo- šony, by nadawaĪ siĂ do powszechnego wykorzystania — zatem twórcy stron nigdy nie dokonali wymaganego skoku. W HTML5 obrano inne podejŁcie. Wprowadzono wiele usprawnieĬ do juš istniejî- cego modelu formularzy, dziĂki czemu ulepszone ich wersje bĂdî dziaĪað na star- szych przeglîdarkach, choð bez specjalnych wodotrysków (co jest dobrî wieŁciî, poniewaš z przeglîdarek Microsoftu dopiero Internet Explorer 10 zapewni peĪnî obsĪugĂ nowych wĪasnoŁci formularzy). W HTML5 dodano równieš opcje, z któ- rych twórcy stron korzystajî juš dziŁ. Róšnica polega na tym, še HTML5 sprawia, iš sî Īatwo dostĂpne, i nie wymaga kodu lub narzĂdzi JavaScriptu dostarczanych przez zewnĂtrzne firmy. Formularze W tym rozdziale zapoznasz siĂ z nowymi wĪasnoŁciami formularzy HTML5. Dowiesz siĂ, które z nich sî powszechnie obsĪugiwane, a które obecnie nie cieszî siĂ šadnym wsparciem. Przyjrzysz siĂ równieš wĪaŁciwoŁci, która — choð nie jest czĂŁciî standardu HTML — wzbogaca warstwĂ interakcji przez umieszczenie zĪošonego edytora HTML na stronie. Formularze Najprawdopodobniej masz juš doŁwiadczenie w tworzeniu formularzy. JeŁli jednak nie jesteŁ pewien szczegóĪów, krótka powtórka odŁwiešy Ci pamiĂð. Formularz sieciowy to zbiór pól tekstowych, list, przycisków i innych kompo- nentów, przy ušyciu których ušytkownik wprowadza pewne informacje na stronie. W sieci formularze wystĂpujî na kašdym kroku — pozwalajî na rejestracjĂ skrzynki e-mail, zakup produktów, wykonywanie transakcji bankowych itp. Najprostsze formularze, wykorzystywane w wyszukiwarkach internetowych, skĪadajî siĂ z po- jedynczego pola tekstowego, tak jak na rysunku 4.1. Rysunek 4.1. Prezentujéca siý spartaħsko stro- na gĥówna wyszu- kiwarki Google zbudowana jest z prostego for- mularza HTML. Korzysta siý z niego, tak jak z kaŜdego innego formularza — naleŜy wprowa- dzië informacje (w tym wypadku poszukiwane sĥowa klucze) i kliknéë przycisk, aby przesĥaë je na serwer Wszystkie formularze sieciowe dziaĪajî na tej samej zasadzie. Ušytkownik podaje informacje, po czym klika przycisk. W odpowiedzi strona pobiera wprowadzone dane i wysyĪa je na serwer. Na serwerze jakaŁ aplikacja przetwarza te dane i wyko- nuje kolejny krok. Serwerowy program moše zainicjowað komunikacjĂ z bazî da- nych (aby odczytað bîdş zapisað jakieŁ informacje) przed wysĪaniem do ušyt- kownika nowej strony. 118 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Modernizowanie formularza HTML P R Z Y S P I E S Z A M Y Obchodzenie mechanizmu przesyĪania danych przy ušyciu JavaScriptu Warto wspomnieë, Ŝe formularze nie sé jedynym roz- wiézaniem, które umoŜliwia przesyĥanie wprowadzonych danych na serwer (byĥy inne dawno, dawno temu). Aktual- nie chytry twórca stron moŜe komunikowaë siý z serwe- rem za pomocé napisanego w kodzie JavaScript obiektu XMLHttpRequest (strona 325). Wyszukiwarka Google ko- rzysta z niego na dwa sposoby. Po pierwsze, Ŝeby wy- ļwietlaë sugerowane hasĥa wyszukiwania w liļcie pod polem tekstowym; po drugie, by generowaë wyniki wy- szukiwania równolegle z wpisywaniem nowych treļci. Ta ostatni wĥasnoļë dziaĥa po wĥéczeniu opcji wyszukiwania dynamicznego (http://www.google.pl/instant/). MoŜe Ci siý wydaë, Ŝe dziýki JavaScriptowi uda siý w ogóle pominéë krok bezpoļredniego wysyĥania danych, tak jak ma to miejsce z wyszukiwaniem dynamicznym Google. JednakŜe, choë warto zaoferowaë také moŜliwoļë, nie moŜe to byë jedyna opcja. Wynika to z prostego faktu, Ŝe zaprezentowane podejļcie w jýzyku JavaScript nie jest doskonaĥe (moŜe powodowaë bĥýdy przy wolniejszych ĥéczach), oraz tego, iŜ wciéŜ sé osoby, których przeglédarki nie obsĥugujé tego jýzyka lub opcja obsĥugi jest w nich wyĥéczona. Oczywiļcie, nie ma nic zĥego w stronach, których for- mularze nie przesyĥajé nigdzie danych. Z pewnoļcié wi- dziaĥeļ strony, na których moŜna dokonywaë prostych obliczeħ (np. kalkulatory odsetek z kredytów hipotecz- nych). Obsĥuga serwera nie jest w nich wymagana, gdyŜ doĥéczony do tych dokumentów kod JavaScript moŜe wykonaë kalkulacje i wyļwietlië wyniki. Z perspektywy HTML5 nie ma znaczenia, czy przeļlesz swój formularz na serwer w zwykĥy sposób, uŜyjesz da- nych z niego do obliczeħ lokalnych, czy wyļlesz je z po- mocé obiektu XMLHttpRequest. W kaŜdym z tych przy- padków swój formularz skonstruujesz, posĥugujéc siý standardowymi elementami HTML CaĪy szkopuĪ tkwi w tym, še jest wiele sposobów na skonstruowanie programu dziaĪajîcego po stronie serwera (aplikacji przetwarzajîcej odczytane z formularza informacje). Niektórzy deweloperzy ušywajî prostych skryptów, które pozwalajî im na manipulowanie surowymi danymi, podczas gdy inni korzystajî z dobrodziejstw wysokopoziomowych modeli, które opakowujî informacje w wygodne obiekty. Niezalešnie od podejŁcia, procedura sprowadza siĂ do tego samego — pobrania danych, ich przetworzenia i zwrócenia rezultatów obliczeĬ na stronie. Uwaga: W ksiéŜce tej nie faworyzuje siý Ŝadnego z dostýpnych narzýdzi do programowania po stronie serwera. W zasadzie nie ma to wiýkszego znaczenia, poniewaŜ kaŜde z rozwiézaħ korzysta z tych samych elementów formularza, którego dotyczé reguĥy HTML5. Modernizowanie formularza HTML Modernizowanie tradycyjnego formularza HTML Najlepszî metodî nauki konstruowania formularzy w HTML5 jest ulepszenie juš istniejîcego, napisanego w standardowy sposób. Na rysunku 4.2 widað przykĪad, który zostanie omówiony. Kod jest prosty jak konstrukcja cepa. JeŁli budowaĪeŁ wczeŁniej formularze, nie ujrzysz tu niczego nowego. CaĪy formularz zostaĪ wyznaczony parî znaczników form . form id= zooKeeperForm action= processApplication.cgi p i ProszĂ wypeĪnið ten formularz. Obowiîzkowe pola oznaczono znakiem /i em * /em /p ... R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 119 Modernizowanie formularza HTML Rysunek 4.2. Jeļli przemie- rzyĥeļ Internet wzdĥuŜ i wszerz, formularz, taki jak ten, który pobiera od uŜytkownika strony podstawowe dane, nie powinien byë dla Ciebie niczym nowym Element form zawiera wszystkie widgety formularza (zwane teš kontrolkami lub polami). Informuje teš przeglîdarkĂ (z wykorzystaniem adresu URL w atry- bucie action), gdzie ma wysĪað zebrane dane. JeŁli caĪoŁð operacji ma byð wyko- nana przez kod JavaScript po stronie klienta, mošesz nadað mu wartoŁð #. Uwaga: HTML5 dodaje mechanizm, dziýki któremu wolno zamieszczaë kontrolki formularza poza jego obrýbem. Caĥa sztuczka polega na uŜyciu atrybutu form (np. form= zooKeeperForm ) z wartoļcié atry- butu id, który nadano znacznikowi form (np. form id= zooKeeperForm … /form ). Niestety, przeglédarki, które nie obsĥugujé tej wĥasnoļci, pominé tak oznaczone dane w trakcie przesyĥania for- mularza, co oznacza, Ŝe na razie moŜna zapomnieë o uŜywaniu tej wĥaļciwoļci. Dobrze zaprojektowany formularz, taki jak ten dla pracownika zoo, dzieli siĂ na logiczne czĂŁci — co zapewnia ušycie znacznika fieldset . Kašda z tych czĂŁci powinna posiadað tytuĪ, który wpisuje siĂ w element legend . Oto obszar kom- ponentu fieldset dla sekcji danych kontaktowych (rysunek 4.3). fieldset legend Dane kontaktowe /legend label for= first name ImiĂ em * /em /label input id= first name br 120 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Modernizowanie formularza HTML Rysunek 4.3. Komponent fieldset pobiera cztery ro- dzaje informacji: imiý, nazwi- sko, numer telefonu i adres e- mail. Dla kaŜdej informacji podano podpis (wykorzystu- jéc element label ) oraz kon- trolký, która pozwoli na ze- branie danych (do tego celu nadajé siý elementy input , textarea i select ) label for= family name Nazwisko em * /em /label input id= family name br label for= telephone Nr telefonu /label input id= telephone br label for= email E-mail em * /em /label input id= email br /fieldset Jak we wszystkich formularzach, i tu najwašniejszymi elementami sî znaczniki input , które pobierajî tekst, tworzî pola wyborów, przyciski opcji itp. Oprócz nich w formularzach ušywa siĂ komponentu textarea , który pozwala na wpisy- wanie wielu linii tekstu, i znacznika select tworzîcego listy. JeŁli czujesz, še przydaĪaby Ci siĂ powtórka, rzuð okiem na tabelĂ 4.1. Oto pozostaĪa czĂŁð formularza dla opiekunów zwierzît w zoo z kilkoma nowymi szczegóĪami (listî ze znacznikiem select , polami wyboru i przyciskiem WyŁlij formularz). fieldset legend SzczegóĪowe dane osobowe /legend label for= age Wiek em * /em /label input id= age br label for= gender PĪeð /label select id= gender option value= female Kobieta /option option value= male MĂšczyzna /option /select br label for= comments Kiedy zdaĪaŁ/ĪeŁ sobie sprawĂ, še opiekun ´zwierzît to zawód dla Ciebie? /label textarea id= comments /textarea /fieldset fieldset legend Zaznacz swoje ulubione zwierzĂta /legend label for= zebra input id= zebra type= checkbox zebra /label label for= cat input id= cat type= checkbox kot /label label for= anaconda input id= anaconda type= checkbox ´anakonda /label label for= human input id= human type= checkbox czĪowiek /label label for= elephant input id= elephant type= checkbox sĪoĬ /label label for= wildebeest input id= wildebeest type= checkbox ´antylopa /label label for= pigeon input id= pigeon type= checkbox goĪîb /label label for= crab input id= crab type= checkbox krab /label /fieldset p input type= submit value= WyŁlij formularz /p R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 121 Modernizowanie formularza HTML Tabela 4.1. Kontrolki formularza Nazwa kontrolki Znacznik HTML Opis Pole tekstowe (jeden wiersz) input type= text input type= password Definiuje pole tekstowe, w którym uŜytkownik moŜe wpisywaë informacje. Komponent input type= password , który sĥuŜy do wpisywania haseĥ, nie wyļwietla wpisanego tekstu. Zamiast liter uŜytkownik ujrzy w nim gwiazdki (*) lub kropki (•). Wieloliniowe pole tekstowe textarea ... /textarea Definiuje duŜe pole tekstowe, w które moŜna wpisaë wiele linijek tekstu. Pole wyboru input type= checkbox Przycisk radiowy input type= radio Przycisk input type= submit input type= image input type= reset input type= button Lista select ... /select Definiuje pole wyboru, które moŜna zaznaczaë i usuwaë z niego zaznaczenie. Definiuje przycisk radiowy (kóĥka, które moŜna zaznaczaë i usuwaë z nich zaznaczenie). Zwykle przyciski radiowe zbiera siý w grupy o takiej samej wartoļci atrybutu name. Definiuje standardowy przycisk. Przycisk typu submit powoduje odczytanie danych z formularza i ich przesĥanie pod podany adres URL. Przycisk typu image dziaĥa tak samo, lecz wyļwietla podany w nim obraz zamiast standardowej grafiki przycisku. Przycisk typu reset czyļci wartoļci wszystkich kontrolek w formularzu. Z kolei przycisk typu button nie robi nic, chyba Ŝe dodasz do niego kod JavaScript. Definiuje listý, z której uŜytkownik wybiera jedné lub wiele opcji. KaŜdé opcjý na liļcie naleŜy zawrzeë w elemencie option . StronĂ oraz zaĪîczony do niej prosty arkusz stylów znajdziesz wŁród plików po- branych ze strony helion.pl/ksiazki/htm5np.htm. WersjĂ formularza napisanî w tra- dycyjnym HTML nazwano ZookeperForm_Original.html. Ješeli interesujî CiĂ bardziej wprowadzone w HTML5 modyfikacje, rzuð okiem na plik ZookeperForm_ Revised.html. Uwaga: Jednym z podstawowych ograniczeħ formularzy HTML jest to, Ŝe nie moŜna w prosty sposób zmienië wyglédu generowanych przez przeglédarký kontrolek. Nie da siý np. zmienië zwy- kĥego biaĥo-szarego pola wyboru na duŜy czerwony znacznik. MoŜesz, oczywiļcie, utworzyë przy uŜyciu JavaScriptu inny element, który býdzie zachowywaĥ siý tak jak pole wyboru, tzn. zmieniaĥ wygléd po klikniýciu, przechodzéc z jednego stanu w drugi i z powrotem. HTML5 zachowuje to ograniczenie i nakĥada je na wszystkie nowe kontrolki, o których dowiesz siý wiýcej w dalszej czýļci tego rozdziaĥu. Oznacza to, Ŝe dziaĥanie formularzy moŜe siý nie spodobaë osobom, które wymagajé od strony wysublimowanych komponentów i peĥnej kontroli nad jej wy- glédem. 122 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Modernizowanie formularza HTML ZapoznaĪeŁ siĂ juš z formularzem — czas go zmodernizowað przy ušyciu HTML5. Zaczniesz od rzeczy prostych, czyli atrybutów placeholder i autofocus. Znak wodny — dodawanie wskazówek Po zaĪadowaniu strony formularze sî zwykle puste. Kolumna pustych pól teksto- wych moše jednak onieŁmielað szczególnie wtedy, gdy nie wiadomo, co w nich ma byð. Dlatego teš zwykĪî praktykî jest wypeĪnianie ich przykĪadowym tekstem przy ušyciu atrybutu placeholder. Taki przykĪadowy tekst nazywa siĂ znakiem wodnym, gdyš nadaje siĂ mu jasnoszary kolor, aby odróšnið go od wĪaŁciwych danych wprowadzonych przez ušytkownika. Na rysunku 4.4 zaprezentowano znak wodny w dziaĪaniu. Rysunek 4.4. Góra: Gdy pole jest puste, w miejscu przeznaczonym na treļë pojawia siý znak wodny, tak jak w widocznych tu polach Imiý, Nazwisko i Nr telefonu. Dóĥ: Po klikniýciu pola znak wodny znika. JeŜeli osoba nie wypeĥni tego pola, ale przejdzie do nastýpnego, znak wodny pojawi siý ponownie Aby utworzyð znak wodny, po prostu wewnîtrz znacznika dodaj atrybut placeholder. label for= family name Nazwisko em * /em /label input id= family name placeholder= Kowalski br label for= telephone Nr telefonu /label input id= telephone placeholder= +48-xxx-xxx-xxx br label for= email E-mail em * /em /label input id= email br Przeglîdarki, które nie rozpoznajî tego atrybutu, po prostu go zignorujî (wŁród nich jest, oczywiŁcie, Internet Explorer). Na szczĂŁcie, nawet gdy tak siĂ stanie, nie dojdzie do šadnej tragedii. W koĬcu znaki wodne sî jedynie dodatkiem, który w šadnej mierze nie wpĪywa na dziaĪanie formularza. JeŁli jednak Ci to przeszkadza, na stronie http://tinyurl.com/polyfills peĪno jest napisanych w JavaScripcie Īatek, które uaktualniî nawet IE. Obecnie nie ma sposobu na zmianĂ wyglîdu tekstu w znaku wodnym (takî jak np. nadanie kursywy lub innego koloru). W przyszĪoŁci twórcy przeglîdarek doda- dzî obsĪugĂ arkusza stylów — gdy czytasz te sĪowa, byð moše juš jî wprowadzili. Teraz w tym celu mošna eksperymentowað ze specyficznymi dla kašdej przeglî- darki pseudoklasami (np. -webkit-input-placeholder i -moz-placeholder), ale najlepiej nie zawracað sobie tym gĪowy (wyjaŁnienie dziaĪania pseudoklas znaj- dziesz na stronie 382). R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 123 Modernizowanie formularza HTML P R Z Y S P I E S Z A M Y PrawidĪowe znaki wodne Nie musisz umieszczaë znaków wodnych w kaŜdym polu tekstowym. UŜywaj ich do wyjaļnienia potencjalnej dwu- znacznoļci. Przykĥadowo nie trzeba wyjaļniaë, co naleŜy wpisaë w pole Nazwisko, ale uŜycie sĥowa Godnoļë mo- gĥoby nie byë zbyt oczywiste. Znak wodny daje jasno do zrozumienia, Ŝe jest to miejsce na nazwisko. Czýsto znakiem wodnym jest przykĥadowa wartoļë, czyli coļ, co moŜe byë podstawowé wartoļcié. W wyszukiwarce przepisów Google (http://www.google.com/landing/ recipes) wartoļcié domyļlné jest „chicken pasta” (makaron z kurczakiem), przez co jasne jest, Ŝe w pole naleŜy wpi- saë nazwý potrawy, a nie listý skĥadników lub nazwisko kucharza, który wymyļliĥ przepis. Znaków wodnych uŜywa siý czasem, Ŝeby wskazaë, jak wprowadzona wartoļë powinna byë sformatowana. Pole Nr telefonu z rysunku 4.4 jest tego dobrym przykĥadem — wskazuje, Ŝe numery telefonu powinny skĥadaë siý z numeru kodu kraju i dziewiýciocyfrowego numeru te- lefonu. Taki znak wodny nie oznacza, Ŝe inaczej sforma- towane dane nie zostané przyjýte, lecz sugeruje pra- widĥowe rozwiézanie, które moŜe pomóc niepewnym uŜytkownikom. Nie powinieneļ uŜywaë znaku wodnego do dwóch czyn- noļci. Po pierwsze, nie próbuj wcisnéë do pola opisów lub instrukcji. ZaĥóŜmy, Ŝe zdefiniowaĥeļ pole, w które naleŜy wpisaë kod bezpieczeħstwa karty kredytowej. W takim przypadku tekst: „Wpisz trzy cyfry wytypowane na od- wrocie Twojej karty” nie nadaje siý na znak wodny. Zamiast niego warto dodaë podpis pod polem lub wykorzystaë atrybut title, aby za kaŜdym razem, gdy uŜytkownik najedzie na nie myszé, pojawiaĥo siý maĥe okienko z in- strukcjé. label for= promoCode Kod ´promocyjny /label input id= promoCode placeholder= QRB001 ´title= Twój kod promocyjny zaczyna siĀ ´od trzech liter, po których wystĀpujì ´trzy cyfry Po drugie, nie powinieneļ dodawaë do znaków wodnych specjalnych znaków, aby je odróŜnië od wĥaļciwego, wprowadzonego do pól tekstu. Przykĥadowo na niektó- rych stronach znak wodny zapisywany jest w nawiasach, np. [Jan Kowalski] zamiast Jan Kowalski. Nawiasy kwa- dratowe majé sugerowaë, Ŝe znak wodny jest jedynie przykĥadem. Taka konwencja jest zbýdna i prowadzi do wiýkszego zamieszania. Natomiast mošesz bez przeszkód wykorzystað lepiej znany pseudoklasyk focus, by zmienið wyglîd pola tekstowego, po tym jak zostanie wybrane. ZaĪóšmy, še chcesz, šeby miaĪo ciemniejszy kolor tĪa, tak by odróšniaĪo siĂ od reszty. Ponišsza deklaracja CSS sprawi, še tak siĂ stanie: input:focus { background: #eaeaea; } Dobry punkt zaczepienia: wĪaŁciwoŁð focus Zwykle, zaraz po zaĪadowaniu formularza jego ušytkownik chce po prostu zaczîð go wypeĪniað. Niestety, nie moše tego zrobið — przynajmniej dopóty, dopóki nie za- znaczy klikniĂciem jednej z kontrolek lub nie przejdzie do niej przy ušyciu klawisza Tab, w ten sposób jî aktywujîc. Dowolnî kontrolkĂ mošna aktywowað domyŁlnie, wywoĪujîc w jĂzyku JavaScript metodĂ focus() na wybranym elemencie input . Wymaga to napisania caĪej li- nijki kodu i w niektórych przypadkach moše doprowadzið do pojawienia siĂ dziw- nych bĪĂdów. JeŁli np. ušytkownik kliknie kontrolkĂ zaraz po zaĪadowaniu strony i zacznie jî wypeĪniað, jeszcze zanim metoda focus() zostanie wywoĪana, w trakcie pisania moše zostað przeniesiony na pole, którym nie jest zainteresowany. Rozwiî- 124 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Walidacja: wykrywanie bĪĂdów zaniem tego problemu byĪoby zapewnienie przeglîdarkom zdolnoŁci kontrolowania aktywacji komponentów. W ten sposób mogĪaby ona aktywowað jednî kontrolkĂ, pod warunkiem še inna nie zostaĪa wczeŁniej wybrana przez ušytkownika. WĪaŁnie ten pomysĪ przyczyniĪ siĂ do powstania atrybutu autofocus, który mošna doĪîczyð do elementów input i textarea , tak jak na ponišszym przykĪadzie: label for= last name Nazwisko em * /em /label input id= name placeholder= Janina Kowalska autofocus br Atrybut autofocus cieszy siĂ identycznym poziomem wsparcia jak parametr placeholder, co oznacza, še wszystkie przeglîdarki, z wyjîtkiem Internet Explorera, go rozpoznajî. Na szczĂŁcie i w tym przypadku Īatwo zaĪatað dziurĂ. Korzystajîc ze skryptu Modernizr (strona 52), mošesz wykryð, czy przeglîdarka obsĪuguje ten atry- but, i uruchomið swój wĪasny kod automatycznego aktywowania elementu. Mošesz teš ušyð gotowego wypeĪnienia, które doda odpowiedniî obsĪugĂ (http://tinyurl.com/ polyfills). Jednak szkoda zachodu na zabawĂ z tak maĪo znaczîcî opcjî, chyba še przy okazji dodasz obsĪugĂ innych opcji, takich jak omawiany nišej system walidacji. Walidacja: wykrywanie bĪĂdów Walidacja: wykrywanie bĪĂdów Podstawowî funkcjî pól formularza jest pobranie od ušytkownika strony infor- macji. Niecierpliwi lub zdezorientowani ušytkownicy mogî pominîð wašne pole, wprowadzið zĪî treŁð lub kliknîð niewĪaŁciwy przycisk. Wynikiem czegoŁ takiego jest otrzymanie mnóstwa bezušytecznych danych. Kašda porzîdna witryna powinna byð wyposašona w mechanizm walidacji, od- powiedzialny za wykrywanie bĪĂdów (lub, w najlepszym wypadku, za zapobieganie ich powstawaniu). Przez lata deweloperzy tworzyli w tym celu wĪasne procedury JavaScriptu lub wykorzystywali gotowe biblioteki. Oba rozwiîzanie sprawdzajî siĂ wyŁmienicie. Ze drugiej jednak strony, walidacja jest na tyle powszechnie wykorzy- stywanym mechanizmem (praktycznie kašdy formularz wymaga zweryfikowania poprawnoŁci) i na tyle trudnym do zapewnienia (nikt nie chce pisað od podstaw podobnego kodu dla róšnych formularzy, nie mówiîc juš o jego testowaniu), še powinna istnieð inna metoda jego implementacji. Twórcy HTML5 dostrzegli potencjalnî niszĂ i wymyŁlili sposób na odebranie projektantom czĂŁci odpowiedzialnoŁci za walidacjĂ i przerzucenie jej na przeglî- darkĂ. Wynaleşli system walidacji po stronie klienta (szczegóĪy w ramce na stronie 126), który pozwala osadzið reguĪy sprawdzania bĪĂdów wewnîtrz dowolnego znacz- nika input . Co najlepsze — system ten jest prosty w obsĪudze — wystarczy po- sĪušyð siĂ wĪaŁciwym atrybutem. Proces walidacji w HTML5, krok po kroku Podstawowî rzeczî, o której nalešy pamiĂtað przy tworzeniu mechanizmu walidacji formularza, jest wskazanie, których elementów dotyczy, lecz nie musisz przy tym kĪopotað siĂ zbĂdnymi detalami. Przypomina to odrobinĂ awans do pracy w zarzî- dzie, tyle še bez podwyški. R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 125 Walidacja: wykrywanie bĪĂdów P R Z Y S P I E S Z A M Y Dwie strony walidacji Przez caĥe lata zmyļlni twórcy witryn atakowali problem walidacji z róŜnych stron. Z biegiem czasu wyodrýbnio- no najlepszé praktyký. W zwykĥym formularzu wykorzy- stano dwie metody sprawdzania poprawnoļci.  Walidacja po stronie klienta. Ta forma walidacji zachodzi w przeglédarce uŜytkownika, jeszcze za- nim przeļle on formularz. Celem jest uĥatwienie Ŝycia uŜytkownikom. Zamiast zwracaë informacje o bĥýdach po wypeĥnieniu wszystkich kontrolek i klikniýciu przycisku Wyļlij, lepiej identyfikowaë je zaraz po wpisaniu zĥej wartoļci. W rezultacie mo- Ŝesz wywoĥaë pomocné informacjý o przyczynie omyĥki we wĥaļciwym miejscu, pozwalajéc uŜyt- kownikowi szybko naprawië bĥéd przed wysĥaniem danych na serwer.  Walidacja po stronie serwera. Dochodzi do niej juŜ po przesĥaniu formularza na serwer. W tym mo- mencie zadaniem kodu serwera jest sprawdzenie szczegóĥów i upewnienie siý, Ŝe wszystko jest w najlepszym porzédku. Pamiýtaj, niezaleŜnie od wyniku walidacji po stronie klienta walidacja serwe- rowa jest po prostu konieczna. To najwaŜniejsza linia obrony w walce z hakerami, którzy mogé umyļlnie manipulowaë przesyĥanymi na serwer danymi formularza. Jeļli walidacja po stronie ser- wera wykryje bĥýdne lub podejrzane wpisy, po- winna zwrócië stroný z wiadomoļcié o bĥýdzie. Jak ĥatwo zauwaŜyë, walidacja kliencka (której przykĥa- dem jest omawiany mechanizm w HTML5) ma uĥatwië pracý uŜytkownikom formularza, podczas gdy walidacja po stronie serwera dba o poprawnoļë. Musisz pamiýtaë, Ŝe obie formy walidacji sé potrzebne w niemalŜe kaŜdym przypadku — chyba Ŝe chodzi o bardzo prosty formu- larz, w którym trudno popeĥnië bĥéd lub w którym bĥýdy nie stanowié problemu. ZaĪóšmy, še na Twoim formularzu znajduje siĂ pole, które nie powinno pozostað puste — ušytkownik musi wpisað w nie jakieŁ dane. W HTML5 wymóg ten zade- klarujesz, wpisujîc w znaczniku atrybut required: label for= name Nazwisko em * /em /label input id= name placeholder= Janina Kowalska autofocus required br Na pierwszy rzut oka to, še dane pole jest wymagane, nie jest w ogóle widoczne. Dlatego teš moše warto ušyð wizualnych wskazówek w rodzaju innego koloru obramowania kontrolki bîdş umieszczenia gwiazdki obok wymaganego pola (tak jak na stronie formularza dla opiekunów zwierzît). Mechanizm walidacji jest uruchamiany po klikniĂciu przez ušytkownika przycisku wysyĪania formularza. Jak widað na rysunku 4.5, jeŁli przeglîdarka obsĪugujîca formularz HTML5 zauwašy, še wymagane pole jest puste, przechwyci formularz przed wysĪaniem i wyŁwietli wyskakujîce wiadomoŁci nad bĪĂdnie wypeĪnionymi kontrolkami. Czytajîc kolejne punkty, przekonasz siĂ, še róšne atrybuty pozwalajî na zdefi- niowanie odmiennych reguĪ sprawdzania bĪĂdów. W jednym widgecie mošna okreŁlið wiele reguĪ, a jednî reguĪĂ mošna nanieŁð na wiele kontrolek (w tym elementy input i textarea ). Wszystkie warunki walidacji muszî zostað speĪnione, nim formularz zostanie przesĪany na serwer. Tu pojawia siĂ zasadnicze pytanie. Co zrobið, kiedy wprowadzone dane Īamiî wiĂcej niš jednî reguĪĂ? Co siĂ stanie, gdy np. ušytkownik zapomni wypeĪnið kilka pól? 126 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Walidacja: wykrywanie bĪĂdów Rysunek 4.5. Oto to samo wyma- gane pole tekstowe w trzech prze- glédarkach: Firefoksie (u góry), Chrome (ļrodek) i Operze (u doĥu). Przeglédarki wybierajé sposób in- formowania uŜytkowników o bĥýdzie, lecz wszystkie korzystajé z wyskaku- jécych wiadomoļci, które przypomi- najé mechanizm podpowiedzi w sys- temie Windows. Niestety, nie ma moŜliwoļci zmiany wyglédu tych mi- niokien czy ĥatwej modyfikacji treļci wiadomoļci — przynajmniej na razie Otóš, do momentu gdy ušytkownik kliknie przycisk wysyĪajîcy formularz, nie stanie siĂ nic. Potem jednak przeglîdarka zacznie analizowað zawartoŁð pól — od góry w dóĪ. Gdy odnajdzie pierwszî şle ušytî kontrolkĂ, zaprzestaje dalszej ana- lizy i wyŁwietla wyskakujîcî wiadomoŁð o bĪĂdzie (jeŁli dodatkowo po zaĪado- waniu strony kontrolka z niepoprawnymi danymi bĂdzie niewidoczna, przeglî- darka przewinie dokument, by znalazĪa siĂ u góry jej okna). Kiedy ušytkownik naprawi bĪîd i kliknie przycisk przesyĪania, przeglîdarka wykryje i oznaczy kolejnî niepoprawnî wartoŁð lub przeŁle dane na serwer. Uwaga: Przeglédarki przeprowadzajé walidacjý dopiero po klikniýciu przycisku wysyĥania. Dziýki temu system walidacji dziaĥa wydajnie i prosto, wiýc sprawuje siý wyļmienicie w kaŜdych warunkach. Niektórzy twórcy stron wolé jednak informowaë uŜytkownika o bĥýdzie od razu po tym, jak opuļci pole (np. klikajéc inné kontrolký lub przyciskajéc klawisz Tab). Ta metoda walidacji sprawdza siý szczególnie w dĥugich formularzach, gdzie ĥatwo popeĥnië bĥýdy w wielu polach. Niestety, obecnie HTML5 nie za- wiera techniki dynamicznego sprawdzania, choë pewnie zostanie dodana do standardu w przyszĥoļci. Jeļli zatem zaleŜy Ci na natychmiastowym generowaniu informacji o bĥýdach, napisz wĥasny kod JavaScript lub wykorzystaj gotowé biblioteký. WyĪîczanie mechanizmu walidacji Czasem zdarzajî siĂ sytuacje, w których trzeba wyĪîczyð mechanizm walidacji. PrzypuŁðmy, še chcesz szybko przetestowað, jak dobrze identyfikuje bĪĂdy Twój kod po stronie serwera — warto wtedy dezaktywowað walidacjĂ klienckî. Aby wyĪîczyð jî w caĪym formularzu, wystarczy wewnîtrz znacznika form umieŁcið atrybut novalidate. form id= zooKeeperForm action= processApplication.cgi novalidate R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 127 Walidacja: wykrywanie bĪĂdów Innym rozwiîzaniem jest dodanie przycisku przesyĪania, który omija walidacjĂ. Technika ta czasem siĂ przydaje. Mošesz np. wymuszað walidacjĂ przy ušyciu oficjalnego przycisku WyŁlij, ale jednoczeŁnie pozwolið ušytkownikowi na zapisanie niedokoĬczonych danych, aby mógĪ wysĪað formularz póşniej. W tym celu do znacznika input nalešy doĪîczyð atrybut formnovalidate: input type= submit value= Zachowaj na póşniej formnovalidate Wiesz juš, jak ušywað walidacji do wykrywania niewypeĪnionych pól. Pora, byŁ dowiedziaĪ siĂ, jak szukað bĪĂdów w róšnych typach danych. Uwaga: Chcesz sprawdzië poprawnoļë wpisanych liczb? Co prawda, Ŝadna reguĥa walidacji nie wymu- sza stosowania cyfr w tekļcie, lecz pojawiĥ siý utworzony z myļlé o liczbach nowy typ kontrolki — number (szczegóĥy na stronie 138). Niestety, jej obsĥuga wciéŜ jest niepeĥna. Formatowanie kontrolek walidacyjnych Mimo še nie da siĂ obstylowað wiadomoŁci walidacyjnych, mošna zmienið wyglîd pól tekstowych, w zalešnoŁci od ich stanu. Mošna np. nadað şle wypeĪnionym kon- trolkom inny kolor tĪa — taki widget zmieni wyglîd zaraz po tym, jak przeglîdarka wykryje problem. Aby to osiîgnîð, nalešy skorzystað z kilku nowych pseudoklas (strona 382). Oto szczególnie przydatne. x Pseudoklasy required i optional, które nakĪadajî formatowanie CSS w za- lešnoŁci od tego, czy element zawiera atrybut required. x Pseudoklasy valid i invalid, które nanoszî style na kontrolki w zalešnoŁci od tego, czy zawierajî bĪĂdy. PamiĂtaj, še przeglîdarki wykryjî bĪĂdne warto- Łci dopiero wtedy, jak ušytkownik spróbuje wysĪað formularz, wiĂc wĪaŁciwe formatowanie nie pojawi siĂ na stronie od razu. x Pseudoklasy in-range i out-of-range, nakĪadajîce formatowanie arkusza na kontrolki, do których dodano atrybuty max i min (strona 138). JeŁli np. chcesz, by wymagane pola input miaĪy jasnošóĪte tĪo, Īatwo zdefi- niujesz taki wyglîd przy ušyciu pseudoklasy required: input:required { background-color: lightyellow; } Nie ma przeciwwskazaĬ, by tym kolorem wyróšnið wymagane pola z bĪĂdnymi wartoŁciami; musisz poĪîczyð pseudoklasy required i invalid w taki oto sposób: input:required:invalid { background-color: lightyellow; } Takie ustawienia spowodujî wyróšnienie pustych pól, gdyš Īamiî reguĪĂ narzucanî przez atrybut required. Mošesz wykorzystað inne sztuczki, np. poĪîczyð pseudoklasĂ validation z pseu- doklasî focus, ušyð przesuniĂtego tĪa, w którym zawarĪeŁ specjalnî ikonkĂ do oznaczenia bĪĂdnych wartoŁci itp. Warto jednak pamiĂtað o jednej podstawowej 128 C Z ĉ ĝ û I I i T W O R Z E N I E N O W O C Z E S N Y C H S T R O N Walidacja: wykrywanie bĪĂdów zasadzie: mošesz ušyð tych wĪasnoŁci, aby ulepszyð Twojî stronĂ, ale ze wzglĂdu na kompatybilnoŁð ze starszymi przeglîdarkami upewnij siĂ, še prezentuje siĂ dobrze bez nich. Walidacja wyrašeĬ regularnych Fundamentem najbardziej ušytecznego (i zĪošonego) typu walidacji sî tzw. wy- rašenia regularne. JavaScript juš od dawna obsĪuguje wyrašenia staĪe, zatem doda- nie tej wĪasnoŁci do formularzy HTML to krok uzasadniony. Wyrašenie regularne jest swego rodzaju schematem zdefiniowanym w specyficznym jĂzyku. Wyrašenia regularne sî ustanawiane w celu wymuszenia poprawnoŁci pewnych wzorców tekstu. PrzykĪadowo wyrašenie regularne moše ustanawiað sekwencje wprowadzania cyfr i liter tylko tak, by tworzyĪy istniejîcy kod pocztowy, wymuszað zapisanie symbolu @ w adresie e-mail lub narzucað dodanie przynajm- niej dwuliterowego rozszerzenia w adresie domeny. Spójrz na tĂ formuĪĂ: [A-Z]{3}-[0-9]{3} Kwadratowy nawias na poczîtku wyrašenia otwiera deklaracjĂ zakresu dozwolo- nych znaków. Zakres [A-Z] umošliwia wprowadzenie dušych liter od A do Z (niestety, tylko liter alfabetu ĪaciĬskiego). WystĂpujîca po nim cyfra pomiĂdzy nawiasami klamrowymi okreŁla liczbĂ zdefiniowanych w zakresie liter. Tak wiĂc w omawianym przykĪadzie formuĪa {3} mówi, še nalešy wpisað trzy duše litery. MyŁlnik w Łrodku wyrašenia nie ma šadnego wyjîtkowego znaczenia — po pro- stu wskazuje, še wymaga siĂ wstawienia go po trzech pierwszych literach. Na koniec, formuĪa [0-9] pozwala na wpisanie cyfr od 0 do 9, a fraza {3} wymusza podanie trzech cyfr. Porównywanie wyrašeĬ zwykĪych przydaje siĂ przy przeszukiwaniu (odnajdywa- niu pasujîcych wzorców) i walidacji (sprawdzaniu, czy wartoŁð pasuje do formuĪy). W HTML5 wyrašeĬ zwykĪych ušywa siĂ gĪównie w tym drugim celu. Uwaga: Maniacy wyraŜeħ regularnych, zwróëcie uwagý, Ŝe nie musicie korzystaë z czarodziejskich znaków ^ i $, Ŝeby porównaë poczétek i koniec wartoļci w polu. HTML5 zakĥada wprowadzenie obu tych symboli, co oznacza, Ŝe caĥa wartoļë musi odpowiadaë wzorcowi, by zostaĥa uznana za prawidĥowé. Po porównaniu ze zdefiniowanî wyšej reguĪî nastĂpujîce wartoŁci okazaĪy siĂ prawidĪowe: QRB-001 TTT-952 LAA-000 Te zaŁ wartoŁci zostaĪy zidentyfikowane jako bĪĂdne: qrb-001 TTT-0952 LA5-000 Wyrašenia regularne sî zwykle o wiele bardziej zĪošone niš w omawianym tu przy- kĪadzie. Ich poprawne napisanie moše przyprawið o ból gĪowy, toteš wiĂkszoŁð twórców stron korzysta z gotowych formuĪ, które sprawdzajî interesujîcy ich typ danych. R O Z D Z I A à 4 . i U D O S K O N A L O N E F O R M U L A R Z E 129 Walidacja: wykrywanie bĪĂdów Wskazówka: Aby dowiedzieë siý wiýcej o wyraŜeniach regularnych, wypróbuj dwa znakomite samo- uczki www.w3schools.com/js/js_obj_regexp.asp i http://tinyurl.com/jsregex. Gotowe formuĥy znaj- dziesz na stronie http:
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

HTML5. Nieoficjalny podręcznik
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: