odpowiadać na zdarzenia z formularza,
Za pomocą kodu JavaScript możesz reagować na interakcje użytkowników z formularzem, wyświetlać dodatkowe pola formularza, przesyłać formularze i robić wiele innych rzeczy.
Pomoc w wypełnianiu dodatkowych elementów sterowania formularzem
Wyobraź sobie, że tworzysz formularz ankiety. Gdy użytkownik wybierze jedną opcję, chcesz wyświetlić dodatkowy przycisk <input>
, aby zadać konkretne pytanie związane z tą opcją.
Jak możesz wyświetlić tylko odpowiedni element <input>
?
Za pomocą JavaScriptu możesz wyświetlić element <input>
tylko wtedy, gdy powiązany element <input type="radio">
jest zaznaczony.
if (event.target.checked) {
// show additional field
} else {
// hide additional field
}
Przyjrzyjmy się kodom JavaScriptu, które są używane w tym filmie.
Czy zauważyłeś/zauważyłaś atrybuty aria-controls
i aria-expanded
?
Użyj tych atrybutów ARIA, aby ułatwić użytkownikom czytników ekranu zrozumienie, kiedy dodatkowy element formularza jest widoczny lub ukryty.
Upewnij się, że użytkownicy mogą przesyłać formularze bez opuszczania strony
Wyobraź sobie, że masz formularz komentarzy. Gdy czytelnik doda komentarz i prześle formularz, najlepiej byłoby, gdyby mógł od razu zobaczyć komentarz bez odświeżania strony.
Aby to zrobić, nasłuchuj zdarzenie onsubmit
, a potem użyj parametru event.preventDefault()
, aby zapobiec domyślnemu działaniu, i wyślij parametr FormData
za pomocą interfejsu Fetch API.
Twój skrypt backendowy może sprawdzać, czy żądanie POST
pochodzi z przeglądarki (za pomocą atrybutu action
elementu formularza, gdzie method="post"
) lub z JavaScriptu, na przykład z żądania fetch()
.
if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
// return JSON
} else {
// return HTML
}
Zawsze informuj użytkowników czytników ekranu o zmianach zawartości dynamicznej.
Dodaj do kodu HTML element z atrybutem aria-live="polite"
i po wprowadzeniu zmian zaktualizuj zawartość tego elementu.
Po przesłaniu komentarza przez użytkownika możesz na przykład zaktualizować tekst na „Twój komentarz został opublikowany”.
Dowiedz się więcej o regionach transmisji na żywo ARIA.
Weryfikacja za pomocą JavaScriptu
Dopasuj komunikaty o błędach do stylu i tonu witryny
Treść domyślnych komunikatów o błędach różni się w zależności od przeglądarki.
Jak możesz mieć pewność, że ta sama wiadomość jest wyświetlana wszystkim użytkownikom i że jest zgodna z stylem i tonem Twojej witryny?
Aby zdefiniować własne komunikaty o błędach, użyj metody setCustomValidity()
interfejsu Constraint Validation API.
Zapewnij użytkownikom możliwość otrzymywania powiadomień o błędach w czasie rzeczywistym
Wbudowane funkcje HTML służące do sprawdzania poprawności formularzy są bardzo przydatne do powiadamiania użytkowników o nieprawidłowych polach formularza, zanim dane zostaną wysłane do backendu. Czy nie byłoby świetnie, gdyby użytkownicy byli powiadamiani, gdy tylko opuszczą pole formularza?
Nasłuchuj zdarzenia blur
, które jest wywoływane, gdy element traci fokus, i użyj interfejsu ValidityState
, aby wykryć, czy element formularza jest nieprawidłowy.
Upewnij się, że użytkownicy widzą hasło, które wpisali
Tekst wpisany w polu <input type="password">
jest domyślnie zaciemniony, aby chronić prywatność użytkowników.
Ułatwiaj użytkownikom wpisywanie hasła, wyświetlając przycisk <button>
, który pozwala przełączać widoczność wpisywanego 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 zmienia atrybut type
pola hasła z type="password"
na type="text"
, a tekst <button>
zmienia się na „Ukryj hasło”.
Ważne jest, aby umożliwić dostęp do przycisku Pokaż hasło.
Połącz element <button>
z elementem <input type="password">
za pomocą atrybutu aria-controls
.
Aby powiadomić użytkowników czytników ekranu, czy hasło jest obecnie widoczne czy ukryte, użyj ukrytego elementu z elementem aria-live="polite"
i odpowiednio zmień jego tekst.
Ważne jest, aby użytkownicy czytników ekranu wiedzieli, kiedy hasło jest wyświetlane i widoczne dla innych osób patrzących na ich ekran.
<span class="visually-hidden" aria-live="polite">
<!-- Dynamically change this text with JavaScript -->
</span>
Dowiedz się więcej o implementowaniu opcji wyświetlania hasła.