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="file" multiple>
.<input type="files">
.<input type="multiple-files">
.Jaka jest różnica między type="text"
a type="password"
?
type="password"
, każdy wpisany znak jest zasłonięty gwiazdką (*
) lub kropką (•
).type="password"
.type="password"
.