Artykuł

sie 17 2011
0

Lepsze formularze w HTML5

Patrząc na rosnące w zaskakującym tempie numery wersji przeglądarek, nie sposób odnieść wrażenia, że wojna przeglądarek rozpoczęła się na nowo i tym razem w szranki stanęli Google Chrome i Mozilla Firefox. To właśnie Google Chrome narzucił te szaleńcze numerkowe tempo i dziś dostępny jest już w wersji 13 (warto dodać, że w kanał developerskich znajduje się wersja 15). Firefox, z kolei przyspieszył dopiero ostatnio Zaledwie kilka miesięcy temu, pojawiła się długo wyczekiwana wersja 4, a dosłownie w ostatnich dniach, można było pobrać już wersję 6.

I choć zmiany w kolejnych wersjach nie są już takie radykalne, czy też szokujące, to wszystko to zmierza jednak do przodu i można by rzeczy, że przyspiesza, tak jak czyni to sam Internet, za pomocą rozbudowanych aplikacji internetowych (ciężko to już nazywać stroną internetową), które napędza CSS3, JavaScript i właśnie tytułowy HTML5.

Nowe lepsze formularze w HTML5

Po tym wyjątkowo długim wstępie, czas przejść do meritum dzisiejszego wpisu, czyli formularzy, których nie ominęły również zmiany wprowadzone w HTML5. Przede wszystkim, pojawiły się nowe typy pól. Część z nich, ma bardziej charakter znaczeniowy i z poziomu desktopów nie przyniesie dla użytkownika raczej żadnej zmiany (np. pola url, tel, email).

Inne pola dodają do formularzy nowe kontrolki, znane bardziej dotychczas raczej z aplikacji systemowych, co kolejny raz potwierdza tezę, że strony internetowe to takie nowoczesne aplikacje.

Drugim punktem niniejszego wpisu, będzie opis nowych właściwości formularzy, które z reguły były przez webmasterów implementowane za pomocą JavaScriptu, a teraz po prostu znajdują się w specyfikacji i czekają, żeby je wykorzystać;)

Nowe typy pól

Wszystkie opisane pola, są polami typu input, ale o różnej wartości atrybutu type. Ze względu na nieustanne aktualizacje przeglądarek (o czym pisałem we wstępie), nie będę tutaj opisywał wsparcia poszczególnych elementów przez przeglądarki.

Url

Typ url, podobnie jak kolejne dwa typy, przyda się na urządzeniach mobilnych. Jeśli przeglądarka wykryje taki typ pola, to na ekranie powinna się pojawić specjalna klawiatura przystosowana do wprowadzania adresów sieciowych. Jeśli przeglądarka nie obsługuje tego typu pola, to zadziała ono jak normalne pole tekstowe.

<input type="url" />

Email

Sytuacja w tym przypadku, jest analogiczna jak w poprzednim typie pola. Przeglądarka urządzenia mobilnego, która rozpozna, że dla danego pola należy wprowadzić email, postara się o wyświetlenie odpowiedniej klawiatury.

<input type="email" />

Tel

Ostatnie z pól, z których ucieszą się właściciele inteligentnych komórek. Pole typu tel, jest przeznaczone do wprowadzania... nie mylił się ten, który odgadł, że chodzi o numer telefonu:) Warunki użytkowania i zachowania identyczne jak w poprzednich dwóch przypadkach.

<input type="tel" />

Search

Search, to nic innego jak dedykowane pole przeznaczone do wyszukiwania. Pole tego typu, nie ma jakiś specjalnych właściwości, czy funkcji, ale w przeglądarkach opartych o silnik Webkit otrzymuje specjalne reguły styli.

Range

Pole typu range, wyświetli w przeglądarce suwak (w środowiskach programistycznych, kontrolkę tę często określano nazwą slider. Dla tego typu pola, możemy zdefiniować dodatkowe atrybuty:

  • min - minimalna wartość skali
  • max - maksymalna wartość skali
  • value - aktualna wartość
<input type="range" min="0" max="10" value="5" />

Number

Kolejne typ, to number. Number pozwala na tworzenie czegoś co przypomina kontrolkę spinner (kontrolka z miejscem na wpisanie liczby oraz strzałkami góra/dól umożliwiającymi zmianę tej liczby). Operuje na takich samych atrybutach jak typ range, czyli: min, max, value.

<input type="number" min="0" max="10" value="5" />

Date

Kolejne pole, pozwoli nam na łatwiejsze wprowadzanie daty. Różnie niestety w tej chwili bywa z implementacją tego pola. Np. w Firefoksie 6 jest ono zwykłym inputem, a w Chrome 14 beta, możemy wybierać datę w sposób podobny jak w przypadku pola number, w Operze zaś, powinien pojawić się kalendarz.

<input type="date" />

Color

Pole color pozwala na definiowanie kolorów. Niektóre z przeglądarek rozpoznają ten typ pola, ale nie udostępniają żadnych dodatkowych właściwości.

<input type="color" />

Nowe właściwości oraz atrybuty

Autocomplete

Przeglądarki internetowe, często zapamiętują dla nas wprowadzone wcześniej wartości w określonych polach. W pewnych przypadkach (np. w polach służących do wyszukiwania), może to być irytujące. Na szczęście łatwo idzie sobie poradzić z tym problemem. Wystarczy dla danego pola, ustawić atrybut autocomplete na off:

<input type="search" autocomplete="off" />

Autofocus

Jeśli chcemy, by wybrane pole formularza, otrzymało focus po załadowaniu się strony, możemy mu nadać pusty atrybut autofocus w ten właśnie sposób:

<input type="email" autofocus />

Placeholder

Bardzo często (szczególnie w formularzach wyszukiwania), można znaleźć tymczasowy tekst wstawiony w określone pole typu input. Po kliknięciu na pole, tekst znika, a my możemy rozpocząć wprowadzanie naszej własnej treści. Dotychczas, trick ten realizowano za pomocą JavaScriptu, a jak pewnie sami zauważyliście, często funkcja ta działała w sposób nieprawidłowy. W HTML5, pojawił się specjalny atrybut placeholder, który pozwala na wprowadzenie tekstu zastępczego:

<input type="search" placeholder="Szukaj..." autocomplete="off" />

Testowy plik zawierający treści zawarte w tym wpisie, możecie znaleźć tutaj. Wiele z powyżej wymienionych elementów, zostało zastosowanych również na tym blogu.

Wpis powstał w oparciu o książkę HTML5 i CSS3 - Standardy przyszłości autorstwa Briana P. Hogana.

P.S. Jeśli podoba Ci się ten wpis, poleć go i przejrzyj inne wpisy z cyklu Webmaster.

Data ostatniej modyfikacji: 28.11.2011, 18:35.

Komentarze

blog comments powered by Disqus