© 2024 AI Usage by Countries. Form ?

Formularzowe komunikaty błędu

Napisz skrótowe i działające komunikaty błędu z wyraźnymi wizualnymi i słuchowymi elementami

Bądź konkretny i działający (“Wprowadź poprawny adres e-mail, np., name@site.com”).

Byj się uprzejmie; unikaj winy.

Jeden błąd na pole; podsumuj na szczycie formularza po jego wysłaniu.

demo na żywo · powiązana symulacja● LIVE

Umieść błędy poziomu pola bezpośrednio pod polem, wyrównane do lewej.

Podaj, co poszło nie tak i jak to naprawić. Włącz ograniczenia (długość, format, dopuszczalne znaki). Unikaj kodów, chyba że są niezbędne; jeśli pojawią się kodzy, wyjaśnij je.

Często zadawane pytania

Czym jest cel użycia kolorowych granic błędu i ikon do walidacji formularzy?

Używaj kolorów błędu i ikon; podtrzymuj kontrast AA. Tekst błędu 14px z marginesem górskim 6–8px. Ikony nie powinny przesuwać tekstu; ustaw w centrum pionowo.

Jak powinno być związane błędy w formularzu, aby zapewnić dostępność?

Asocjowanie błędów poprzez aria-describedby. Używaj role="alert" lub aria-live="polite" dla dynamicznych błędów. Nie polepszaj się tylko na kolorze; utrzymuj ikonę+i tekst. Upewnij się, że skok ustawia się na pierwszy błąd po złożeniu formularza.

Wypróbuj na żywo

Wszystko powyżej działa bezpośrednio w Twojej przeglądarce — otwórz Hash Function Avalanche Visualizer i zmieniaj parametry podczas działania. Nic nie jest instalowane ani przesyłane na serwer, cały model działa w jednej karcie.

▶ Otwórz symulację Hash Function Avalanche Visualizer