Rozdział 10. Formularze internetowe

Do rzeczy

Każdy wie, czym są formularze sieciowe, prawda? Wystarczy wziąć element <form>, kilka elementów <input type="text">, czasami można dorzucić jakiś element <input type="password">, na końcu obowiązkowo wstawić <input type="submit"> i gotowe.

Tak naprawdę to nie znasz nawet połowy typów pól wejściowych. W języku HTML5 zdefiniowano kilkanaście nowych typów pól, których można już używać do budowy formularzy. I co najlepsze elementy te są gotowe do użycia od zaraz, bez stosowania żadnych dodatków, sztuczek itp. Ale nie ekscytuj się za bardzo. Niestety nie wszystkie nowe funkcje są obsługiwane przez wszystkie przeglądarki. O nie, z pewnością tak nie jest. W nowoczesnych przeglądarkach twoje formularze będą działać, jak marzenie. A w starszych programach też będą działać, tylko już nie jak marzenie. Chcę przez to powiedzieć, że brak obsługi funkcji przejawia się w elegancki sposób. Nawet w IE 6.

Tekst zastępczy

Jedną z nowości dodanych w języku HTML5 jest możliwość ustawiania tekstu zastępczego w polach wejściowych. Tekst zastępczy (ang. placeholder text) to napis wyświetlany w polu wejściowym, gdy jest puste i nieaktywne. Gdy użytkownik w nim kliknie (albo przejdzie do niego za pomocą klawisza Tab), tekst zastępczy znika.

Każdy nie raz widział coś takiego na stronach internetowych. Przykładowo przeglądarka Mozilla Firefox wyświetla w pustym pasku adresu napis „Przejdź do witryny WWW”.

Gdy klikniesz w tym miejscu (albo przejdziesz do niego za pomocą klawisza Tab), tekst zastępczy znika:

Poniżej znajduje się przykład użycia tekstu zastępczego we własnych formularzach:

<form>
  <input name="q" placeholder="Przejdź do witryny WWW">
  <input type="submit" value="Szukaj">
</form>

Przeglądarki nie obsługujące atrybutu placeholder zwyczajnie go zignorują. Kulturalnie i elegancko. Sprawdź czy twoja przeglądarka obsługuje tekst zastępczy.

Pola z automatycznym fokusem

Aby automatycznie przenieść kursor do wybranego pola formularza na stronie, można użyć JavaScriptu. Przykładowo na stronie głównej Google.com kursor jest automatycznie przenoszony do pola wyszukiwania, aby od razu po wejściu można było rozpocząć wpisywanie szukanej frazy. Podczas gdy dla większości użytkowników jest to bardzo wygodne, niektórym zaawansowanym i nietypowym użytkownikom może to przeszkadzać. Jeśli ktoś naciśnie spację spodziewając się przewinięcia strony, to będzie zawiedziony, ponieważ jego czynność zostanie wykonana w polu formularza. (Po prostu w polu tym zostanie wpisana spacja). Jeśli podczas ładowania strony klikniemy w jakimś polu formularza, to po zakończeniu wczytywania strony „pomocny” skrypt może z powrotem przenieść kursor do domyślnego pola, przez co przeszkodzi nam w pracy i spowoduje, że będziemy pisać w niewłaściwym miejscu.

Jako że funkcja ta jest realizowana poprzez JavaScript, może być trudno zaprogramować obsługę tych wszystkich nietypowych przypadków, a osoby które nie chcą, aby „kradziono” im kursor w ogóle nie mają zbyt wielu możliwości obrony.

Rozwiązaniem tego problemu w języku HTML5 jest atrybut autofocus dla wszystkich elementów formularza. Działanie tego atrybutu jest dokładnie takie, na jakie wskazuje jego nazwa: po zakończeniu wczytywania strony przeglądarka uaktywnia do przyjmowania danych określone pole. Dzięki temu, że funkcja ta jest realizowana poprzez kod HTML, a nie skrypty, działa jednakowo na wszystkich stronach. Ponadto producenci przeglądarek (albo twórcy rozszerzeń) mogą udostępnić użytkownikom opcję wyłączenia tej funkcji.

Oto jak można ustawić pole formularza na automatyczny fokus:

<form>
  <input name="q" autofocus>
  <input type="submit" value="Szukaj">
