Jakich pól formularza mogę używać?
Aby zadbać o jak najlepsze wrażenia użytkowników,
sprawdź, czy używasz elementu i elementu type, który najlepiej pasuje do danych wprowadzanych przez użytkownika.
Pomóż użytkownikom wpisać tekst
Aby udostępnić użytkownikom pole formularza do wstawienia tekstu, użyj elementu <input>.
To najlepszy wybór w przypadku pojedynczych słów i krótkich tekstów.
Aby dodać dłuższy tekst, użyj elementu <textarea>.
Dzięki temu można wpisać wiele wierszy tekstu,
i ułatwia użytkownikowi czytanie wpisanego tekstu, ponieważ element można przewijać i zmieniać jego rozmiar.
Upewnij się, że użytkownicy wpisują dane w prawidłowym formacie
Czy chcesz pomóc użytkownikom w wypełnieniu numeru telefonu?
Zmień atrybut type na type="tel" dla: <input>.
Użytkownicy urządzeń mobilnych mają dostosowaną klawiaturę ekranową,
przez umożliwienie szybszego i łatwiejszego wpisania numeru telefonu.
W przypadku adresu e-mail użyj type="email".
Tutaj również wyświetla się dostosowana klawiatura ekranowa.
Użyj atrybutu required, aby to pole formularza było obowiązkowe.
Po przesłaniu formularza przeglądarka sprawdza, czy dane wejściowe zawierają wartość i czy są prawidłowe: w tym przypadku
że adres e-mail jest poprawnie sformatowany.
Więcej informacji o różnych typach danych wejściowych. Zapewniają też wbudowane funkcje weryfikacji.
Pomóż użytkownikom w uzupełnianiu dat
Kiedy chcesz rozpocząć kolejną podróż?
Aby ułatwić użytkownikom wpisywanie dat, użyj funkcji type="date".
Niektóre przeglądarki wyświetlają format jako obiekt zastępczy, np. yyyy-mm-dd,
pokazując, jak wpisać datę.
Wszystkie nowoczesne przeglądarki mają niestandardowe interfejsy do wybierania dat w postaci selektora dat.
Pomóż użytkownikom wybrać opcję
Aby użytkownicy mogli zaznaczyć lub odznaczyć jedną z możliwych opcji, użyj funkcji type="checkbox".
Czy chcesz oferować wiele opcji?
W zależności od zastosowania możesz stosować różne rozwiązania.
Najpierw przyjrzymy się możliwym rozwiązaniom, które mogą być stosowane tylko w przypadku, gdy użytkownicy powinni mieć możliwość wyboru tylko jednej opcji.
Możesz używać wielu elementów <input> z atrybutem type="radio" i taką samą wartością name. Użytkownicy widzą wszystkie opcje jednocześnie, ale mogą wybrać tylko jedną.
Możesz też użyć elementu <select>.
Użytkownicy mogą przewijać listę dostępnych opcji i wybierać jedną z nich.
W niektórych przypadkach, takich jak wybór zakresu liczb,
Dobrym rozwiązaniem może być <input> typu range.
Czy chcesz 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ć właściwości <input> w połączeniu z elementem <datalist>.
W ten sposób powstała kombinacja pola tekstowego i listy elementów <option>.
Zapewnianie użytkownikom możliwości wprowadzania różnych typów danych
Dla konkretnych przypadków użycia jest więcej typów danych wejściowych.
Istnieją <input> typu color, które umożliwiają użytkownikom korzystanie z selektora kolorów w obsługiwanych przeglądarkach.
a występują różne inne rodzaje. Aby umożliwić użytkownikom podawanie hasła, użyj funkcji <input>
dzięki type="password". Każdy wpisany znak jest zasłonięty gwiazdką („*”) lub kropką („•”),
aby uniemożliwić odczytanie hasła.
Czy w danych formularza chcesz uwzględnić unikalny token zabezpieczeń?
Używaj konta <input> w usłudze type="hidden".
Użytkownicy nie mogą zobaczyć ani zmodyfikować wartości parametru <input> typu hidden.
Aby umożliwić użytkownikom przesyłanie i przesyłanie plików, użyj <input> z type="file".
W specjalnym przypadku użycia możesz też zdefiniować elementy niestandardowe. gdy żaden wbudowany element ani typ nie jest odpowiedni.
Pomóż użytkownikom wypełnić formularz
Dostępnych jest wiele elementów i typów formularzy, ale który z nich wybierzesz?
W niektórych przypadkach wystarczy łatwo wybrać odpowiedni element i typ,
na przykład <input type="date">. W przypadku innych jest to uzależnione.
Na przykład możesz użyć większej liczby elementów <input> z elementem type="checkbox" lub <select>.
Dowiedz się więcej o wybieraniu list między polami i listami.
Ogólnie rzecz biorąc, przetestuj swój formularz wśród prawdziwych użytkowników, aby znaleźć najlepszy element i typ formularza.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o polach formularzy
Czy istnieje możliwość przesłania wielu plików przy użyciu elementu sterującego formularza?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Jaka jest różnica między type="text" a type="password"?
type="password".type="password", każdy wpisany znak jest zasłonięty gwiazdką (*) lub kropką (•).type="password".