Formularze: input label button
Buduj dostępne formularze HTML z opisanymi polami, różnymi typami input, polami textarea, listami select i przyciskami przesyłania.
Formularze: input label button to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 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.
Dlaczego formularze HTML?
Formularze są podstawowym sposobem wysyłania danych do serwera: służą do logowania, wyszukiwania, finalizacji zakupu i przesyłania opinii. Przeglądarki zapewniają wiele wbudowanych funkcji — walidację, obsługę klawiatury i klawiatury mobilne — które otrzymuje się bez dodatkowej pracy dzięki używaniu natywnych elementów formularzy.
Element <form>
Element <form> opakowuje wszystkie powiązane kontrolki. Atrybut action określa adres URL, na który są wysyłane dane, a method ustawia metodę GET lub POST. W przypadku SPA często zapobiega się domyślnemu wysłaniu formularza i obsługuje je za pomocą JavaScriptu.
<form action="/submit" method="POST">
<!-- inputs go here -->
</form>Pola tekstowe i e-mail
Element <input> jest podstawowym elementem formularzy. Atrybut type zmienia jego działanie. Użyj type="text" dla dowolnego tekstu oraz type="email" dla adresów e-mail (sprawdza format i wyświetla właściwą klawiaturę mobilną).
<input type="text" name="username" placeholder="Enter your name">
<input type="email" name="email" placeholder="you@example.com">Typy password, number i inne
Inne przydatne typy pól: password (ukrywa znaki), number (sprawdza wartość numeryczną i wyświetla przyciski zmiany wartości), date (wyświetla selektor daty), range (suwak), checkbox (przełącznik wartości logicznej), radio (wybór jednej z wielu opcji).
<input type="password" name="pass">
<input type="number" name="age" min="0" max="120">
<input type="date" name="birthday">
<input type="range" min="0" max="100" value="50">Element <label> — kluczowy dla dostępności
Każde pole wejściowe musi mieć powiązany element <label>. Etykieta informuje użytkowników i czytniki ekranu, do czego służy dane pole. Kliknięcie etykiety ustawia fokus na polu. Użyj atrybutu for zgodnego z atrybutem id pola.
<label for="username">Username</label>
<input type="text" id="username" name="username">Textarea i Select
Używaj elementu <textarea> do tekstu wielowierszowego (np. komentarzy). Używaj elementu <select> z elementami potomnymi <option> do tworzenia list wyboru. Zawsze dodawaj domyślną pustą opcję z instrukcją, taką jak „Wybierz kategorię”.
<textarea name="message" rows="4" placeholder="Write your message..."></textarea>
<select name="level">
<option value="">Select level...</option>
<option value="a1">A1 Beginner</option>
<option value="b1">B1 Intermediate</option>
</select>Pola wyboru i przyciski opcji
Powiązane pola wyboru należy grupować za pomocą <fieldset> i <legend>. Przyciski opcji współdzielące tę samą wartość name pozwalają wybrać tylko jedną opcję. Każdy z nich powinien mieć własną etykietę.
<fieldset>
<legend>Preferred languages</legend>
<label><input type="checkbox" name="lang" value="js"> JavaScript</label>
<label><input type="checkbox" name="lang" value="ts"> TypeScript</label>
</fieldset>Przyciski: submit, reset, button
<button type="submit"> wysyła formularz. type="reset" czyści wszystkie pola. type="button" domyślnie nic nie robi i jest używany z procedurami obsługi zdarzeń JavaScript. Należy zawsze określać typ — domyślnie jest to submit.
<button type="submit">Send Message</button>
<button type="reset">Clear Form</button>
<button type="button" id="preview">Preview</button>Grupowanie kontrolek za pomocą <fieldset>
<fieldset> grupuje powiązane kontrolki wizualnie i semantycznie. Wymagany element <legend> zapewnia podpis grupy. Czytniki ekranu odczytują legendę przed każdą kontrolką w grupie, zapewniając odpowiedni kontekst.
Atrybut name — co zostaje wysłane
Po wysłaniu formularza przeglądarki przesyłają parę name=value dla każdej kontrolki. Uwzględniane są tylko kontrolki z atrybutem name. W przypadku pól wyboru wysyłane są tylko zaznaczone pola.
<input type="text" name="firstName" value="Alice">
<!-- Submits: firstName=Alice -->Automatyczne wypełnianie i autocomplete
Należy ustawić wartości atrybutu autocomplete, takie jak email, given-name, new-password lub current-password, aby ułatwić menedżerom haseł i funkcji automatycznego wypełniania przeglądarki prawidłowe wypełnianie formularzy.
<input type="email" name="email" autocomplete="email">
<input type="password" name="pass" autocomplete="current-password">Szybki test
Do czego służy atrybut for elementu <label>?
Podsumowanie: dostępne formularze HTML
Każde pole wejściowe musi mieć etykietę. Należy wybrać odpowiedni typ pola dla danych. Powiązane kontrolki należy grupować za pomocą fieldset. Do wysyłania formularza należy używać button type=submit. Przed dodaniem JavaScriptu warto wykorzystać natywne funkcje formularzy — walidację, nawigację za pomocą klawiatury i automatyczne wypełnianie.
Często zadawane pytania
Czy lekcja „Formularze: input label button” jest bezpłatna?
Tak — pełny tekst „Formularze: input label button” 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 „Formularze: input label button”?
Buduj dostępne formularze HTML z opisanymi polami, różnymi typami input, polami textarea, listami select i przyciskami przesyłania. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Formularze: input label button”?
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
- Struktura dokumentu: DOCTYPE html head body
- Znaczniki semantyczne: header nav main article footer
- Tekst, obrazy, odnośniki i listy
- Formularze: input label button