</form>

Przeglądarki nie obsługujące atrybutu autofocus zwyczajnie go zignorują. Sprawdź czy twoja przeglądarka obsługuje atrybut autofocus.

Cóż to? Mówisz, że chcesz aby automatyczny fokus działał we wszystkich przeglądarkach, a nie tylko paru dziwadłach obsługujących HTML5? Możesz zachować skrypt, którego używałeś do tej pory. Wystarczy tylko dokonać dwóch drobnych zmian:

1. dodaj atrybut autofocus do kodu HTML;
2. Sprawdź czy przeglądarka obsługuje atrybut autofocus i uruchamiaj swój skrypt tylko, gdy przeglądarka nie obsługuje tego atrybutu.

Automatyczny fokus z wyjściem awaryjnym

<form name="f">
  <input id="q" autofocus>
  <script>
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  </script>
  <input type="submit" value="Zatwierdź">
</form>
…

Zobacz przykład użycia atrybutu autofocus z wyjściem awaryjnym.

Jak najszybsze ustawianie fokusu

Na wielu stronach fokus jest ustawiany dopiero po zdarzeniu window.onload. Ale zdarzenie to ma miejsce dopiero po załadowaniu wszystkich obrazów. Jeśli na stronie znajduje się dużo obrazów, to skrypt ustawiający fokus może „zabrać” fokus z innego elementu, z którego użytkownik zaczął już korzystać. Dlatego właśnie zaawansowani użytkownicy tak nie lubią automatycznego fokusu.

W powyższym przykładzie skrypt automatycznego fokusu został umieszczony bezpośrednio za polem formularza, którego dotyczy. Jest to najlepsze rozwiązanie, ale u niektórych może wywoływać opory związane z umieszczaniem bloków kodu JavaScript w środku strony. (Albo bardziej przyziemny powód: system może być za mało elastyczny na takie zabawy.) Jeśli nie możesz wstawić skryptu w środku strony, powinieneś fokus ustawić podczas własnego zdarzenia, jak choćby $(document).ready() jQuery, zamiast po zdarzeniu window.onload.

Automatyczny fokus z pomocą jQuery

<head>
<script src="jquery.min.js"></script>
<script>
  $(document).ready(function() {
    if (!("autofocus" in document.createElement("input"))) {
      $("#q").focus();
    }
  });
</script>
</head>
<body>
<form name="f">
  <input id="q" autofocus>
  <input type="submit" value="Zatwierdź">
</form>

Zobacz przykład użycia atrybutu autofocus z pomocą jQuery.

jQuery zgłasza swoje zdarzenie ready w chwili, gdy dostępne staje się drzewo DOM strony — tzn. czeka na wczytanie tekstu, ale nie czeka na wczytanie wszystkich obrazów. Nie jest to optymalne rozwiązanie — jeśli strona będzie bardzo obszerna albo połączenie sieciowe bardzo powolne, to użytkownik i tak będzie miał okazję zacząć coś robić, zanim zostanie uruchomiony skrypt fokusu. Ale jest to o wiele lepsze niż czekanie na zdarzenie window.onload.

Jeśli możesz wstawić jedną instrukcję do swojego kodu HTML, to istnieje jeszcze trzecie rozwiązanie, które nie ma wady pierwszego i jest lepsze od drugiego z dotychczas opisanych. Możesz zdefiniować własne zdarzenie jQuery, np. autofocus_ready. Później możesz to zdarzenie wyzwolić ręcznie natychmiast gdy interesujące cię pole stanie się dostępne. Dziękuję E. M. Sternbergowi za nauczenie mnie tej techniki.

Automatyczny fokus z pomocą własnego zdarzenia

<head>
<script src="jquery.min.js"></script>
<script>
  $(document).bind('autofocus_ready', function() {
    if (!("autofocus" in document.createElement("input"))) {
      $("#q").focus();
    }
  });
</script>
</head>
<body>
<form name="f">
  <input id="q" autofocus>
  <script>$(document).trigger('autofocus_ready');</script>
  <input type="submit" value="Zatwierdź">
</form>

Zobacz przykład użycia atrybutu autofocus z pomocą własnego zdarzenia.

