W rozdziale Formularze HTML5:

• Wprowadzenie
• Element canvas
• Element video
• Magazyn lokalny
• Robotnicy sieciowi
• Aplikacje offline
• Geolokalizacja
• Formularze HTML5
• Mikrodane
• API historii

Pewnie wiesz wszystko o formularzach sieciowych, prawda? Utwórz formularz, dodaj do niego kilka elementów input type="text" i parę elementów input type="password" oraz przycisk input type="submit".

Tak naprawdę to nie znasz nawet połowy typów pól wejściowych. W HTML5 zdefiniowano kilkanaście nowych typów pól, których można już używać do budowy formularzy.

1. <input type="search"> — do tworzenia pól wyszukiwania
2. <input type="number"> — do tworzenia pól wyboru wartości liczbowej
3. <input type="range"> — do tworzenia suwaków
4. <input type="color"> — do tworzenia elementów wyboru koloru
5. <input type="tel"> — do tworzenia pól na numer telefonu
6. <input type="url"> — do tworzenia pól na adresy internetowe
7. <input type="email"> — do tworzenia pól na adresy e-mail
8. <input type="date"> — do tworzenia elementów do wyboru daty
9. <input type="month"> — do tworzenia elementów, w których można wybrać miesiąc
10. <input type="week"> — do tworzenia elementów, w których można wybrać tydzień
11. <input type="time"> — na znaczniki czasowe
12. <input type="datetime"> — na dokładne znaczniki data + godzina
13. <input type="datetime-local"> — na lokalne daty i godziny

Sprawdzanie obsługi typów pól wejściowych HTML5 wymaga zastosowania metody 4. Najpierw tworzy się w pamięci atrapę elementu input. Domyślnym typem tych elementów jest "text". Wkrótce się przekonasz, że jest to bardzo ważna informacja.

  var i = document.createElement("input");

Następnie ustawiamy atrybut type atrapy utworzonego elementu na typ, którego obsługę chcemy sprawdzić.

  i.setAttribute("type", "color");

Jeśli przeglądarka obsługuje wybrany typ, własność type zachowa ustawioną jej wartość. Jeśli przeglądarka nie obsługuje określonego typu, zignoruje ustawioną przez ciebie wartość i własność type będzie miała wartość "text".

  return i.type !== "text";

Zamiast pisać 13 funkcji osobno do sprawdzenia obsługi wszystkich typów pól można użyć biblioteki Modernizr. Biblioteka ta działa bardzo wydajnie, ponieważ sprawdza wszystkie 13 typów przy użyciu jednego elementu input. Następnie tworzy tablicę skrótów o nazwie Modernizr.inputtypes zawierającą 13 kluczy (atrybutów HTML type) i 13 wartości logicznych (true jeśli typ jest obsługiwany i false w przeciwnym przypadku).

Sprawdzanie obsługi elementu wyboru daty

if (!Modernizr.inputtypes.date) {
  // brak standardowej obsługi elementu <input type="date"> :(
  // możesz zbudować własny przy użyciu bibliotek Dojo albo jQueryUI
}

Tekst zastępczy

Oprócz dodania nowych typów pól wejściowych w HTML5 zaimplementowano też kilka ulepszeń w istniejących typach. Jednym z nich 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. Jeśli nie możesz sobie tego wyobrazić, w rozdziale o formularzach znajduje się przedstawiający to zrzut ekranu.

Obsługę tej funkcji sprawdza się przy użyciu techniki nr 2. Jeśli przeglądarka obsługuje tekst zastępczy w polach wejściowych, obiekt DOM reprezentujący element input ma własność placeholder (nawet gdy w kodzie HTML nie zostanie zdefiniowany atrybut placeholder). Jeśli przeglądarka nie obsługuje tekstu zastępczego, obiekt DOM reprezentujący element input nie ma własności placeholder.

function supports_input_placeholder() {
  var i = document.createElement('input');
  return 'placeholder' in i;
}

Zamiast pisać tę funkcję własnoręcznie, do sprawdzania obsługi tekstu zastępczego można użyć biblioteki Modernizr (1.1 lub nowszej).

Sprawdzanie obsługi tekstu zastępczego

if (Modernizr.input.placeholder) {
  // twój tekst zastępczy powinien być widoczny!
} else {
  // brak obsługi tekstu zastępczego :(
  // zastosowanie skryptu awaryjnego
}

Automatyczne aktywowanie pól formularza

Aby automatycznie przenieść kursor do wybranego pola formularza na stronie, można użyć JavaScriptu. Na przykład po wejściu na stronę Google.com można od razu zacząć wpisywać szukaną frazę, ponieważ kursor zostanie automatycznie umieszczony w polu wyszukiwania. 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.

Aby rozwiązać ten problem, w HTML5 wprowadzono atrybut autofocus dla wszystkich elementów formularzy. Działanie tego atrybutu jest dokładnie takie, na jakie wskazuje jego nazwa: przenosi fokus do wybranego pola wejściowego. Dzięki temu że funkcja ta jest realizowana poprzez kod HTML a nie skrypty, działa jednakowo we wszystkich przeglądarkach. Ponadto producenci przeglądarek (i twórcy rozszerzeń) mogą udostępnić użytkownikom opcję wyłączenia tej funkcji.

Obsługę funkcji automatycznego fokusu sprawdza się przy użyciu techniki nr 2. Jeśli przeglądarka ją obsługuje, obiekt DOM reprezentujący element input ma własność autofocus (nawet gdy w kodzie HTML nie zostanie zdefiniowany atrybut autofocus). Jeśli przeglądarka nie obsługuje funkcji automatycznego fokusu dla elementów formularzy, obiekt DOM reprezentujcy element input nie ma własności autofocus. Obsługę automatycznego fokusu można sprawdzić za pomocą poniższej funkcji:

function supports_input_autofocus() {
  var i = document.createElement('input');
  return 'autofocus' in i;
}

Zamiast pisać tę funkcję własnoręcznie do sprawdzania obsługi automatycznego fokusu można użyć biblioteki Modernizr (1.1 lub nowszej).

Sprawdzanie obsługi automatycznego fokusu

if (Modernizr.input.autofocus) {
  // działa!
} else {
  // brak obsługi automatycznego fokusu :(
  // zastosowanie skryptu awaryjnego
}

W rozdziale:

• Wprowadzenie
• Element canvas
• Element video
• Magazyn lokalny
• Robotnicy sieciowi
• Aplikacje offline
• Geolokalizacja
• Formularze HTML5
• Mikrodane
• API historii