Szczegółowe informacje o polach formularzy

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.

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?

Tak, używam konta <input type="file" multiple>.
Tak, używam konta <input type="files">.
Nie.
Tak, używam konta <input type="multiple-files">.

Jaka jest różnica między type="text" a type="password"?

Nie ma różnicy.
Jeśli używasz type="password", każdy wpisany znak jest zasłonięty gwiazdką (*) lub kropką ().
Wyświetlany jest niestandardowy interfejs do wpisywania haseł dla konta type="password".
Wyświetlana jest dostosowana klawiatura ekranowa do wpisywania haseł dla użytkownika type="password".

Zasoby