Typy pola <input> w HTML5

HTML5 oprócz specyfikacji nowych tagów, możliwości i rozszerzeń, dodaje także nowe funkcjonalności do istniejących już elementów. Jednym z nich są formularze i specyfikacja HTML5 poświęca im cały dział HTML5 Forms. W nowościach m.in. znajdują się nowe typy pola <input>. Przyjrzyjmy się zatem jakie one są.

Dotychczas pole <input> mogło przyjmować wartości "text", "hidden", "submit", "radio", "checkbox", "password", "file" i "reset". HTML5 wprowadza nowe możliwości zarówno w podziale na rozszerzenie typu "text", jak i zupełnie nowe jak np. kontrolkę typu slider czy wybór koloru.

Nowy wygląd

type="range"

Opera	Chrome	Safari	Opera Mobile

Popularny slider. Wśród parametrów można ustawić zakres (max i min) oraz skok (step).

type="date", type="datetime", type="time", type="week", type="month", type="datetime-local"

Opera	Chrome	Safari	Opera Mobile

Nareszcie doczekaliśmy się pola z datą. Najlepiej obsługiwane przez Operę (wyświetla się kalendarzyk), jednak Chrome posiada strzałeczki (jak przy polu number), którymi można przesuwać się o dzień itd.

type="color"

Opera	Opera - "więcej"	Opera - "kredki"

Kontrolka podpowiadająca kolor została do tej pory zaimplementowana jedynie w Operze - jednak trzeba przyznać, że w tym przypadku pole zostało bardzo dopracowane. Oprócz standardowego koła z kolorami dostajemy do wyboru także predefiniowane palety a także możlwość pobierania koloru ze strony.

type="search"

Opera	Chrome	Safari	Opera Mobile

Zasadniczo zmiana polega na wprowadzeniu standardowo zaokrąglonych rogów lub innych stylów pomagających wyróżnić to pole.

WebKit wprowadza także możliwość automatycznego czyszczenia pola małym znakiem X z prawej części kontrolki. Dodatkowo poprawnie podświetla zaokrąglenie w przeciwieństwie do standardowych type="text" z ustawionym border-radius.

Nowy typ walidacji

Wprowadzenie możliwości walidacji pól bezpośrednio z poziomu HTML pozwala zaoszczędzić dużo czasu przy implementowaniu tego typu funkcjonalności w naszym formularzu. 

Specyfikacja HTML5 definiuje kilka predefiniowanych filtrów, które zasadniczo w przeglądarkach na urządzenia stacjonarne nie różnią się wiele (wyglądem) od pola type="text", za to posiadają dodatkowe usprawnienia na urządzenia mobilne. Tym bonusem jest uruchamianie różnego typu klawiatury dotykowej dopasowaniej do danego typu - więcej szczegółów w opisach pól.

type="email"

Waliduje poprawny adres email. Dodatkowo w przeglądarkach mobilnych klawiatura jest dostosowywana do znaków używanych w adresach email (jak np. @).

type="number"

Waliduje pole jako numer. Dodatkowo możliwe jest zdefiniowanie zakresu (min, max) oraz kroku (step) - pole jest wyświetlane jako pole tekstowe z dwoma przyciskami do zwiększania oraz zmniejszania wartości pola o wartość kroku.

type="tel"

Walidacja jako numer telefonu. W przypadku przeglądarek mobilnych klawiatura dostosowana do wprowdzania numerów (znaki jak na klasycznych telefonach komórkowych).

type="url"

Walidacja adresów URL. W przypadku przeglądarek mobilnych klawiatura dopasowywana do adresów URL (pole .com).

Co gdzie działa?

Stosunkowo najlepsze wsparcie dla HTML5 Forms ma w chwili obecnej Opera. Co prawda Opera Mobile 11.10 nie wyświetla odpowiedniej klawiatury, a pole type="search" nie jest ładnie zaokrąglone, to wsparcie dla dat czy kolorów sytuuje tę przeglądarkę jako zdecydowanego lidera w tej kategorii.

Przeglądarki oparte na WebKit'cie (Chrome i Safari) radzą sobie stosunkowo dobrze z większością nowych funkcjonalności - zasadniczo brakuje wsparcia dla kolorów. W przypadku Androida mobilna wersja pozostaje daleko w tyle.

Wygląda na to, że próbująca ostatnio ostro walczyć o tytuł najbardziej innowacyjnej przeglądarki, Mozilla Firefox całkowicie zapomniała o tej części standardów. Jedynym plusem jest wsparcie dla odpowiedniej klawiatury w przeglądarce mobilnej.

W celu bardziej szczegółowych informacji polecam stronę caniuse.com, a do testowania poszczególnych przeglądarek HTML5 Form Test.

Co dalej?

Nowe typy pól to tylko początek HTML5 Forms. Do tego dochodzą nowe atrybuty (np. placeholder) dla różnych pól, wspomniana walidacja, odpowiednie pseudoklasy dla walidowanych pól. Oto polecane materiały:

HTML5 Forms na blogu Opery
HTML5 Forms na MDN
HTML5 Forms na diveintohtml5