Szczegółowe informacje o polach formularzy

Z jakich pól formularza mogę korzystać?

Aby zapewnić użytkownikom jak najlepsze wrażenia, używaj elementu i elementu type, który jest najbardziej odpowiedni dla danych wprowadzanych przez użytkownika.

Pomaganie użytkownikom w wypełnianiu tekstu

Aby udostępnić użytkownikom pole formularza do wstawiania tekstu, użyj elementu <input>. Jest to najlepszy wybór w przypadku pojedynczych słów i krótkich tekstów. W przypadku dłuższego tekstu użyj elementu <textarea>. Umożliwia to wyświetlanie wielu wierszy tekstu. Ułatwia też użytkownikowi odczytanie wpisanego tekstu, ponieważ element można przewijać i zmieniać jego rozmiar.

Sprawdzanie, czy użytkownicy wpisują dane we właściwym formacie

Czy chcesz pomóc użytkownikom w wypełnieniu numeru telefonu? Zmień atrybut type na type="tel" w przypadku <input>. Użytkownicy urządzeń mobilnych otrzymują dostosowaną klawiaturę ekranową, która pozwala im szybciej i łatwiej wpisywać numer telefonu.

W przypadku adresu e-mail użyj type="email". Ponownie wyświetla się dostosowana klawiatura ekranowa. Aby pole formularza było wymagane, użyj atrybutu required. Gdy formularz zostanie przesłany, przeglądarka sprawdza, czy dane wejściowe mają wartość i czy jest ona prawidłowa: w tym przypadku czy jest to poprawnie sformatowany adres e-mail.

Dowiedz się więcej o różnych typach danych wejściowych. Zapewniają też wbudowane funkcje weryfikacji.

Pomoc użytkownikom w wypełnianiu dat

Kiedy chcesz rozpocząć następną podróż? Aby ułatwić użytkownikom wypełnianie pól dat, użyj type="date". Niektóre przeglądarki wyświetlają format jako element 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.

Pomoc użytkownikom w wybieraniu opcji

Aby umożliwić użytkownikom wybranie lub odznaczenie jednej opcji, użyj elementu type="checkbox". Czy chcesz zaoferować kilka opcji? W zależności od przypadku użycia dostępne są różne alternatywy. Najpierw przyjrzyjmy się możliwym rozwiązaniom, jeśli użytkownicy mają mieć możliwość wyboru tylko jednej opcji.

Możesz użyć wielu elementów <input> z wartością 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ą przewinąć listę dostępnych opcji i wybrać jedną z nich.

W niektórych przypadkach, np. przy wyborze zakresu liczb, odpowiednim rozwiązaniem może być <input> typu range.

Czy musisz 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ć elementu <input> w połączeniu z elementem <datalist>. Dzięki temu możesz połączyć pole tekstowe z listą elementów <option>.

Zadbaj o to, aby użytkownicy mogli wypełniać różne typy danych

W przypadku niektórych zastosowań dostępne są inne typy danych wejściowych.

W obsługiwanych przeglądarkach użytkownikom udostępnia się <input> typu color, aby mogli korzystać z selektora kolorów. Dostępne są też inne typy. Aby umożliwić użytkownikom wpisanie hasła, użyj elementu <input> z elementem type="password". Każdy wpisany znak jest zasłonięty gwiazdką („*”) lub kropką („•”), aby nie można było odczytać hasła.

Czy chcesz dołączyć do danych formularza unikalny token bezpieczeństwa? Używaj <input> w kontekście type="hidden". Użytkownicy nie mogą zobaczyć ani zmienić wartości elementu <input> typu hidden.

Aby umożliwić użytkownikom przesyłanie i przekazywanie plików, użyj <input>type="file".

Możesz też zdefiniować elementy niestandardowe, jeśli masz do czynienia ze szczególnym przypadkiem użycia, w którym żaden wbudowany element lub typ nie jest odpowiedni.

Pomoc użytkownikom w wypełnianiu formularza

Istnieje wiele typów i elementów formularza, 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 to zależy. Możesz na przykład użyć wielu elementów <input> z elementem type="checkbox" lub <select>. Dowiedz się więcej o wybieraniu pól listy i list rozwijanych.

Ogólnie zalecamy testowanie formularza z udziałem prawdziwych użytkowników, aby znaleźć najlepszy element i typ formularza.

Sprawdź swoją wiedzę

Sprawdź swoją wiedzę o polach formularza

Czy można przesłać wiele plików za pomocą elementu formularza?

Tak, służy do tego <input type="files">.
Spróbuj jeszcze raz.
Tak, służy do tego <input type="file" multiple>.
🎉
Nie.
Spróbuj jeszcze raz.
Tak, służy do tego <input type="multiple-files">.
Spróbuj jeszcze raz.

Czym różni się wersja type="text" od type="password"?

Nie ma różnicy.
Spróbuj jeszcze raz.
W przypadku type="password" wyświetla się dostosowaną klawiaturę ekranową do wpisywania haseł.
Spróbuj jeszcze raz.
Gdy używasz type="password", każdy wpisany znak jest zasłonięty przez gwiazdkę (*) lub kropkę ().
🎉
W przypadku usługi type="password" wyświetlany jest niestandardowy interfejs do wpisywania haseł.
Spróbuj jeszcze raz.

Zasoby