Pola formularzy na liczby oraz pola suwaków

W rozdziale:

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”, które wyglądają tak:

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.