To jest najlepsze rozwiązanie. Fokus zostanie ustawiony najszybciej jak to możliwe, zanim zakończy się wczytywanie tekstu. Ale w tym przypadku logika fokusu zostaje przeniesiona do nagłówka strony. W tym przykładzie została użyta biblioteka jQuery, ale koncepcja zdarzeń nie jest jej wyłączną cechą. Podobne możliwości stwarzają inne biblioteki JavaScript, np. YUI i Dojo.

Podsumujmy:

• Poprawne ustawianie fokusu jest ważne.
• Jeśli jest taka możliwość, należy skorzystać z atrybutu autofocus pola formularza, aby przeglądarka sama ten fokus ustawiła.
• Jeśli interesuje cię też obsługa w starszych przeglądarkach, sprawdź obsługę atrybutu autofocus, aby skrypt awaryjny był wykonywany tylko w tych starych programach.
• Ustaw fokus najszybciej jak to możliwe. Wstaw skrypt obsługi fokusu bezpośrednio za polem formularza, którego dotyczy. Jeśli to stanowi gwałt na twoim poczuciu estetyki, użyj biblioteki pozwalającej tworzyć własne zdarzenia i wyzwalaj własne zdarzenie bezpośrednio za polem formularza. Jeżeli to niemożliwe, użyj czegoś w rodzaju zdarzenia $(document).ready() jQuery.
• Pod żadnym pozorem nie należy czekać z ustawieniem fokusu na zdarzenie window.onload.

Adresy e-mail

Przez ponad 10 lat formularze internetowe tworzyło się przy użyciu tylko kilku typów pól. Do najczęściej używanych należały:

Wszystkie te typy są dostępna także w HTML5. Jeśli przestawiasz się na HTML5 (zmieniając DOCTYPE), to nie musisz niczego zmieniać w swoich formularzach. Dzięki ci zgodności wsteczna!

Ale w języku HTML5 zdefiniowano 13 nowych typów pól i z powodów, które za chwilę staną się dla ciebie oczywiste nie ma powodu, aby nie zacząć ich używać od zaraz.

Pierwszym z tych nowych typów jest pole na adresy e-mail. Wygląda tak:

<form>
  <input type="email">
  <input type="submit" value="Zatwierdź">
</form>

Miałem rozpocząć to zdanie od słów „W przeglądarkach, które nie obsługują atrybutu type="email"…”, ale ugryzłem się w język, tzn. w palec. Dlaczego? Bo nie jestem pewien co ma znaczyć stwierdzenie, że przeglądarka nie obsługuje atrybutu type="email". Wszystkie przeglądarki go obsługują. Mogą co najwyżej nie traktować go specjalnie (za chwilę pokażę ci kilka przykładów specjalnego traktowania), ponieważ jeśli atrybut type="email" nie jest obsługiwany, jest traktowany jak type="text".

Trudno wyrazić, jak bardzo jest to ważne. W internecie znajdują się miliony formularzy, w których trzeba podać adres e-mail i wszystkie one są zbudowane przy użyciu elementu <input type="text">. Widzisz pole tekstowe, wpisujesz w nim adres e-mail i gotowe. Aż tu nagle pojawia się język HTML5 ze swoim type="email". Czy przeglądarki mają zwariować? Nie. Każda przeglądarka internetowa na świecie nieznane atrybuty type traktuje jako type="text" — nawet IE 6. Dzięki temu już teraz możesz bez przeszkód zacząć używać atrybutu type="email".

Co by znaczyło stwierdzenie, że przeglądarka obsługuje atrybut type="email"? Można wysnuć kilka teorii na ten temat. W specyfikacji HTML5 nie określono żadnego konkretnego sposobu prezentacji tego nowego typu pól. Dlatego większość przeglądarek, np. Safari, Chrome, Opera i Firefox, wyświetla go tak samo, jak zwykłe pole tekstowe — dokładnie tak, jak elementy type="text" — dzięki czemu dla użytkownika nie ma żadnej różnicy (dopóki nie spróbuje wysłać formularza).

I wtedy zstąpił na ziemię iPhone.

