Ćwiczenie: Formularze HTML

🎯 Cel ćwiczenia

Naucz się tworzyć funkcjonalne i dostępne formularze! Formularze to fundament interakcji użytkownika z serwisem internetowym.

Czego się nauczysz:

Podstawowe elementy formularzy: input, textarea, select
Różne typy pól input: text, email, password, number, date
Elementy do wyboru: checkbox, radio, select
Walidacja po stronie klienta
Dostępność i semantyka formularzy
Zaawansowane techniki: datalist, progress, meter
Stylowanie formularzy w CSS

Wymagania wstępne: Podstawowa znajomość HTML i CSS. Umiejętność tworzenia prostych struktur strony.

🔤 Część 1: Podstawowe Elementy Formularzy

Poznaj fundamentalne elementy używane do tworzenia formularzy.

Struktura formularza

                    <!-- Podstawowa struktura formularza -->
                    <form action="/submit" method="POST">
                    
                    <!-- Pole tekstowe -->
                    <label for="name">Imię i nazwisko:</label>
                    <input type="text" id="name" name="name" required>
                    
                    <!-- Pole email -->
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                    
                    <!-- Przycisk submit -->
                    <button type="submit">Wyślij</button>
                    
                    </form>
                

Demonstracja podstawowego formularza

🎛️ Część 2: Różne Typy Pól Input

HTML5 wprowadził wiele specjalizowanych typów pól input.

Popularne typy input

Text (domyślny):

Email:

Password:

Number:

Telephone:

URL:

Date:

Time:

Color:

Range:

File:

☑️ Część 3: Elementy Wyboru

Pola pozwalające użytkownikowi na wybór opcji.

Checkbox, Radio i Select

Zainteresowania (checkbox - wielokrotny wybór):

Sport

Muzyka

Książki

Płeć (radio - pojedynczy wybór):

Mężczyzna

Kobieta

Inna

Kraj (select):

📋 Część 4: Textarea i Inne Elementy

Textarea i dodatkowe elementy

✅ Część 5: Walidacja Formularzy

HTML5 oferuje wbudowaną walidację po stronie klienta.

Atrybuty walidacji

                    <!-- Różne atrybuty walidacji -->
                    <input type="text" required>
                    <input type="email" required>
                    <input type="number" min="0" max="100">
                    <input type="text" minlength="3" maxlength="20">
                    <input type="text" pattern="[A-Za-z]{3}">
                

Formularz z walidacją

✏️ ZADANIA PRAKTYCZNE

Zadanie 1: Formularz rejestracji

ŁATWY

Stwórz formularz rejestracji użytkownika zawierający:

Imię i nazwisko (text, required)
Email (email, required)
Hasło (password, min 8 znaków)
Data urodzenia (date)
Płeć (radio buttons)
Zgoda na regulamin (checkbox, required)
Przycisk "Zarejestruj"

Zadanie 2: Formularz zamówienia

ŚREDNI

Stwórz formularz zamówienia produktu:

Dane osobowe (imię, nazwisko, adres, telefon)
Wybór produktu (select z opcjami)
Ilość (number, min 1, max 10)
Kolor produktu (color picker)
Dodatkowe opcje (multiple checkboxes)
Uwagi (textarea)
Metoda płatności (radio buttons)
Zaawansowana walidacja wszystkich pól

Zadanie 3: Zaawansowany formularz

TRUDNY

Stwórz zaawansowany formularz z dynamicznymi elementami:

Formularz wieloetapowy (zakładki lub kroki)
Dynamiczne dodawanie pól (np. dodatkowych osób)
Walidacja w czasie rzeczywistym
Podpowiedzi (datalist)
Progress bar pokazujący postęp wypełniania
Responsywny design
Dostępność (ARIA attributes)

🎮 Interaktywny Konstruktor Formularzy

Eksperymentuj z różnymi typami pól formularza:

Typ pola:

Etykieta:

Nazwa (name):

Wymagane

Podgląd formularza:

                    <!-- Wygenerowany kod -->
                    <!-- Tutaj pojawi się kod HTML -->
                

🚀 Część 6: Zaawansowane Techniki

Formularz wieloetapowy

Krok 1: Dane osobowe

Imię i nazwisko:

Krok 2: Adres

Adres:

Krok 3: Podsumowanie

Sprawdź poprawność danych i wyślij formularz.

💡 Najlepsze Praktyki Formularzy

Używaj odpowiednich typów input - lepsza walidacja i UX na mobile
Zawsze używaj label - dostępność i klikalność
Grupuj powiązane pola - fieldset i legend
Walidacja po stronie klienta i serwera - nigdy nie ufaj tylko klientowi
Dostępność - ARIA attributes, keyboard navigation
Responsywny design - formularz musi działać na mobile

⚠️ Częste Błędy

❌ Brak etykiet (label)
❌ Nieprawidłowe użycie placeholder zamiast label
❌ Brak walidacji po stronie serwera
❌ Zbyt długie formularze bez podziału
❌ Nieintuicyjne komunikaty błędów
❌ Brak focus styles

📚 DODATKOWE ZASOBY

🎉 GRATULACJE!

Opanowałeś formularze HTML! Teraz możesz tworzyć funkcjonalne i dostępne formularze.

✅ Znasz wszystkie typy pól input
✅ Potrafisz walidować dane po stronie klienta
✅ Umiesz tworzyć dostępne formularze
✅ Rozumiesz zaawansowane techniki
✅ Wiesz jak stylować formularze w CSS

Teraz czas na praktykę! Stwórz swój pierwszy formularz! 📝🚀