Choć formularze HTML5 oferują znacznie więcej funkcji niż ich poprzednicy, to nadal są równie łatwe w definiowaniu.
HTML5 wprowadza naprawdę wiele nowych typów pól. Wsparcie przez obecne przeglądarki jest już teraz stosunkowo dobre. W każdym razie w tej sekcji przedstawię tylko takie typy pól, które są praktycznie użyteczne.
Wybierak koloru
Możesz dać swoim odwiedzającym możliwość wyboru koloru.
Gdy kliknie się takie pole, otwiera się standardowy wybierak koloru.
Przy jego pomocy można wybrać pożądany kolor. Pole takie definiuje się za pomocą <input type="color" />.
Wybierz swój ulubiony kolor: <input type="color" name="lf" />
Pole to musi zawsze mieć przypisaną wartość. Jeśli jej brakuje lub jest ona nieprawidłowa, automatycznie przyjęte zostanie #000 (czyli czarny).
Data i godzina
W kontekście typów pól do określania daty i godziny HTML5 wprowadza liczne nowości. A te typy pól mają naprawdę sporo do zaoferowania. Pomyśl, na przykład, ile kroków trzeba było wcześniej podjąć, aby zaoferować odwiedzającym możliwość wyboru daty. Zwykle bez użycia JavaScriptu (lub Flasha) byłoby to niemożliwe. Dzięki HTML5 teraz jest to znacznie prostsze. Wystarczy zdefiniować pole wprowadzania danych jako typ date.
<input type="date" />
Wyswietlanie i implementację kalendarza całkowicie kontroluje przeglądarka. Przeglądarka powinna wyświetlić odpowiedni widżet do prezentacji kalendarza. W Google Chrome aplikacja wygląda następująco:
Za pomocą date definiuje się kalendarz, z którego użytkownicy mogą wybrać żądaną datę. Po dokonaniu wyboru data automatycznie zostanie wpisana do pola tekstowego.
Tak samo łatwo można utworzyć pole na godzinę. Do tego celu używa się pola o typie time.
<input type="time" />
Za pomocą time przeglądarki mają wyświetlić elementy sterujące do wyboru godziny.
Podobnie prosty w obsłudze jest typ week. Pozwala on wybrać tydzień.
<input type="week" />
Dodatkowo można wyświetlić pole na miesiąc.
<input type="month" />
Obydwa typy pól wyświetlają elementy kontrolne, dzięki którym można wprowadzić żądane informacje.
Podczas gdy typy time i date pozwalają tylko na wybór daty lub tylko na wybór godziny, typy datetime i datetime-local pozwalają na połączenie obydwu opcji.
W przypadku typu datetime są obok siebie wyświetlane pole dla daty i pole do wyboru godziny. (Aktualnie datetime jest obsługiwane tylko przez Safari i Operę).
Jak już wspomniano, formularze pól przedstawione w tej sekcji aktualnie nie są obsługiwane przez wszystkie przeglądarki. Osoby, które chcą je mimo to wykorzystać, mogą skorzystać z dedykowanych rozwiązań opartych na JavaScript. Duże frameworki JavaScript, takie jak jQuery i Dojo, oferują odpowiednie skrypty. W przypadku jQuery UI wyglądałoby to tak:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Tak więc jesteście bezpieczni, nawet jeśli przeglądarka nie obsługuje klasycznego date.
Pola na liczby
Za pomocą number oferowane jest pole przeznaczone specjalnie do wprowadzania liczb.
<input type="number" />
Liczby można wprowadzać do tych pól na dwa sposoby:
• za pomocą klawiatury
• za pomocą elementów formularza
Dodatkowe atrybuty pozwalają na jeszcze bardziej szczegółowe opisy pól number. Po pierwsze, są to atrybuty min i max, które określają zakres wartości pól.
• min – najmniejsza możliwa wartość
• max – największa możliwa wartość
Jednak te dwa atrybuty dotyczą jedynie elementów formularza przeglądarek. Ręczne wpisywanie przez użytkowników za pomocą klawiatury nie jest nimi kontrolowane.
Oba atrybuty mogą być przypisane zarówno liczb całkowitych, jak i zmiennoprzecinkowych.
Atrybut step pozwala zdefiniować interwał, który ma być przestrzegany przez elementy formularza przeglądarek.
<input type="number" min="0" max="8" step="2" />
W tym przypadku za pomocą elementów formularza przeglądarki można wybrać tylko wartości 0, 2, 4, 6 i 8.
Suwak
Pola typu range umożliwiają wybór wartości z określonego zakresu.
Przeglądarki interpretują pole range jako suwak.
<input type="range" min="0" max="10" step="2" value="6">
Najmniejszą możliwą wartość określa atrybut min. max opisuje największą możliwą wartość. Jeśli brakuje atrybutów min i max, przeglądarki zakładają wartości 0 i 100.
Za pomocą step można zdefiniować interwał krokowy.
Tworzenie pól wyszukiwania
search nie ma początkowo żadnej funkcji. Raczej ten typ pola jest traktowany jako uzupełnienie standardowego pola tekstowego. Celem pól search jest jedynie wizualne odróżnienie ich od zwykłych pól tekstowych. Zazwyczaj przeglądarki zajmują się wyglądem pól search.
<input type="search" />
Sposób implementacji zależy od producentów. Dobrym uzupełnieniem jest dodanie atrybutu results.
<input type="search" results="5" placeholder="Szukaj..." />
Za pomocą atrybutu results określa się, ile poprzednich wyszukiwań będzie wyświetlanych w polu.
Ale uwaga: Atrybut results nie jest częścią specyfikacji HTML5.