iPhone nie ma fizycznej klawiatury. Wszystkie teksty wpisuje się w nim za pomocą klawiatury ekranowej wyświetlanej w odpowiednim momencie, np. gdy uaktywni się pole formularza. Firma Apple zastosowała w przeglądarce iPhone’a sprytną sztuczkę. Dzięki temu rozpoznaje on niektóre nowe typy pól wejściowych HTML5 i dynamicznie dostosowuje klawiaturę ekranową do sytuacji.

Przykładowo adresy e-mail są tekstem, prawda? Ale nie jest to zwykły tekst. Na przykład każdy adres e-mail musi zawierać znak @ i przynajmniej jedną kropkę, ale nie może zawierać spacji. W związku z tym w iPhonie uaktywnienie elementu <input type="email"> powoduje pojawienie się na ekranie klawiatury zawierającej mniejszą niż zwykle spację i dodatkowe klawisze znaków @ and ..

Podsumujmy: nie ma żadnych przeszkód, aby natychmiast zacząć używać elementu type="email". Nie zauważy tego nikt oprócz użytkowników iPhone’a, którzy pewnie też tego nie zauważą. A ci którzy zauważą, uśmiechną się i podziękują ci za ułatwienie im korzystania z twojej strony.

Adresy internetowe

Adresy internetowe — w standardach zwane adresami URL, a przez garstkę pedantów terminologicznych identyfikatorami URI — to kolejny specjalny rodzaj tekstu obsługiwany przez nowe pola formularza. Składnia adresu internetowego jest standardowo zdefiniowana. Jeśli ktoś poprosi cię o wpisanie adresu internetowego w polu formularza, to w istocie oczekuje, że wpiszesz coś w rodzaju http://www.google.com/, a nie „Klonowa 33”. Ukośniki występują powszechnie, nawet w adresie Google są ich trzy sztuki. Także kropki często się spotyka, ale spacji już być nie może. Każdy adres musi mieć na końcu oznaczenie przyrostka domeny, np. „.pl” albo „.com”.

W iPhonie zmieniła się klawiatura ekranowa, podobnie jak to miało miejsce w przypadku adresu e-mail, ale teraz jest optymalnie przystosowana do wpisywania adresu internetowego. Zamiast spacji pojawiły się trzy nowe klawisze: kropka, ukośnik i przycisk „.com”. (Jeśli dłużej przytrzymasz przycisk „.com”, możesz wybrać jeden z innych często używanych przyrostków, np. „.org” albo „.net”.)

W większości nowych przeglądarek element type="url" wygląda jak zwykłe pole tekstowe, dzięki czemu użytkownicy nie zauważą zmiany dopóki nie zatwierdzą formularza. Przeglądarki nie obsługujące HTML5 typ url potraktują tak, jak text, dzięki czemu można bez przeszkód używać go już teraz.

Liczby i wybieraki

Następna lekcja: liczby. Przyjmowanie liczb od użytkowników jest trochę bardziej skomplikowane niż pobieranie tekstu. Po pierwsze liczy są o wiele bardziej skomplikowane niż myślisz. Krótko: wybierz jakąś liczbę. -1? Nie, chodzi mi o liczbę z przedziału od 1 do 10. 7½? Nie, nie bez ułamków głuptasie. π? Teraz to już przeginasz.

Chodzi mi o to, że nie zawsze chodzi nam „po prostu o jakąś liczbę”. Często chcemy, aby użytkownik wpisał liczbę z określonego przedziału. Czasami też interesuje nas tylko konkretny rodzaj liczb z tego przedziału, np. wyłącznie całkowite albo tylko podzielne bez reszty przez 10. W HTML5 jest do tego odpowiedni element.

Wybierz liczbę. Możesz wybrać prawie każdą

<input type="number"
       min="0"
       max="10"
       step="2"
       value="6">

Omówię każdy z tych atrybutów osobno. (Możesz też patrzeć na realny przykład.)

• type="number" oznacza, że jest to pole liczbowe.
• min="0" określa najmniejszą możliwą wartość, jaką można wpisać w tym polu.
• max="10" oznacza maksymalną dopuszczalną wartość.
• step="2" w połączeniu z min określa dopuszczalne liczby w przedziale: 0, 2, 4 itd., aż do max.
• value="6" określa wartość domyślną. Ten atrybut wygląda znajomo. Używa się go od dawna do ustawiania wartości pól formularza. (Piszę o tym, aby udowodnić, że HTML5 powstał na bazie poprzednich wersji języka HTML. Nie trzeba uczyć się od nowa robić tego, co już się umie.)

