Najważniejsze typy pól w formularzach HTML to m.in.: text, password, email, url, tel, number, range, date, time, datetime-local, month, week, color, search, file, checkbox, radio, hidden, button, submit, reset, image. Poniżej, co „da się załatwić” każdym z nich oraz alternatywne formy kontaktu.
Typy inputów i do czego służą
- text — krótki jednowierszowy tekst, domyślny typ pól input.
- password — wprowadzanie haseł (znaki maskowane).
- email — adres e‑mail z wbudowaną walidacją składni przez przeglądarkę.
- url — adres WWW z walidacją formatu URL.
- tel — numer telefonu; ułatwia wprowadzanie na urządzeniach mobilnych i może być walidowany wzorcem.
- number — liczby, z obsługą min/max/step i strzałkami do zmiany wartości.
- range — suwak do wyboru wartości z zakresu.
- date — wybór daty z kontrolką kalendarza.
- time — wybór czasu.
- datetime-local — data i czas bez strefy czasowej.
- month — wybór miesiąca i roku.
- week — wybór tygodnia roku.
- color — wybór koloru z selektorem.
- search — pole wyszukiwania (drobne różnice UI).
- file — wybór i wysyłka plików.
- checkbox — wielokrotny wybór opcji.
- radio — jednokrotny wybór jednej opcji z grupy.
- hidden — ukryte dane przesyłane z formularzem (np. token).
- button — przycisk ogólnego przeznaczenia (akcje skryptowe).
- submit — wysłanie formularza.
- reset — reset wartości pól do domyślnych.
- image — graficzny przycisk wysyłający formularz.
Dlaczego warto używać dedykowanych typów
- Przeglądarki zapewniają wbudowaną walidację dla typów takich jak email, url, number itp., co zapobiega wysyłce oczywiście błędnych danych bez dodatkowego JS.
- Dedykowane kontrolki poprawiają użyteczność (np. klawiatury numeryczne dla tel/number, selektory daty/koloru).
Co można „załatwić” w formularzu
- Zbieranie danych kontaktowych – imię, email, telefon, adres www.
- Wysyłanie zapytań/wiadomości – pola text/textarea, wybór tematu, załączniki przez file.
- Zapisy na newsletter/konto – email, password, checkbox zgód, submit.
- Rejestracje/ankiety – radio/checkbox/select, number/range, date/time.
- Wgrywanie plików – input type=”file” z odpowiednim kodowaniem formularza do wysyłki plików.
Inne formy kontaktu poza formularzem
- Adres e‑mail (do samodzielnego napisania przez użytkownika, bez linkowania): np. [email protected].
- Numer telefonu – np. +48 600 000 000.
- Strona WWW – np. www.twojadomena.pl.
- Media społecznościowe – nazwy profili, np. Instagram: @twojprofil, Facebook: facebook.com/twojprofil.
- Live chat / czat na stronie – wdrożenie widgetu czatu zamiast/obok formularza.
- Komunikatory – podanie identyfikatora w WhatsApp/Signal/Telegram.
- Adres fizyczny i godziny – przy kontaktach offline.
Uzupełniające wskazówki projektowe
- Używaj atrybutów wymagających danych i zakresów: required, minlength/maxlength, pattern, min, max, step, aby wzmocnić walidację po stronie przeglądarki.
- Dodawaj poprawne etykiety label powiązane z polami i opis błędów, by poprawić dostępność.
- Dla przesyłania plików ustaw enctype=”multipart/form-data” w znaczniku form.
- Pamiętaj, że domyślny typ input to text, jeśli nie podasz type.
Źródła: listę i funkcje typów input opisują m.in. dokumentacje i poradniki webdev.
