Powrót

Najlepsze formularze pod słońcem dzięki sprytnemu użyciu inputów HTML

Ile razy zdarzyło Ci się, że wpisując adres email, przeglądarka w telefonie poprawia wpisywane słowa? Mój prywatny email to moje imię i nazwisko, bez polskich znaków. Wielokrotnie krew mnie zalewała kiedy musiałem kilka razy zmieniać pierwszą literę na małą, a “ł” na “l”. Dziwnych zachowań formularzy jest wiele i potrafią one zupełnie zniszczyć odbiór aplikacji przez klientów. Dzisiaj omówimy temat tak żeby ten problem nie dotykał naszych!

Wprowadzenie

Artykuł ten będzie omawiał sporą część typów inputów w HTML. Możesz go potraktować jako cheatsheet i wracać do niego za każdym razem kiedy będziesz tworzyć formularze. Będzie krótko, zwięźle i na temat! W dodatku z przykładami z życia, a nie z kosmosu.

Dlaczego w ogóle warto korzystać z szerokiego wachlarza typów inputów?

• Ułatwiona walidacja. Wiele rzeczy sprawdzane jest automatycznie, nie trzeba w to włożyć żadnego dodatkowego wysiłku.
• Poprawiony UX. Np. przy użyciu type="tel" zobaczymy na urządzeniu mobilnym klawiaturę zaadaptowaną do wprowadzania numerów telefonu.
• Mniej kodu JS, szybciej ładujące się treści. Skoro HTML5 robi za nas sporą robotę, nie musimy do tych zadań zaprzęgać dodatkowych skryptów.
• Narzędzia asystujące, jak czytniki ekranowe mają ułatwioną pracę. O tym więcej pisałem w artykule o tagach semantycznych.

dla Ciebie ważne aspekty, użyj jakiegoś narzędzia do sprawdzenia jakich przeglądarek używają odbiorcy Twoich aplikacji. Będziesz mógł dzięki temu zweryfikować czy przypadkiem te “bajery” nie omijają lwiej części userów.

Search

Teoretycznie bardzo podobny do “zwykłego” inputa tekstowego, ale ma kilka ciekawych funkcji. Oczywiście będą się one lekko różnic w zależności od przeglądarki.

• Treści wpisywane w ten input zazwyczaj są automatycznie zapamiętywanie. Dzięki temu, wracając do aplikacji, możemy łatwo prześledzić swoją historię wyszukiwania. Zastanów się czy Twoi użytkownicy chcą widzieć to co wpisywali. Jeżeli nie, zrezygnuj z tego typu inputa lub po prostu zastosuj atrybut autocomplete="off.
• Na urządzeniach mobilnych, klawiatura może wyświetlać przycisk z napisem “Szukaj” (oczywiście tekst może się różnić w zależności od przeglądarki, ustawionego języka itd.).

1/* Dla przeglądarek opartych na WebKit (np. Chrome, Safari) */
2input[type="search"]::-webkit-search-cancel-button {
3    -webkit-appearance: none;
4}
5
6/* Dla Microsoft Edge */
7input[type="search"]::-ms-clear {
8    display: none;
9}

Tel

Odnosi się do numeru telefonu. Jak już wspomniałem wyżej, głównym celem używania go jest wyświetlenie odpowiedniej klawiatury. Wyobraź sobie wprowadzanie numeru telefonu przy użyciu klawiatury, w której cyfry są ukryte w podmenu albo są upchnięte nad literami. Nie mówiąc już o szukaniu znaków takich jak +, # czy *.

Email

Nie trzeba raczej tłumaczyć jego przeznaczenia, ale jest kilka rzeczy, które warto mieć na uwadze. Przede wszystkim, wbudowana walidacja jest zawodna, w dużym stopniu. Następujący przykład będzie uznany za prawidłowy: radoslaw@a co nie powinno się zdarzyć, bo brakuje nam jeszcze rozszerzenia domeny (na przykład .com) Co ciekawe, technicznie rzecz biorąc, taki email jest poprawnym adresem w przypadku gdy jest to adres lokalny. Więc to nie tak, że ktoś się nie przyłożył po stronie twórców przeglądarek. W praktyce jednak, będziemy chcieć czegoś w rodzaju adres@email.com .

Duża część przeglądarek oprócz walidacji, da nam też odpowiednio dostosowaną klawiaturę. Na przykład wyświetli w widocznym miejscu znak @, czasem może nawet dodać przyciski wstawiające popularne domeny (@gmail.com, @yahoo.com itd.).

Ciekawostka:

Możemy dodać atrybut multiple, dzięki czemu input zaakceptuje (i zwaliduje!) wiele adresów email. Oddzielić je należy znakiem przecinka.

URL

Służy do wprowadzania adresów internetowych (zwykle stron). Przykładowy URL to https://madecki.io/post/jakis-artykul. Taki typ inputa wymusza na użytkowniku stosowanie się do odpowiedniego formatu, który zawiera:

• Protokół (https://)
• Domenę (madecki.io)

Opcjonalnie możemy wprowadzić jeszcze:

• Ścieżkę (/post)
• Parametry query (?id=123)
• Fragment wskazujący konkretną część strony (#newsletter)

Oprócz tego, ponownie możemy spodziewać się, że przynajmniej część przeglądarek mobilnych dostosuje swoje klawiatury pod wprowadzanie URL.

Number

Oczywiście tutaj również możemy spodziewać się dostosowanej klawiatury na urządzeniu mobilnym (będzie wyglądać podobnie jak w przypadku tel). Oprócz tego, taki input pozwala na ustawienie jego wartości skokowo, o odpowiednią wartość. Możemy to robić za pomocą strzałek, które wyświetlają się na inpucie lub klawiaturą.

To o ile ma się zwiększyć lub zmniejszyć nasza wartość liczbowa, ustawiamy parametrem step="0.3" (w tym przypadku jedno kliknięcie zwiększy lub zmniejszy wartość o 3 dziesiąte). Pamiętaj, że ustawienie step ma też wpływ na walidowanie tego pola. Weźmy przykład:

• Zakres to od 0 do 10
• Step to 3

Dostępne dla użytkownika wartości to:

• 0
• 3
• 6
• 9

Każda inna wartość będzie wywoływać błąd walidacji. Ustawianie step może być pomocne w sytuacji kiedy sprzedajemy w sklepie produkty po kilka sztuk. Powiedzmy, że handlujemy jajami, a nasze opakowania mieszczą 6 sztuk. Wtedy ustawiając step="6", mamy pewność, że nie będziemy musieli wysyłać dwóch opakowań, z czego jedno prawie puste, gdyby ktoś zamówił 7 jaj

Mamy także możliwość ograniczenia zakresu wartości poprzez atrybuty min oraz max.

Data oraz czas

Praca z inputami odnoszącymi się do dat oraz czasu jest nieco bardziej złożona niż mogłoby się wydawać. Możemy bowiem stworzyć input “all-in-one” lub ustawiać z osobna:

• miesiąc (type=”month”) może przydać się kiedy chcemy wyszukiwać loty lub noclegi bez podawania konkretnych zakresów dat, bo interesuje nas na przykład cały lipiec.
• tydzień (type=”week”) sprawdzi się przy zamawianiu specjalistów, którzy mogą nie być w stanie udostępnić precyzyjnego kalendarza dostępności, ze względu na złożoność wykonywanych prac. Masz czas w trzcim tygodniu marca? Odezwiemy się telefonicznie by dogadać dokładny termin z odpowiednim wyprzedzeniem.
• czas (type=”time”) zrobi robotę w aplikacji budzika, listy przypomnień lub timera. Albo po prostu uzupełnienie dla pełnej daty.
• pełna data (type=”date”)

Każdy z tych inputów wyświetli coś w rodzaju małego modala, na którym użytkownik może “wyklikać” oczekiwane przez niego wartości. Jak zawsze - mogą się one od siebie nieco różnić. Problematyczne jest niestety ich stylowanie. Nie tylko ze względu na różnice pomiędzy przeglądarkami (a nawet systemami), ale także przez to, że nie ma ku temu technicznych możliwości. Na ten moment można tylko zmienić w nich bardzo podstawowe kwestie jak kolor tła, czcionka.

Range

Ten input jest często spotykany w sytuacji kiedy potrzebujemy ustawić jakieś wartości w określonym zakresie. Idealny przykład, na który często natrafiamy to regulacja głośności, ale także zakres cen (od minimalnej do maksymalnej). Świetnie sprawdzi się także w ankietach, dając znacznie większą elastyczność wyboru niż skala punktowa. Dzięki przyjemnej, wizualnej formie, a także wygodzie używania we wspomnianych wyżej scenariuszach - bywa niezastąpiony.

Trzeba jednak pamiętać, że slider jest mniej precyzyjny niż podawane wprost wartości liczbowe. Nie tylko ze względu na to, że ktoś nie może “podejrzeć” jaką wartość dokładnie wybrał (chyba, że gdzieś wyświetlimy value). Również z samego faktu, że najmniejszy ruch myszką/palcem może zmienić znacząco podaną odpowiedź.

Z inputem typu number ma wspólne atrybuty min, max oraz step. Te są jednak nie tylko opcjonalnym dodatkiem, tylko czymś niezbędnym do prawidłowego, przewidywalnego działania.

Color

Ostatnim z opisywanych dzisiaj typów jest tzw. color picker. To jak on będzie wyglądał, zależy od systemu i przeglądarki, ale to jaką wartość będzie przechowywał jest z góry przesądzone. Będzie to kolor w formacie HEX (np. #ff0000).

Podsumowanie oraz link do przykładów

Uważam, że jest to lista inputów albo rzadko używanych, albo z pominięciem ważnych kwestii. Mam nadzieję, że zaznajomienie się z nimi oraz ich niuansami pozwoli Ci tworzyć lepsze, wyjątkowe aplikacje.

Wszystkie omawiane inputy znajdziesz na Codesandbox, który stworzyłem na potrzeby tego artykułu.

Powrót