Tak wygląda pole liczbowe od strony kodu źródłowego. Pamiętaj, że wszystkie te atrybuty są opcjonalne. Jeśli chcesz określić tylko dolny limit wartości, możesz zdefiniować atrybut min i opuścić max. Domyślna wartość skoku (step) wynosi 1, więc jeśli nie potrzebujesz innego skoku, możesz atrybut step opuścić. Jeśli nie ma wartości domyślnej, to atrybut value można pozostawić pusty albo całkiem usunąć.

Ale to nie wszystko. Dodatkowo w ramach promocji otrzymujesz do dyspozycji jeszcze poniższe metody JavaScript:

• input.stepUp(n) — zwiększa wartość pola o n.
• input.stepDown(n) — zmniejsza wartość pola o n.
• input.valueAsNumber — zwraca bieżącą wartość jako liczbę zmiennoprzecinkową. (Własność input.value jest zawsze łańcuchem.)

Trudno ci to sobie wyobrazić? Wygląd kontrolki liczbowej zależy od przeglądarki, więc w zależności od używanego programu możesz zobaczyć różne wyniki. W iPhonie, w którym trudno wprowadza się dane, przeglądarka po raz kolejny dostosowuje klawiaturę wirtualną, aby ułatwić wpisywanie liczb.

W Operze na komputery PC pole type="number" ma postać „wybieraka” składajacego się z dwóch przeciwnie ustawionych strzałek, za pomocą których można wybierać wartości.

Opera obsługuje atrybuty min, max i step, więc wtej przeglądarce zawsze otrzymamy akceptowalną wartośc. Gdy w elemencie pojawi się wartość maksymalna, strzałka skierowana górę stanie się nieaktywna.

Tak jak w przypadku wszystkich wcześniej opisanych nowych typów pól, przeglądarki nie obsługujące pola type="number" traktują je jak type="text". Wartość domyślna zostanie wyświetlona (ponieważ jest zdefiniowana w atrybucie value), a pozostałe atrybuty, np. min i max, zostaną zignorowane. Możesz je zaimplementować samodzielnie albo użyć jakiejś biblioteki JavaScript, w której są już zaimplementowane gotowce. Najpierw tylko sprawdź obsługę standardowych atrybutów HTML5:

if (!Modernizr.inputtypes.number) {
  // brak standardowej obsługi pól typu liczbowego
  // Może użyj Dojo albo jakiejś innej biblioteki JavaScript
}

Liczby i suwaki

Wybieraki (ang. spinbox) nie są jedynym sposobem wyboru liczb. Pewnie nie raz widziałeś „suwaki”.

Teraz możesz takich suwaków używać także w swoich formularzach internetowych. Kod źródłowy wygląda bardzo podobnie do kodu wybieraków:

Wybierz liczbę

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

Wszystkie atrybuty są takie same, jak w polu type="number" — min, max, step, value — i służą też do tego samego. Jedyną róznicą jest wygląd kontrolki. Zamiast pola z miejscem na wpisanie liczby, przeglądarka wyświetli suwak. Robią tak przeglądarki Safari, Chrome, Opera, Internet Explorer 10 oraz iPhone dla iOS 5. (Niestety iPhone ze starszymi wersjami systemu iOS wyświetla zwykłe pole tekstowe. Nie dostosowuje też klawiatury ekranowej.) Wszystkie pozostałe przeglądarki poraktują te pole jako type="text", a więc nie powodu, aby nie zacząć używać go już teraz.

Widżet wyboru daty

W języku HTML 4 nie ma kontrolki wyboru daty. Lukę tę załatano w licznych bibliotekach JavaScript (Dojo, jQuery UI, YUI, Closure Library), ale to oczywiście wymaga zastosowania dodatkowej biblioteki na stronie internetowej.

W HTML5 jednak jest już kontrolka wyboru daty i nie trzeba do jej utworzenia używać żadnych skryptów. Tak naprawdę to jest aż sześć takich kontrolek: dla daty; miesiąca; tygodnia; godziny; daty i godziny oraz daty, godziny i strefy czasowej.

Jak na razie z obsługą tego jest… krucho.

