Aby zapewnić użytkownikom jak najlepsze wrażenia, używaj elementu i elementu type, które najlepiej pasują do danych wprowadzanych przez użytkownika.
Ułatwianie użytkownikom wpisywania tekstu
Użyj elementu <input>, aby podać pole formularza. <input> to najlepszy wybór w przypadku pojedynczych słów, wyrażeń i krótkich wpisów. W przypadku dłuższego tekstu użyj elementu <textarea>. Umożliwia to wpisywanie wielu wierszy tekstu i ułatwia użytkownikowi wyświetlanie wpisanego tekstu, ponieważ element można przewijać i zmieniać jego rozmiar.
Wymagaj od użytkowników wpisywania danych w prawidłowym formacie
Czy chcesz pomóc użytkownikom w wypełnianiu numeru telefonu?
Zmień atrybut type na type="tel" w przypadku <input>.
Użytkownicy urządzeń mobilnych mają dostęp do dostosowanej klawiatury ekranowej, dzięki czemu mogą szybciej wpisać numer telefonu.
W przypadku adresu e-mail użyj type="email".
Ponownie wyświetli się dostosowana klawiatura ekranowa.
Użyj atrybutu required, aby pole formularza było obowiązkowe.
Po przesłaniu formularza przeglądarka sprawdza, czy pole wejściowe ma wartość i czy jest ona prawidłowa. W tym przypadku sprawdza, czy jest to prawidłowo sformatowany adres e-mail.
Dowiedz się więcej o różnych rodzajach danych wejściowych. Zapewniają one też wbudowane funkcje weryfikacji.
Ułatwianie użytkownikom wpisywania dat
Kiedy chcesz rozpocząć kolejną podróż?
Aby ułatwić użytkownikom wpisywanie dat, użyj type="date".
Niektóre przeglądarki wyświetlają format jako symbol zastępczy, np. yyyy-mm-dd, pokazując, jak wpisać datę.
Wszystkie nowoczesne przeglądarki udostępniają niestandardowe interfejsy do wybierania dat w postaci selektora daty.
Pomaganie użytkownikom w wybraniu opcji
Aby użytkownicy mogli wybrać lub odznaczyć jedną z możliwych opcji, użyj symbolu type="checkbox".
Czy chcesz oferować wiele opcji?
W zależności od przypadku użycia dostępne są różne alternatywy.
Najpierw zapoznaj się z możliwymi rozwiązaniami, jeśli użytkownicy powinni mieć możliwość wybrania tylko jednej opcji.
Możesz użyć wielu elementów <input> z atrybutem type="radio" i tą samą wartością name. Użytkownicy widzą wszystkie opcje naraz, ale mogą wybrać tylko jedną.
Inną opcją jest użycie elementu <select>.
Użytkownicy mogą przewijać listę dostępnych opcji i wybrać jedną z nich.
W niektórych przypadkach, np. przy wyborze zakresu liczb, dobrym rozwiązaniem może być typ <input>range.
Czy musisz oferować możliwość wyboru wielu opcji?
Użyj elementu <select> z atrybutem multiple lub kilku elementów <input> typu checkbox.
Możesz też użyć elementu <input> w połączeniu z elementem <datalist>.
Otrzymasz w ten sposób połączenie pola tekstowego i listy elementów <option>.
Umożliwienie użytkownikom wypełniania różnych typów danych
Istnieje więcej typów danych wejściowych do konkretnych zastosowań.
Istnieje element <input> typu color, który umożliwia użytkownikom korzystanie z selektora kolorów w obsługiwanych przeglądarkach, a także wiele innych typów. Aby użytkownicy mogli wpisać hasło, użyj <input> z type="password". Każdy wpisany znak jest zasłaniany gwiazdką („*”) lub kropką („•”), aby hasło nie mogło zostać odczytane.
Czy chcesz dołączyć do danych formularza unikalny token bezpieczeństwa?
Użyj <input> w sklepie type="hidden".
Wartości <input> typu hidden nie są widoczne dla użytkowników i nie mogą być przez nich modyfikowane.
Aby umożliwić użytkownikom przesyłanie i przesyłanie plików, użyj <input> z type="file".
Możesz też zdefiniować elementy niestandardowe, jeśli masz specjalny przypadek użycia, w którym żaden wbudowany element ani typ nie jest odpowiedni.
Pomaganie użytkownikom w wypełnianiu formularza
Istnieje wiele elementów i typów formularzy, ale który z nich wybrać?
W niektórych przypadkach wybór odpowiedniego elementu i typu jest prosty, np. <input type="date">. W innych przypadkach zależy to od okoliczności.
Możesz na przykład użyć wielu elementów <input> z atrybutem type="checkbox" lub elementem <select>.
Dowiedz się więcej o wybieraniu między polami listy a listami rozwijanymi.
Ogólnie rzecz biorąc, testuj formularz na prawdziwych użytkownikach, aby znaleźć najlepszy element i typ formularza.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o polach formularza
Czy za pomocą elementu formularza można przesłać wiele plików?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Czym różni się wersja type="text" od type="password"?
type="password" wyświetlana jest dostosowana klawiatura ekranowa do wpisywania haseł.type="password", każdy wpisany znak jest zasłaniany gwiazdką (*) lub kropką (•).type="password" wyświetlany jest niestandardowy interfejs do wpisywania haseł.