JavaScript

Rispondere agli eventi del modulo

Puoi utilizzare JavaScript per rispondere alle interazioni degli utenti sul modulo, visualizzare altri campi del modulo, inviare un modulo e molto altro.

Aiuta gli utenti a compilare ulteriori controlli dei moduli

Immagina di aver creato un modulo di sondaggio. Dopo che l'utente seleziona un'opzione, vuoi mostrare altri <input> per porre una domanda specifica relativa alla selezione. Come puoi mostrare solo l'elemento <input> pertinente?

Puoi usare JavaScript per mostrare un <input> solo quando è attualmente selezionato il <input type="radio"> associato.

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

Diamo un'occhiata Codice JavaScript per la demo. Hai notato gli attributi aria-controls e aria-expanded? Utilizza questi Attributi ARIA per aiutare gli utenti di screen reader a capire quando un controllo del modulo aggiuntivo viene mostrato o nascosto.

Assicurati che gli utenti possano inviare un modulo senza uscire da una pagina

Immagina di avere un modulo di commento. Quando un lettore aggiunge un commento e invia il modulo, sarebbe ideale se potesse vedere immediatamente il commento senza aggiornare la pagina.

A questo scopo, ascolta l'evento onsubmit, quindi usa event.preventDefault() per evitare il comportamento predefinito. e invia FormData utilizzando l'API Fetch.

Lo script di backend può verificare se una richiesta POST sembra provenire dal browser (utilizzando l'attributo action di un elemento del modulo, dove method="post") o da JavaScript, come una richiesta fetch().

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

Comunica sempre agli utenti di screen reader le modifiche ai contenuti dinamici. Aggiungi un elemento con l'attributo aria-live="polite" al codice HTML. e aggiorna i contenuti dell'elemento dopo una modifica. Ad esempio, aggiorna il testo in "Il tuo commento è stato pubblicato" dopo che un utente ha inviato un commento.

Scopri di più sulle regioni live ARA.

Convalida con JavaScript

Assicurati che i messaggi di errore siano in linea con lo stile e il tono del tuo sito

Il testo dei messaggi di errore predefiniti varia a seconda del browser. Come puoi assicurarti che lo stesso messaggio venga mostrato a tutti gli utenti e che il messaggio sia in linea con lo stile e il tono del tuo sito? Utilizza la setCustomValidity() dell'API Constraint Validation per definire i tuoi messaggi di errore.

Assicurati che gli utenti ricevano notifiche sugli errori in tempo reale

Le funzionalità HTML integrate per la convalida del modulo sono ideali per informare gli utenti sui campi del modulo non validi prima che i dati vengano inviati al backend. Non sarebbe fantastico informare gli utenti non appena lasciano il campo del modulo?

Tieni d'occhio l'evento blur che si attiva quando un elemento perde lo stato attivo e utilizza l'evento Interfaccia ValidityState per rilevare se un controllo del modulo non è valido.

Assicurati che gli utenti possano vedere la password inserita

Il testo inserito per <input type="password"> è oscurato per impostazione predefinita, rispettare la privacy degli utenti. Aiuta gli utenti a inserire la password mostrando un <button> per attivare/disattivare la visibilità del testo inserito.

Prova la demo. Attiva/disattiva visibilità del testo inserito, utilizzando il pulsante Mostra password <button>. Come funziona? Fai clic su Mostra password. cambia l'attributo type del campo password da type="password" a type="text", e il testo <button> diventa "Nascondi password".

È importante rendere accessibile il pulsante Mostra password. Collega <button> a <input type="password"> utilizzando l'attributo aria-controls.

Per informare gli utenti di screen reader se la password viene attualmente visualizzata o nascosta: utilizza un elemento nascosto con aria-live="polite" e modifica il relativo testo di conseguenza. È importante consentire agli utenti di screen reader di sapere quando una password viene visualizzata e visibile a qualcun altro che guarda il loro schermo.

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

Scopri di più sull'implementazione di un'opzione di visualizzazione della password.

Risorse

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