Elementy formularzy: typy input, select, textarea
Używaj pól tekstowych, e-mail, liczbowych, daty, checkbox, radio, range, file i color wraz z elementami select i textarea.
Elementy formularzy: typy input, select, textarea to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Pełna paleta typów pól wejściowych
HTML5 wprowadził wiele wyspecjalizowanych typów pól wejściowych wykraczających poza zwykły tekst. Każdy z nich informuje przeglądarkę, jakiego rodzaju danych należy oczekiwać, umożliwiając natywną walidację, wyświetlanie odpowiednich klawiatur na urządzeniach mobilnych oraz używanie natywnych dla danej platformy kontrolek interfejsu.
Pola tekstowe, wyszukiwania i adresu URL
type="text" to podstawowy typ pola tekstowego. type="search" sugeruje klawiaturę zoptymalizowaną pod kątem wyszukiwania i często wyświetla przycisk czyszczenia. type="url" sprawdza format adresu URL i wyświetla na urządzeniach mobilnych klawiaturę z przydatnymi klawiszami dla adresów URL.
<input type="text" placeholder="Full name">
<input type="search" placeholder="Search...">
<input type="url" placeholder="https://example.com">Email i tel
type="email" sprawdza format adresu e-mail i wyświetla klawiaturę zoptymalizowaną pod kątem poczty elektronicznej, z klawiszem @. type="tel" wyświetla numeryczną klawiaturę telefoniczną (nie sprawdza formatu, ponieważ formaty numerów telefonów różnią się w zależności od kraju).
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">Typy number, range i date
type="number" służy do danych liczbowych i współpracuje z min/max/step. type="range" służy do suwaków. type="date", type="time" i type="datetime-local" służą do danych czasowych i udostępniają natywne selektory.
<input type="number" min="0" max="100" step="5" value="50">
<input type="range" min="0" max="100" value="60">
<input type="date" min="2025-01-01">
<input type="time">Checkboxy i przyciski radiowe
Checkboxy są niezależnymi przełącznikami. Przyciski radiowe w tej samej grupie (o tej samej nazwie) pozwalają wybrać tylko jedną opcję. Każdy z nich musi mieć powiązaną etykietę.
<fieldset>
<legend>Notification preferences</legend>
<label><input type="checkbox" name="email_notif" value="1"> Email</label>
<label><input type="checkbox" name="sms_notif" value="1"> SMS</label>
</fieldset>
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>Kolor, plik i pole ukryte
type="color" wyświetla natywny selektor koloru. type="file" otwiera okno wyboru pliku; za pomocą atrybutu accept należy ograniczyć dozwolone typy plików. type="hidden" przesyła dane bez wyświetlania kontrolki interfejsu.
<input type="color" name="theme_color" value="#3182ce">
<input type="file" accept="image/png, image/jpeg">
<input type="hidden" name="csrf_token" value="abc123">Listy rozwijane select
Element <select> tworzy listę rozwijaną. Atrybutu multiple należy używać do wyboru wielu opcji (rzadko zapewnia dobry UX). W przypadku długich list opcje należy grupować za pomocą <optgroup>.
<select name="country">
<option value="">Select a country...</option>
<optgroup label="Europe">
<option value="de">Germany</option>
<option value="fr">France</option>
</optgroup>
<optgroup label="Americas">
<option value="us">United States</option>
</optgroup>
</select>Textarea
<textarea> tworzy wielowierszowe pole tekstowe. Atrybutów rows i cols należy używać do określenia początkowego rozmiaru, a do uzyskania większej kontroli — CSS. Znacznik zamykający jest wymagany, a dowolna treść między znacznikami staje się wartością domyślną.
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="5" maxlength="500"
placeholder="Write something about yourself..."></textarea>Datalist — opcje autouzupełniania
<datalist> udostępnia listę sugestii dla pola wejściowego, nie ograniczając przy tym możliwości wpisania dowolnego tekstu. Pole wejściowe należy połączyć z datalist za pomocą atrybutów list i id.
<input type="text" list="languages" name="language" placeholder="Type a language">
<datalist id="languages">
<option value="JavaScript">
<option value="TypeScript">
<option value="Python">
<option value="Rust">
</datalist>Atrybuty value i name
name to klucz wysyłany podczas przesyłania formularza. value ustawia wartość początkową. W przypadku checkboxów i przycisków radiowych value określa wartość przesyłaną po zaznaczeniu. W polach tekstowych value określa wstępnie wypełnioną treść.
Rozmiar input i placeholder
placeholder wyświetla tekst podpowiedzi, gdy pole wejściowe jest puste. Znika po uzyskaniu fokusu i nie zastępuje widocznej etykiety. size określa widoczną szerokość w znakach; do ustalania rozmiaru należy preferować CSS.
Szybki test
Który typ pola wejściowego wyświetla na urządzeniach mobilnych klawiaturę numeryczną i sprawdza, czy wpisana wartość jest prawidłową liczbą?
Podsumowanie: kontrolki formularzy
Należy używać semantycznych typów pól wejściowych: email dla adresów e-mail, number dla liczb oraz date dla dat. Do stałego zestawu opcji należy używać select, do sugerowanego autouzupełniania — datalist, a do wielowierszowego tekstu — textarea. Atrybut name należy zawsze uwzględniać na potrzeby przesyłania danych, a atrybut value stosować tam, gdzie jest odpowiedni.
Często zadawane pytania
Czy lekcja „Elementy formularzy: typy input, select, textarea” jest bezpłatna?
Tak — pełny tekst „Elementy formularzy: typy input, select, textarea” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Elementy formularzy: typy input, select, textarea”?
Używaj pól tekstowych, e-mail, liczbowych, daty, checkbox, radio, range, file i color wraz z elementami select i textarea. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Elementy formularzy: typy input, select, textarea”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Elementy formularzy: typy input, select, textarea
- ARIA i dostępność: label, role, aria-*
- Semantyczny HTML5: semantyka a zupa divów
- Atrybuty walidacji formularzy