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>
z 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?
<input type="files">
.<input type="file" multiple>
.<input type="multiple-files">
.Czym różni się wersja type="text"
od type="password"
?
type="password"
wyświetla się dostosowaną klawiaturę ekranową do wpisywania haseł.type="password"
, każdy wpisany znak jest zasłonięty przez gwiazdkę (*
) lub kropkę (•
).type="password"
wyświetlany jest niestandardowy interfejs do wpisywania haseł.