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ł.