Projekt 4: formularz rejestracji

Cel projektu

Celem jest stworzenie formularza, który jest wygodny, czytelny i odporny na błędy. Formularz ma prowadzić użytkownika przez rejestrację bez ukrywania informacji potrzebnych do poprawnego wypełnienia pól.

• Każde pole ma widoczną labelkę połączoną przez for i id.
• Teksty pomocnicze i błędy są powiązane przez aria-describedby.
• Grupy opcji używają fieldset i legend.
• Stany focus, invalid, disabled i success są czytelne bez polegania wyłącznie na kolorze.
• Układ działa na 390px bez poziomego overflow.

Brief projektu

Zaprojektuj formularz rejestracji do programu „CSS Sprint Pro”. Użytkownik powinien podać dane konta, wybrać poziom nauki, zaakceptować regulamin i zobaczyć czytelny przykład błędu walidacji.

Kryteria sukcesu

Dobry formularz nie tylko wygląda schludnie. Musi zmniejszać ryzyko pomyłek i dawać użytkownikowi informację zwrotną dokładnie tam, gdzie jej potrzebuje.

• Formularz ma logiczne sekcje i jedną główną akcję końcową.
• Labelki nie znikają po wpisaniu wartości.
• Błąd jest umieszczony obok pola, którego dotyczy.
• Pola obowiązkowe są oznaczone tekstowo, nie tylko kolorem.
• Checkbox zgody ma wystarczająco duży obszar kliknięcia.
• Przycisk submit ma widoczny stan focus i disabled.

Anatomia formularza

Formularz rejestracji powinien mieć mało zaskoczeń. Użytkownik czyta go od góry do dołu i oczekuje spójnego układu pól.

• Nagłówek: wyjaśnia, co daje rejestracja.
• Dane konta: imię, email i hasło.
• Preferencje: poziom nauki albo cel użytkownika.
• Zgody: checkboxy z jasnym tekstem.
• Feedback: błędy, tekst pomocniczy i stan sukcesu.

Struktura HTML

Zacznij od poprawnych powiązań semantycznych. Labelka, tekst pomocniczy i błąd powinny być częścią tego samego pola.

Kopiuj<form class="registration-project" aria-labelledby="registration-title">
  <div class="registration-project__field">
    <label for="registration-email">Email</label>
    <input id="registration-email" name="email" type="email" aria-describedby="registration-email-help">
    <p id="registration-email-help">Użyj adresu, na który wyślemy potwierdzenie.</p>
  </div>
</form>

Nie zastępuj labelki placeholderem. Placeholder znika w trakcie pisania i nie jest stabilnym opisem pola.

Tokeny i baza

Formularz ma wiele stanów, więc tokeny są szczególnie ważne. Nazwij role: tło, panel, tekst, border, fokus, błąd i sukces.

Kopiuj.registration-project {
  --form-bg: #f8fafc;
  --form-panel: #ffffff;
  --form-text: #0f172a;
  --form-muted: #64748b;
  --form-border: #dbe3ef;
  --form-focus: #2563eb;
  --form-error: #dc2626;
  --form-success: #16a34a;
}

Tokeny nie są tylko estetyką. Ułatwiają utrzymanie spójnych stanów w całym formularzu.

Layout mobile-first

Na mobile formularz powinien być jedną kolumną. Dwie kolumny dla pól mają sens dopiero wtedy, gdy szerokość pozwala zachować czytelne labelki i komunikaty.

Kopiuj.registration-project__grid {
  display: grid;
  gap: 1rem;
}

.registration-project__field {
  display: grid;
  gap: .4rem;
}

Układ jednej kolumny jest przewidywalny, wygodny dla klawiatury i odporny na dłuższe komunikaty błędów.

Pola i labelki

Pola formularza powinny mieć stabilny rozmiar, czytelne obramowanie i widoczny stan fokusu. Labelka powinna być tekstem, nie dekoracją.

Kopiuj.registration-project__field label {
  font-weight: 800;
}

.registration-project__field input,
.registration-project__field select {
  min-height: 2.75rem;
  border: 1px solid var(--form-border);
  border-radius: .75rem;
  font: inherit;
}

Nie usuwaj domyślnej dostępności bez zastąpienia jej lepszym stanem. Własny fokus musi być wyraźny.

Błędy i walidacja