Jest duże prawdopodobieństwo, że wkrótce kontrolki te będą obsługiwane też przez pozostałe przeglądarki. Ale podobnie jak jest w przypadku type="email" i innych typów pól wejściowych, przeglądarki nie obsługujące tych kontrolek wyświetlą zwykłe pola tekstowe. Jeśli chcesz, możesz używać kontrolki <input type="date"> i jej podobnych, uszczęśliwiając w ten sposób użytkowników Operi iOS-a i poczekać, aż pozostałe przeglądarki nadgonią zaległości. Jeśli jednak jesteś realistą, to możesz używać pola <input type="date">, wykrywać czy przeglądarka standardowo obsługuje kontrolki dat i czasu i w razie potrzeby stosować rozwiązanie awaryjne, np. oparte na wykorzystaniu biblioteki Dojo, jQuery UI, YUI, Closure Library lub jakiejś innej.

Kontrolka wyboru daty z rozwiązaniem awaryjnym

<form>
  <input type="date">
</form>
...
<script>
  var i = document.createElement("input");
  i.setAttribute("type", "date");
  if (i.type == "text") {
    // Brak standardowej kontrolki wyboru daty :(
    // Użyj biblioteki Dojo/jQueryUI/YUI/Closure do jej utworzenia
    // i dynamiczne podmień element <input>.
  }
</script>

Pola wyszukiwania

Ten typ jest trochę nietypowy. Sama idea jest prosta, ale sposoby implementacji mogą wymagac odrobinę wyjaśnień. Proszę Państwa, oto…

Pole wyszukiwania. Nie zwykłe pole wyszukiwarki Google czy Yahoo. (Chociaż te również.) Pomyśl raczej o jakimkolwiek polu wyszukiwania na jakiejkolwiek stronie, w jakimkolwiek portalu. Amazon ma takie pole. Newegg je ma. Większość blogów zawiera takie cudo. Jakiego znacznika używa się do jego utworzenia? <input type="text">, jak do każdego innego pola tekstowego. Trzeba to zmienić.

Pole wyszukiwania nowej ery:

<form>
  <input name="q" type="search">
  <input type="submit" value="Szukaj">
</form>

Sprawdź pole <input type="search"> w swojej przeglądarce. W niektórych przeglądarkach pole to niczym nie będzie się różnić od zwykłego pola tekstowego.

Widzisz różnicę? Pole ma zaokrąglone rogi! Wiem, wiem pewnie nie posiadasz się z radości. Ale poczekaj, jest coś jeszcze! Gdy zaczniesz wpisywać coś w polu type="search", Safari po prawej stronie wyświetla mały przycisk „x”. Kliknięcie tego przycisku powoduje skasowanie zawartości pola. (Także przeglądarka Google Chrome, która pod względem technicznym ma wiele wspólnego z Safari, również wykazuje takie działanie.) Dodatki te mają za zadanie ujednolicić styl pól wyszukiwania w iTunes i innych aplikacjach na system Mac OS X.

W witrynie Apple.com pole <input type="search"> było używane, aby upodobnić styl stron do systemu Mac. Ale nie ma w tym nic specyficznego dla systemu Mac. To tylko kod HTML, który każda przeglądarka może prezentować w sposób spójny z platformą, na której działa. Podobnie jak z innymi typami pól wejściowych, jeśli pole type="search" nie zostanie rozpoznane, to przeglądarka potraktuje je jako type="text", a więc można już teraz zacząć używać pól type="search" na wszystkich stronach.

Okienko wybierania koloru

W języku HTML5 dostępne są też pola <input type="color"> służące do wyboru koloru i zwracające jego szesnastkową reprezentację. Dobra wiadomość! Opera 11 już obsługuje element type=color. W systemach Mac i Windows integruje się ze standardowym wybierakiem kolorów platformy. W Linuksie wyświetla prosty wybierak kolorów. Na wszystkich platformach wartość zwrotna jest sześciocyfrową szesnastkową wartością koloru w formacie RGB, której można użyć wszędzie tam, gdzie dopuszczalne jest użycie kolorów CSS.

Dziękuję Patrickowi Lauke i Chrisowi Millsowi za zmianę licencji tego obrazka, aby można go było użyć w tej książce. Warto przeczytać ich artykuł o nowościach w Operze 11.

