JavaScript

Odpowiadanie na zdarzenia związane z formularzem

Możesz używać JavaScriptu, aby m.in. odpowiadać na interakcje użytkowników w formularzu, odkrywać dodatkowe pola formularza i przesyłać formularz.

Pomóż użytkownikom w wypełnieniu dodatkowych opcji formularza

Załóżmy, że masz formularz ankiety. Gdy użytkownik wybierze jedną opcję, chcesz wyświetlić dodatkowe <input>, aby zadać konkretne pytanie związane z zaznaczonymi elementami. Jak możesz wyświetlać tylko odpowiedni element <input>?

Aby wyświetlić pole <input>, możesz użyć JavaScriptu tylko wtedy, gdy jest zaznaczone powiązane pole <input type="radio">.

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

Spójrzmy na Kod JavaScript demonstracyjny. Czy widzisz atrybuty aria-controls i aria-expanded? Użyj tych Atrybuty ARIA , aby ułatwić użytkownikom czytników ekranu zrozumienie, kiedy wyświetlany jest lub ukrywany jest dodatkowy element sterujący.

Zapewnianie użytkownikom możliwości przesłania formularza bez opuszczania strony

Wyobraź sobie, że masz formularz komentarza. Gdy czytelnik doda komentarz i prześle formularz, byłoby świetnie, gdyby mogli od razu zobaczyć komentarz bez odświeżania strony.

Aby to osiągnąć, nasłuchuj zdarzenia onsubmit, a potem użyj metody event.preventDefault(), aby zapobiec działaniu domyślnemu: i wyślij FormData za pomocą interfejsu Download API.

Skrypt backendu może sprawdzić, czy żądanie POST wygląda na pochodzące z przeglądarki (za pomocą atrybutu action elementu formularza, gdzie method="post") lub z kodu JavaScript, na przykład 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 zawartości. Dodaj do kodu HTML element z atrybutem aria-live="polite", i aktualizuje zawartość elementu po wprowadzeniu zmiany. Możesz na przykład zaktualizować tekst „Twój komentarz został opublikowany” po przesłaniu komentarza przez użytkownika.

Dowiedz się więcej o regionach aktywnych ARIA.

Walidacja za pomocą JavaScriptu

Sprawdź, czy komunikaty o błędach są zgodne ze stylem i tonem Twojej witryny

Sformułowanie domyślnych komunikatów o błędach jest różne w różnych przeglądarkach. Co zrobić, aby ta sama wiadomość wyświetlała się wszystkim użytkownikom? a przekaz jest dopasowany do stylu i tonu treści Twojej witryny. Korzystanie z setCustomValidity() metoda Constraint Validation API definiowania własnych komunikatów o błędach.

Informuj użytkowników o błędach w czasie rzeczywistym

Wbudowane funkcje HTML weryfikacji formularzy doskonale nadają się do powiadamiania użytkowników. o nieprawidłowych polach formularza. Czy nie byłoby wspaniale powiadamiać użytkowników zaraz po tym, gdy opuszczą pole formularza?

Posłuchaj: blur które jest uruchamiane, gdy element straci ważność, i użyj parametru interfejsu ValidityState, aby wykryć, czy element sterujący formularza jest nieprawidłowy.

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

Tekst wpisany w polu <input type="password"> jest domyślnie zasłonięty, poszanowania prywatności użytkowników. Pomóż użytkownikom wpisać hasło, pokazując przycisk <button>, który włącza i wyłącza widoczność wpisanego tekstu.

Wypróbuj wersję demonstracyjną. Przełącz widoczność wpisanego tekstu za pomocą opcji Pokaż hasło <button>. Jak to działa? Kliknij Pokaż hasło. zmienia 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 powiadomić użytkowników czytników ekranu o tym, że hasło jest obecnie widoczne lub ukryte: użyj ukrytego elementu z atrybutem aria-live="polite" i odpowiednio zmień jego tekst. Ważne jest, aby użytkownicy czytników ekranu wiedzieli, kiedy hasło wyświetla się innym osobom, a osoby patrzące na ekran.

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

Dowiedz się więcej o implementowaniu opcji pokazywania hasła.

Zasoby

• FormData
• Constraint Validation API
• <input type="password">