Progresywne ulepszanie formularzy
Projektuj formularze działające bez JavaScriptu i płynnie zyskujące dodatkowe możliwości po jego włączeniu.
Progresywne ulepszanie formularzy to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 3 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 Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Znaczenie PE
Progresywne ulepszanie polega na zbudowaniu podstawowego doświadczenia, które działa dla każdego, a następnie dodaniu kolejnych usprawnień.
Podstawowe działanie bez JS
Formularze HTML z method=POST działają bez JavaScriptu. SvelteKit obsługuje je po stronie serwera.
Warstwa JS
Dodaj use:enhance, aby wysyłać formularze po stronie klienta bez pełnego przeładowania.
Walidacja po stronie serwera
Zawsze przeprowadzaj walidację na serwerze. Walidacja po stronie klienta służy wyłącznie poprawie wygody użytkownika.
Unikaj e.preventDefault
Pozwól, aby enhance w SvelteKit obsłużyło preventDefault. Ręczna obsługa niweczy działanie bez JS.
Wskaźniki ładowania
Wyświetlaj animacje ładowania podczas wysyłania przez fetch i ukrywaj je natychmiast po otrzymaniu odpowiedzi.
Odporność interfejsu
Jeśli JavaScript nie załaduje się, formularze nadal będą działać. Skorzystają na tym również użytkownicy wolnych sieci.
Dostępność
Używaj prawidłowych etykiet i regionów aria-live do ogłaszania błędów.
Warstwa walidacji formularza
Atrybuty HTML5 (required, type, pattern) zapewniają bezpłatną walidację po stronie klienta.
<input type="email" required minlength="3" />Zaufanie do serwera
Nigdy nie ufaj walidacji po stronie klienta. Przed zapisaniem danych ponownie sprawdź je na serwerze.
Przykład z praktyki
Formularz logowania powinien uwierzytelniać użytkownika za pomocą POST. Jeśli JavaScript jest dostępny, użyj enhance, aby zapewnić płynną obsługę. W przeciwnym razie pełne wysłanie nadal będzie działać.
Szybkie sprawdzenie
Dlaczego należy przeprowadzać walidację po stronie serwera?
Podsumowanie
Buduj formularze działające bez JS, a następnie ulepszaj je za pomocą use:enhance. Zawsze przeprowadzaj walidację po stronie serwera.
Często zadawane pytania
Czy lekcja „Progresywne ulepszanie formularzy” jest bezpłatna?
Tak — pełny tekst „Progresywne ulepszanie formularzy” 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 Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Progresywne ulepszanie formularzy”?
Projektuj formularze działające bez JavaScriptu i płynnie zyskujące dodatkowe możliwości po jego włączeniu. Ćwiczysz Sveltejs 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ąć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs 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 3 z 4.
Ile czasu zajmuje lekcja „Progresywne ulepszanie formularzy”?
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 Sveltejs Academy?
Tak. Każda lekcja Sveltejs 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
- +page.server.js z actions
- Dyrektywa use:enhance
- Progresywne ulepszanie formularzy
- Obsługa błędów walidacji w actions