JavaScript

Odpowiadanie na wydarzenia w formularzu

JavaScriptu możesz używać, aby odpowiadać na interakcje użytkowników w formularzu, odkrywać dodatkowe pola formularza, przesyłać go itd.

Pomaganie użytkownikom w wypełnianiu dodatkowych opcji formularza

Wyobraź sobie, że masz formularz ankiety. Gdy użytkownik wybierze 1 opcję, musisz wyświetlić dodatkowe <input>, aby zadać konkretne pytanie związane z wybraną opcją. Co zrobić, żeby wyświetlać tylko odpowiedni element <input>?

Za pomocą JavaScriptu możesz ujawniać element <input> tylko wtedy, gdy powiązany jest element <input type="radio">.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

Spójrzmy na kod JavaScript wersji demonstracyjnej. Czy znasz atrybuty aria-controls i aria-expanded? Korzystaj z tych atrybutów ARIA, aby ułatwić użytkownikom czytników ekranu zrozumienie, kiedy wyświetla się lub jest ukryty dodatkowy element sterujący.

Sprawdzanie, czy użytkownicy mogą przesłać formularz bez opuszczania strony

Wyobraź sobie, że masz formularz komentarzy. Gdy czytelnik doda komentarz i prześle formularz, powinien od razu zobaczyć komentarz bez odświeżania strony.

Aby to zrobić, nasłuchuj zdarzenia onsubmit, a następnie użyj funkcji event.preventDefault(), aby wyłączyć domyślne zachowanie, i wyślij FormData za pomocą interfejsuFetch API.

Obsługa przeglądarek

  • 42
  • 14
  • 39
  • 10.1

Źródło

Skrypt backendu może sprawdzić, czy żądanie POST wydaje się pochodzić z przeglądarki (za pomocą atrybutu action elementu formularza, gdzie method="post") czy z JavaScriptu, np. z żądania fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

Zawsze powiadamiaj użytkowników czytników ekranu o dynamicznych zmianach treści. Dodaj do kodu HTML element z atrybutem aria-live="polite", a po zmianie zaktualizuj jego zawartość. Możesz na przykład zmienić treść komentarza na „Twój komentarz został pomyślnie opublikowany” po tym, jak użytkownik prześle komentarz.

Dowiedz się więcej o aktywnych regionach ARIA.

Weryfikacja za pomocą JavaScriptu

Dopilnuj, aby komunikaty o błędach były zgodne ze stylem i charakterem Twojej witryny

Nazwy domyślnych komunikatów o błędach różnią się w zależności od przeglądarki. Co pozwoli Ci dopilnować, aby ten sam komunikat był wyświetlany wszystkim użytkownikom i by był dopasowany do stylu i stylu Twojej witryny? Użyj metody setCustomValidity() interfejsu Constraint Validation API, aby zdefiniować własne komunikaty o błędach.

Zadbaj o to, aby użytkownicy byli powiadamiani o błędach w czasie rzeczywistym

Wbudowane funkcje HTML służące do weryfikacji formularza doskonale nadają się do powiadamiania użytkowników o nieprawidłowych polach formularza przed przesłaniem danych do backendu. Czy nie byłoby wspaniale powiadamiać użytkowników, gdy tylko opuszczą pole formularza?

Wykrywaj zdarzenie blur, które uruchamia się, gdy element przestaje być aktywny, i korzystaj z interfejsu ValidityState, aby wykrywać nieprawidłowe ustawienie formularza.

Zadbaj o to, aby użytkownicy widzieli wpisane przez siebie hasło

Tekst wpisany w polu <input type="password"> jest domyślnie ukryty ze względu na ochronę prywatności użytkowników. Pomóż użytkownikom wpisywać hasło, wyświetlając <button>, aby przełączać widoczność wpisanego tekstu.

Wypróbuj wersję demonstracyjną Przełącza widoczność wpisanego tekstu za pomocą opcji Pokaż hasło <button>. Jak to działa? Kliknięcie Pokaż hasło zmieni atrybut type pola hasła z type="password" na type="text", a tekst <button> zmieni się na „Ukryj hasło”.

Ważne jest, aby przycisk Pokaż hasło był dostępny. Połącz <button> z <input type="password"> za pomocą atrybutu aria-controls.

Aby powiadamiać użytkowników czytnika ekranu o tym, że hasło jest aktualnie wyświetlane lub ukryte, użyj ukrytego elementu aria-live="polite" i odpowiednio zmień jego tekst. Ważne jest, aby użytkownicy czytników ekranu wiedzieli, kiedy wyświetla się hasło i kiedy ktoś patrzy na ich ekran.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

Dowiedz się więcej o wdrażaniu opcji wyświetlania hasła.

Zasoby