Rozdział 10. Formularze internetowe

> Dodaj do ulubionych

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

Obsługa tekstu zastępczego
IEFirefoxSafariChromeOperaiPhoneAndroid
10.0+4.0+4.0+4.0+11.0+4.0+2.1+

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.

Pytanie do profesora Kodeckiego

P: Czy w atrybucie placeholder można używać znaczników HTML? Chciałbym użyć obrazu albo zmienić kolor tekstu.
O: Atrybut placeholder mo┼╝e zawiera─ç tylko tekst, ┼╝adnego kodu HTML. Ale istniej─ů niestandardowe rozszerzenia CSS pozwalaj─ůce zmienia─ç w┼éa┼Ťciwo┼Ťci tekstu zast─Öpczego w niekt├│rych przegl─ůdarkach.

Pola z automatycznym fokusem

Obsługa automatycznego fokusu
IEFirefoxSafariChromeOperaiPhoneAndroid
10.0+4.0+4.0+3.0+10.0+·3.0+

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:

Typ polaKod HTMLUwagi
pole wyboru<input type="checkbox">mo┼╝na w┼é─ůcza─ç i wy┼é─ůcza─ç
prze┼é─ůcznik<input type="radio">mog─ů by─ç grupowane
pole has┼éa<input type="password">wy┼Ťwietla kropki zamiast wpisywanych znak├│w
listy rozwijane<select><option>…
element wyboru pliku<input type="file">wy┼Ťwietla okno dialogowe wyboru pliku
przycisk zatwierdzania<input type="submit">
zwyk┼éy tekst<input type="text">atrybut type mo┼╝na opu┼Ťci─ç

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.

Obsługa kontrolki wyboru daty
Pole wej┼ŤcioweIEFirefoxSafariChromeOperaiPhoneInne przegl─ůdarki
type="date"··5.0+20.0+9.0+5.0+·
type="datetime"··5.0+·9.0+5.0+·
type="datetime-local"··5.0+·9.0+5.0+·
type="month"··5.0+·9.0+5.0+·
type="week"··5.0+·9.0+5.0+·
type="time"··5.0+20.0+9.0+5.0+·

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>

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.

Pytanie do profesora Kodeckiego

Domy┼Ťlnie starsze wersje przegl─ůdarki Safari nie stosuj─ů ┼╝adnych arkuszy CSS do p├│l <input type="search">. Je┼Ťli chcesz, aby przegl─ůdarka ta traktowa┼éa te pola jako tekstowe (aby m├│c je formatowa─ç przy u┼╝yciu CSS), dodaj do arkusza styl├│w poni┼╝sz─ů regu┼é─Ö:

input[type="search"] {
  -webkit-appearance: textfield;
}

Dzi─Ökuj─Ö Johnowi Leinowi za pokazanie mi tej sztuczki.

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.

Sprawd┼║ jak wygl─ůda element type="color" w twojej przegl─ůdarce.

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

Obsługa funkcji weryfikacji danych formularzy
IEFirefoxSafariChromeOperaiPhoneAndroid
10.0+4.0+5.0+10.0+9.0+··

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

Obsługa atrybutu required
IEFirefoxSafariChromeOperaiPhoneAndroid
10.0+4.0+·10.0+9.0+··

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:

Biblioteki JavaScript:

  • Modernizr — biblioteka do sprawdzania poziomu obs┼éugi element├│w HTML5

Artykuły, które warto przeczytać:

Autor: Mark Pilgrim

Źródło: http://diveintohtml5.info/

Tłumaczenie: Łukasz Piwko

Tre┼Ť─ç tej strony jest dost─Öpna na zasadach licencji CC BY 3.0