Komunikat błędu powinien być połączony z polem i widoczny w tym samym kontekście. Sam czerwony border nie wystarczy.

Kopiuj.registration-project__field input[aria-invalid="true"] {
  border-color: var(--form-error);
  background: #fef2f2;
}

.registration-project__error {
  color: var(--form-error);
  font-weight: 700;
}

W realnym projekcie walidację może obsługiwać JavaScript albo backend, ale CSS odpowiada za czytelny stan wizualny.

Fieldset i zgody

Grupy opcji, radio i checkboxy powinny mieć semantyczny kontekst. fieldset i legend mówią użytkownikowi, czego dotyczy grupa.

Kopiuj<fieldset class="registration-project__fieldset">
  <legend>Poziom nauki</legend>
  <label>
    <input type="radio" name="level" value="junior">
    Junior frontend
  </label>
</fieldset>

Checkbox zgody musi mieć tekst obok kontrolki, a kliknięcie w tekst powinno aktywować pole.

Responsywność

Na desktopie możesz skrócić formularz przez dwie kolumny, ale tylko dla pól o podobnej wadze. Checkboxy, błędy i długie opisy zwykle lepiej zostawić na pełną szerokość.

Kopiuj@media (min-width: 48rem) {
  .registration-project__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .registration-project__field--full {
    grid-column: 1 / -1;
  }
}

Responsywność formularza to nie tylko kolumny. To też długość linii tekstu, obszary kliknięcia i przewidywalna kolejność tabulacji.

Stany i dostępność

Formularz ma wiele stanów, ale każdy musi być zrozumiały. Focus, błąd, sukces i disabled powinny różnić się więcej niż samym odcieniem koloru.

Kopiuj.registration-project__field input:focus-visible {
  border-color: var(--form-focus);
  outline: 3px solid #bfdbfe;
  outline-offset: 2px;
}

.registration-project__button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

Dostępny formularz nie zmusza użytkownika do zgadywania. Każda informacja zwrotna powinna być blisko pola, którego dotyczy.

Demo projektu

Poniżej znajduje się gotowy kierunek wizualny: formularz rejestracji z sekcjami, stanem błędu, stanem sukcesu, wyborem poziomu i checkboxami zgód.

Najczęstsze błędy początkujących

• Używanie placeholdera jako jedynego opisu pola.
• Wyświetlanie błędu na górze formularza bez powiązania go z konkretnym inputem.
• Usuwanie outline bez przygotowania własnego, widocznego fokusu.
• Projektowanie zbyt wielu kolumn, które utrudniają kolejność czytania i tabulacji.
• Tworzenie małych checkboxów bez klikalnego tekstu labelki.
• Oznaczanie błędu tylko czerwonym kolorem, bez tekstu i semantyki.

Zadanie projektowe

Zbuduj własny formularz rejestracji dla kursu online, aplikacji SaaS albo newslettera premium.

• Napisz brief: kto się rejestruje i co dostanie po wysłaniu formularza.
• Utwórz formularz z nagłówkiem, sekcją danych konta, preferencjami i zgodami.
• Połącz każde label z polem przez for i id.
• Dodaj tekst pomocniczy przez aria-describedby.
• Dodaj przykład pola z aria-invalid="true" i komunikatem błędu.
• Użyj fieldset i legend dla grupy radio albo checkboxów.
• Zaprojektuj stany focus-visible, error, success i disabled.
• Sprawdź formularz na szerokościach 390px, 768px i 1280px.

Checklista jakości

• Każde pole ma widoczną labelkę.
• Komunikaty błędów są blisko pól i są powiązane semantycznie.
• Checkboxy i radio mają klikalny tekst labelki.
• Fokus klawiatury jest wyraźny na polach, checkboxach i przyciskach.
• Disabled wygląda na nieaktywny i nie udaje zwykłego przycisku.
• Na 390px nie ma poziomego overflow.
• Układ desktopowy nie psuje logicznej kolejności formularza.
• Formularz da się zrozumieć bez JavaScriptu.

Podsumowanie projektu

Formularz rejestracji jest testem jakości HTML i CSS. Tu wygląd nie wystarczy: liczy się semantyka, dostępność, przewidywalna kolejność, komunikaty błędów i stany, które realnie pomagają użytkownikowi.

Kolejny krok roadmapy to mini system komponentów CSS.