Jakich pól formularza mogę używać?
Aby zapewnić użytkownikom maksymalną wygodę, używaj elementu i elementu type, które najlepiej pasują do danych wpisywanych przez użytkownika.
Pomóż użytkownikom wpisać tekst
Aby udostępnić użytkownikom pole formularza do wstawiania tekstu, użyj elementu <input>.
To najlepszy wybór w przypadku pojedynczych słów i krótkich tekstów.
W przypadku dłuższego tekstu użyj elementu <textarea>.
W ten sposób można wyświetlić wiele wierszy tekstu, a użytkownik może łatwiej zobaczyć wpisany tekst, ponieważ element można przewijać i zmieniać jego rozmiar.
Upewnij się, że użytkownicy wpisują dane w prawidłowym formacie
Chcesz pomóc użytkownikom wpisać numer telefonu?
Zmień atrybut type na type="tel" dla: <input>.
Użytkownicy urządzeń mobilnych mają dostosowaną klawiaturę ekranową, która umożliwia szybsze i łatwiejsze wpisywanie numeru telefonu.
Jako adres e-mail wpisz type="email".
Wyświetla się również dostosowana klawiatura ekranowa.
Użyj atrybutu required, aby pole formularza było obowiązkowe.
Po przesłaniu formularza przeglądarka sprawdza, czy dane wejściowe mają wartość i czy są one prawidłowe – w tym przypadku czy adres e-mail jest poprawnie sformatowany.
Dowiedz się więcej o różnych typach danych wejściowych. Zapewniają też wbudowane funkcje weryfikacji.
Pomóż użytkownikom wpisywać daty
Kiedy chcesz rozpocząć kolejną podróż?
Aby ułatwić użytkownikom wypełnianie dat, użyj funkcji type="date".
Niektóre przeglądarki wyświetlają ten format jako symbole zastępcze, np. yyyy-mm-dd, demonstrując, jak wpisać datę.
Wszystkie nowoczesne przeglądarki mają niestandardowe interfejsy do wybierania dat w formie selektora dat.
Pomóż użytkownikom wybrać opcję
Aby użytkownicy mogli zaznaczyć jedną z możliwych opcji lub ją odznaczyć, użyj zasady type="checkbox".
Czy chcesz udostępnić kilka opcji?
W zależności od przypadku użycia dostępne są różne alternatywy.
Najpierw przyjrzyjmy się możliwym rozwiązaniom, w przypadku którego użytkownicy powinni mieć możliwość wyboru tylko jednej opcji.
Możesz użyć wielu elementów <input> z elementem type="radio" i tą 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ą przewinąć listę dostępnych opcji i wybrać 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 wielu elementów <input> typu checkbox.
Możesz też użyć właściwości <input> w połączeniu z elementem <datalist>.
Daje to połączenie pola tekstowego i listy elementów <option>.
Zadbaj o to, aby użytkownicy mogli wpisywać różne typy danych
Dla konkretnych przypadków użycia istnieje więcej typów danych wejściowych.
Istnieje <input> typu color, który zapewnia użytkownikom selektor kolorów w obsługiwanych przeglądarkach. Dostępnych jest też wiele innych typów. Aby zapewnić użytkownikom możliwość wpisywania hasła, użyj parametru <input> i type="password". Każdy wpisany znak jest zasłonięty gwiazdką („*”) lub kropką („•”), aby uniemożliwić odczytanie hasła.
Czy chcesz umieścić w danych formularza unikalny token zabezpieczeń?
Korzystaj z aplikacji <input>, używając: type="hidden".
Użytkownicy nie mogą zobaczyć ani zmienić wartości <input> typu hidden.
Aby umożliwić użytkownikom przesyłanie i przesyłanie plików, użyj <input> w usłudze type="file".
Elementy niestandardowe możesz też zdefiniować, jeśli masz specjalny przypadek użycia, w którym żadne wbudowane elementy ani typy nie są odpowiednie.
Pomóż użytkownikom wypełnić formularz
Jest wiele elementów i typów formularzy, ale który wybierzesz?
W niektórych przypadkach łatwo wybrać odpowiedni element i typ, na przykład <input type="date">. W innych to zależy.
Możesz np. użyć wielu elementów <input> z elementem type="checkbox" lub <select>.
Dowiedz się więcej o wybieraniu między polami list i listami.
Pamiętaj, aby przetestować formularz na prawdziwych użytkownikach, aby wybrać najlepszy typ i element formularza.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o polach formularzy
Czy za pomocą elementu sterującego formularza można przesłać wiele plików?
<input type="files">.<input type="file" multiple>.<input type="multiple-files">.Jaka jest różnica między type="text" a type="password"?
type="password" jest dostosowana klawiatura ekranowa do wpisywania haseł.type="password", każdy wpisany znak jest zasłonięty gwiazdką (*) lub kropką (•).type="password" wyświetlany jest niestandardowy interfejs do wpisywania haseł.