Sprawdzanie poprawności danych w formularzu

Do tej pory skupiałem się na nowych elementach i funkcjach formularzy HTML5, ale najciekawsze zostawiłem na koniec: w HTML5 dostępna jest automatyczna weryfikacja danych formularzy. Weźmy na przykład często spotykany przypadek pobierania adresu e-mail za pomocą formularza. Najczęściej implementuje się jakąś funkcję weryfikacyjną w JavaScripcie, wspieraną dodatkowo przez działający na serwerze skrypt w PHP, Pythonie lub jeszcze jakimś innym języku. Algorytmów weryfikacyjnych działających po stronie serwera za pomocą języka HTML5 nie da się zastąpić, ale tego typu skrypty JavaScript mogą wkrótce odejść do lamusa.

Sprawdzanie poprawności adresów e-mail przy użyciu JavaScriptu ma dwie wady:

1. Zaskakująco duża liczba odwiedzających (nawet około 10%) ma wyłączony JavaScript.
2. Łatwo popełnić błąd.

Naprawdę, znając życie to prawie na pewno popełnisz gdzieś błąd. Zweryfikowanie czy dowolny losowy ciąg znaków reprezentuje poprawnie zbudowany adres e-mail jest nieprawdopodobnie skomplikowane. Im więcej o tym myślisz, tym trudniejsze się to robi. Czy już mówiłem, że to bardzo skomplikowane? Czy nie byłoby prościej zrzucić cały ten problem na przeglądarkę?

Większość nowych przeglądarek obsługuje elementy type=“email”

To jest zrzut z Opery 11, chociaż funkcja ta działa w tej przeglądarce od wersji 9. Podobne udogodnienia mają też Firefox 4 i Chrome 10. Aby z tego dobrodziejstwa korzystać, wystarczy tylko ustawić atrybut type na "email". Gdy użytkownik zatwierdzi formularz zawierający pole <input type="email">, przeglądarka automatycznie sprawdzi wpisany adres wg standardu RFC, nawet gdy obsługa skryptów będzie wyłączona.

W HTML5 w podobny sposób można też weryfikować adresy internetowe wpisane w pole <input type="url"> oraz liczby w polu <input type="number">. W przypadku liczb brane są nawet pod uwagę wartości atrybutów min i max, dzięki czemu jeśli ktoś wpisze za małą albo za dużą liczbę, to nie uda mu się wysłać formularza.

Modułu weryfikacji danych formularzy HTML5 nie trzeba włączać, ponieważ jest on włączony domyślnie. Aby go wyłączyć, należy użyć atrybutu novalidate.

Nie sprawdzaj mnie, koleś

<form novalidate>
  <input type="email" id="addr">
  <input type="submit" value="Subskrybuj">
</form>

Pola wymagane

Weryfikacja danych w HTML5 nie ogranicza się tylko do określania typów pól. Dodatkowo można też zaznaczyć, które pola są wymagane. Pole wymagane musi mieć jakąś wartość, aby można je było wysłać.

Oznaczanie pól jako wymagane jest tak proste, że prostsze być nie może:

<form>
  <input id="q" required>
  <input type="submit" value="Szukaj">
</form>

Sprawdź pole <input required w swojej przeglądarce. Przeglądarki mogą takie pola oznaczać w jakiś specjalny sposób. Przykładowo w Firefoksie najechanie kursorem na takie pole powoduje pojawienie się chmurki informacyjnej.

Ponadto, gdy zatwierdzisz formularz nie wypełniając obowiązkowego pola, Firefox wyświetli stosowną informację.

Lektura uzupełniająca

Specyfikacje i standardy:

• Typy pola <input>
• Atrybut <input placeholder>
• Atrybut <input autofocus>
• Atrybut <form novalidate>
• Atrybut <input required>

Biblioteki JavaScript:

• Modernizr — biblioteka do sprawdzania poziomu obsługi elementów HTML5

Artykuły, które warto przeczytać:

• Forward Thinking Form Validation
• New form features in Opera 11
• Mozilla Developer Center: Forms in HTML
• HTML5 Form Validation
• Poradnik dla programistów zajmujących się przeglądarką Internet Explorer 10: formularze HTML5