La maggior parte dei siti e delle applicazioni include un modulo web. I siti di scherzi, come DoWebsites<form>.
L'elemento <form> HTML identifica un punto di riferimento del documento contenente controlli interattivi per l'invio di informazioni. Nidificati in <form>, troverai tutti i controlli dei moduli interattivi (e non) che compongono il modulo.
L'HTML è potente. Questa sezione illustra le potenzialità dell'HTML e spiega cosa può fare il codice HTML senza aggiungere JavaScript. L'utilizzo dei dati dei moduli lato client per aggiornare in qualche modo l'interfaccia utente prevede in genere l'utilizzo di CSS o JavaScript, di cui non parleremo qui. C'è un intero corso Impara su Moduli. Non duplicheremo questa sezione qui, ma presenteremo diversi controlli del modulo e gli attributi HTML che li supportano.
Con i moduli, puoi consentire agli utenti di interagire con il tuo sito web o la tua applicazione, convalidare le informazioni inserite e inviare i dati a un server. Gli attributi HTML consentono all'utente di selezionare i controlli del modulo o di inserire un valore. Gli attributi HTML possono definire criteri specifici a cui il valore deve corrispondere per essere valido. Quando l'utente tenta di inviare il modulo, tutti i valori di controllo del modulo passano per la convalida dei vincoli lato client e possono impedirne l'invio finché i dati non soddisfano i criteri richiesti, il tutto senza JavaScript. Puoi anche disattivare questa funzionalità: l'impostazione dell'attributo novalidate su <form> o, più spesso, formnovalidate su un pulsante, il salvataggio dei dati del modulo per il completamento successivo, impedisce la convalida.
Invio di moduli
I moduli vengono inviati quando l'utente attiva un pulsante di invio nidificato all'interno del modulo. Quando utilizzi <input> per i pulsanti, "value" è l'etichetta del pulsante e viene visualizzato nel pulsante. Quando utilizzi <button>, l'etichetta è il testo tra i tag <button> di apertura e chiusura. Un pulsante di invio può essere scritto in due modi:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Per un modulo molto semplice, è necessario un elemento <form>, che contenga alcuni input del modulo e un pulsante di invio. Tuttavia, l'invio di un modulo è molto di più.
Gli attributi dell'elemento <form> impostano il metodo HTTP con cui viene inviato il modulo e l'URL che elabora l'invio del modulo. Sì, i moduli possono essere inviati ed elaborati
e una nuova pagina può essere caricata senza JavaScript. L'elemento <form> è così potente.
I valori degli attributi action e method dell'elemento <form> definiscono rispettivamente l'URL che elabora i dati del modulo e il metodo HTTP utilizzato per inviare i dati.
Per impostazione predefinita, i dati del modulo vengono inviati alla pagina corrente. In caso contrario, imposta l'attributo action sull'URL a cui devono essere inviati i dati.
I dati inviati sono costituiti da coppie nome/valore dei vari controlli del modulo del modulo. Per impostazione predefinita, sono inclusi tutti i controlli
del modulo nidificati all'interno del modulo che hanno un name. Tuttavia, con l'attributo form, è possibile includere controlli del modulo
all'esterno di <form> e omettere i controlli del modulo nidificati all'interno di <form>. Supportato sui controlli del modulo e su <fieldset>, l'attributo form assume come valore id nel formato del controllo a cui è associato, non necessariamente nella forma in cui è nidificato. Ciò significa che i controlli del modulo non devono essere fisicamente nidificati in un <form>.
L'attributo method definisce il protocollo HTTP della richiesta: in genere GET o POST. Con GET, i dati del modulo vengono inviati come
stringa di parametri di coppie name=value, aggiunta all'URL di action.
Con POST, i dati vengono aggiunti al corpo della richiesta HTTP. Quando invii dati protetti, come password e dati delle carte di credito, usa sempre POST.
Esiste anche un metodo DIALOG. Se un elemento <form method="dialog"> si trova all'interno di un elemento <dialog>, l'invio del modulo chiude la finestra di dialogo; si verifica un evento di invio anche se i dati non vengono né cancellati né inviati. Anche in questo caso, senza JavaScript. Questo argomento viene discusso nella sezione relativa alle finestre di dialogo. Tieni presente che, dal momento che il modulo non viene inviato, è consigliabile
includere sia formmethod="dialog" sia formnovalidate nel pulsante Invia.
I pulsanti del modulo possono avere più attributi rispetto a quelli descritti all'inizio di questa sezione. Se il pulsante include un attributo formaction, formenctype, formmethod, formnovalidate o formtarget, i valori impostati sul pulsante che attiva l'invio del modulo hanno la precedenza sui valori action, enctype, method e target impostati su <form>. La convalida del vincolo avviene prima dell'invio del modulo, ma solo se non è presente formnovalidate nel pulsante di invio attivato né novalidate in <form>.
Per acquisire il pulsante utilizzato per inviare un modulo, assegna
un name al pulsante. I pulsanti senza nome o valore non vengono inviati con i dati del modulo al momento dell'invio.
Dopo l'invio del modulo
Quando l'utente invia un modulo online completo, vengono inviati i nomi e i valori dei controlli del modulo pertinenti. Il nome è il valore dell'attributo name. I valori provengono dai contenuti dell'attributo value o dal valore inserito o scelto dall'utente. Il valore di <textarea> è il suo testo interno.
Il valore di <select> è il value di <option> selezionato oppure, se <option> non include un attributo value, il valore è il testo interno dell'opzione selezionata.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
Selezionare "Hoover Sukhdeep" (o non fare nulla, perché il browser viene visualizzato e quindi seleziona il primo valore di opzione per impostazione predefinita) e fare clic sul pulsante Invia per ricaricare la pagina e impostare l'URL su:
https://web.dev/learn/html/forms?student=hoover
Poiché la seconda opzione non ha un attributo value, il testo interno viene inviato come valore. Seleziona "Blendan Blend" e fai clic sul pulsante Invia per ricaricare la pagina e impostare l'URL su:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Quando viene inviato un modulo, le informazioni inviate includono i nomi e i valori di tutti i controlli del modulo denominati che hanno un name, ad eccezione delle caselle di controllo non selezionate, dei pulsanti di opzione non selezionati e i nomi e i valori di tutti i pulsanti diversi da quello che ha inviato il modulo. Per tutti gli altri controlli modulo, se il controllo modulo ha un nome, ma non è stato inserito alcun valore né è stato impostato come predefinito, il valore name del controllo modulo viene inviato con un valore vuoto.
Esistono 22 tipi di input, quindi non possiamo includerli tutti.
Tieni presente che l'inserimento di un valore è facoltativo e spesso non è una buona idea, se desideri che l'utente inserisca informazioni.
Per gli elementi <input> in cui l'utente non può modificare il valore, devi sempre includere un valore, anche per gli elementi di input di tipo hidden, radio, checkbox, submit, button e reset.
L'utilizzo di name univoci per i controlli del modulo semplifica l'elaborazione dei dati lato server ed è consigliato, con caselle di controllo e pulsanti di opzione come eccezioni a questa regola.
Pulsanti di opzione
Se hai notato che, quando selezioni un pulsante di opzione all'interno di un gruppo di pulsanti, è possibile selezionarne solo uno alla volta, questo è dovuto all'attributo name. Questo effetto che può essere selezionato viene creato assegnando lo stesso valore name a ogni pulsante di opzione di un gruppo.
Un name deve essere univoco per il gruppo: se per errore utilizzi lo stesso name per due gruppi separati, la selezione di un pulsante di opzione nel secondo gruppo deseleziona tutte le selezioni effettuate nel primo gruppo con lo stesso name.
I name e i value del pulsante di opzione selezionato vengono inviati con il modulo. Assicurati che ogni pulsante di opzione abbia
un elemento value pertinente (e solitamente unico). I valori dei pulsanti di opzione non selezionati non vengono inviati.
In una pagina puoi avere tutti i gruppi di pulsanti di opzione che preferisci e ciascuno di essi lavora in modo indipendente, purché ogni gruppo abbia un elemento name univoco per il gruppo.
Se vuoi caricare la pagina in cui è selezionato uno dei pulsanti di opzione di un gruppo con lo stesso nome, includi l'attributo checked.
Questo pulsante di opzione corrisponderà alla pseudo-classe CSS :default, anche se l'utente seleziona un'opzione di opzione diversa. Il pulsante di opzione attualmente selezionato corrisponde alla pseudo-classe :checked.
Se l'utente deve scegliere un controllo di opzione da un gruppo di pulsanti di opzione, aggiungi l'attributo required ad almeno uno
dei controlli. Se includi required in un pulsante di opzione di un gruppo, una selezione è obbligatoria per l'invio del modulo, ma non è necessario che l'attributo venga selezionato per essere valido. Inoltre, indica chiaramente nel <legend> che il controllo modulo è obbligatorio. L'etichettatura di gruppi di pulsanti di opzione insieme a ogni singolo pulsante viene descritta
più avanti.
Caselle di controllo
Tutte le caselle di controllo di un gruppo possono avere lo stesso name. Solo le caselle di controllo selezionate hanno name e value
con il modulo. Se sono state selezionate più caselle di controllo con lo stesso nome, lo stesso nome verrà inviato con valori diversi (si spera) Se hai più controlli del modulo con lo stesso nome, anche se non sono tutte caselle di controllo, verranno inviati tutti separati dalla e commerciale.
Se non includi un value in una casella di controllo, il valore predefinito delle caselle di controllo selezionate sarà on, il che probabilmente non è utile. Se hai tre caselle di controllo denominate chk e sono tutte selezionate, l'invio del modulo non sarà comprensibile:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Per rendere obbligatoria una casella di controllo, aggiungi l'attributo required. Informa sempre l'utente quando è necessario selezionare una casella di controllo o quando è necessario un controllo di un modulo. L'aggiunta di required a una casella di controllo rende solo la casella di controllo obbligatoria; non influisce sulle altre
caselle di controllo con lo stesso nome.
Etichette e set di campi
Per permettere agli utenti di sapere come compilare un modulo, quest'ultimo deve essere accessibile. Ogni controllo modulo deve avere un'etichetta.
Vuoi anche etichettare gruppi di controlli del modulo. Mentre singole aree di testo, selezione e input sono etichettate con <label>,
i gruppi di controlli del modulo vengono etichettati in base ai contenuti dell'elemento <legend>
dell'<fieldset> che li raggruppa.
Negli esempi precedenti, potresti aver notato che ogni controllo del modulo, ad eccezione del pulsante di invio, aveva un <label>. Le etichette forniscono controlli dei moduli con nomi accessibili. I pulsanti ottengono il nome accessibile dai contenuti o dal valore. Tutti gli altri
controlli modulo richiedono un <label> associato. Se non è associata alcuna etichetta, il browser continuerà a visualizzare i controlli del modulo,
ma gli utenti non vedranno le informazioni previste.
Per associare esplicitamente un controllo modulo a un <label>, includi l'attributo for in <label>: il valore è il id del controllo modulo a cui è associato.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
L'associazione delle etichette ai controlli dei moduli presenta diversi vantaggi. Le etichette rendono i controlli dei moduli accessibili agli utenti di screen reader fornendo il controllo con un nome accessibile. Le etichette sono anche "aree interessate" e rendono il sito più utilizzabile dagli utenti con problemi di mobilità, aumentando l'area. Se utilizzi un mouse, prova a fare clic in un punto qualsiasi dell'etichetta "Il tuo nome". In questo modo l'input si concentra.
Per fornire etichette implicite, includi il controllo modulo tra i tag <label> di apertura e chiusura. Questo è accessibile in egual modo sia dal punto di vista dello screen reader che del dispositivo di puntamento, ma non fornisce un hook di stile come l'etichetta esplicita.
<label>Your name
<input type="text" name="name">
</label>
Poiché le etichette sono "aree hit", non includere elementi interattivi all'interno di un'etichetta esplicita o qualsiasi altro componente interattivo diverso dal controllo modulo etichettato in un'etichetta implicita. Ad esempio, se includi un link in un'etichetta e il browser visualizzerà il codice HTML, gli utenti saranno confusi se fanno clic sull'etichetta per inserire un controllo modulo, ma vengono reindirizzati a una nuova pagina.
In genere, <label> precede il controllo modulo, tranne nei casi di pulsanti di opzione e caselle di controllo. Non è obbligatorio.
Si tratta solo dello schema UX comune. La serie Impara moduli contiene informazioni sulla progettazione di moduli.
Per gruppi di pulsanti di opzione e caselle di controllo, l'etichetta fornisce il nome accessibile per il controllo del modulo a cui è associata;
ma anche il gruppo di controlli e le relative etichette richiedono un'etichetta. Per etichettare il gruppo, raggruppa tutti gli elementi in un
<fieldset>, in cui l'etichetta del gruppo è <legend>.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
In questo esempio, i valori impliciti <label> etichettano un pulsante di opzione, mentre <legend> fornisce l'etichetta per il gruppo di pulsanti di opzione.
Nidificare un <fieldset> all'interno di un altro <fieldset> è una pratica standard. Ad esempio, se un modulo è un sondaggio con molte domande suddivise in gruppi di domande correlate, lo "studente preferito" <fieldset> potrebbe essere nidificato in un altro <fieldset> con l'etichetta "I tuoi preferiti":
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
L'aspetto predefinito di questi elementi ne ha causato uno scarso utilizzo, ma <legend> e <fieldset> possono essere definiti con CSS.
Oltre a tutti gli attributi globali, <fieldset> supporta anche gli attributi name, disabled e form.
Quando disabiliti un set di campi, tutti i controlli dei moduli nidificati vengono disattivati. Né gli attributi name né form sono molto utilizzati
in <fieldset>. name può essere utilizzato per accedere al set di campi con JavaScript, ma il set di campi stesso non è incluso nei dati inviati (sono inclusi i controlli del modulo denominato nidificati all'interno).
Tipi di immissione e tastiera dinamica
Come indicato in precedenza, esistono 22 tipi diversi di input.
In alcuni casi, quando un utente utilizza un dispositivo con una tastiera dinamica che viene visualizzata soltanto se necessario, ad esempio un telefono, il tipo di input utilizzato determina il tipo di tastiera visualizzato. La tastiera predefinita mostrata può essere ottimizzata per il tipo di input richiesto.
Ad esempio, se digiti tel viene visualizzato un tastierino ottimizzato per l'inserimento di numeri di telefono; email include @ e .; la tastiera dinamica per url include i due punti e il simbolo della barra. Sfortunatamente, l'iPhone non include ancora : nella
tastiera dinamica predefinita per i tipi di immissione url.
Tastiere per <input type="tel"> su iPhone e due telefoni Android diversi:
Tastiere per <input type="email"> su iPhone e due telefoni Android diversi:
Accesso a microfono e fotocamera
Il tipo di input di file <input type="file"> consente di caricare file tramite i moduli. I file possono essere di qualsiasi tipo, definiti e limitati
dall'attributo accept. L'elenco dei tipi di file accettati può essere un elenco separato da virgole di estensioni file, un tipo globale o una combinazione di tipi ed estensioni globali. Ad esempio, accept="video/*, .gif" accetta tutti i file video o le GIF animate.
Usa "audio/*" per i file audio, "video/*" per i file video e "image/*" per i file immagine.
L'attributo enumerato capture, definito nelle
specifiche di acquisizione dei contenuti multimediali, può essere utilizzato se deve essere creato un nuovo file multimediale
utilizzando la fotocamera o il microfono dell'utente. Puoi impostare il valore su user per i dispositivi di input rivolti agli utenti
o su environment per la fotocamera posteriore o il microfono del telefono. In genere, l'utilizzo di capture, senza un valore, funziona perché l'utente
sceglierà il dispositivo di input che vuole utilizzare.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Convalida integrata
Anche in questo caso, senza includere codice JavaScript, il codice HTML può impedire l'invio di moduli con valori non validi.
Esistono alcuni selettori CSS che corrispondono ai controlli del modulo in base alla presenza di attributi HTML tra cui :required
e :optional se il valore booleano required
è impostato o meno; :default se checked
è impostato come hardcoded e :enabled o :disabled,
2 a seconda che l'elemento sia interattivo}2.disabled La pseudoclasse :read-write abbina gli elementi con i controlli impostati e
del modulo contenteditable che sono modificabili per impostazione predefinita, come i tipi di input number, password e text (ma non le caselle di controllo,
i pulsanti di opzione o il tipo hidden, tra gli altri). Se per un elemento normalmente accessibile in scrittura è impostato l'attributo readonly, corrisponderà invece a :read-only.
Quando l'utente inserisce le informazioni nei controlli del modulo, i selettori dell'interfaccia utente CSS, tra cui :valid,
:invalid, :in-range e
:out-of-range, verranno attivati e disattivati a seconda dello stato. Quando l'utente esce da un controllo modulo, corrisponderà alla pseudo-classe :user-invalid o :user-valid non ancora completamente supportata.
Puoi utilizzare il CSS per capire se i controlli del modulo sono necessari e validi durante l'interazione dell'utente con il modulo. Puoi anche utilizzare il CSS per impedire agli utenti di fare clic sul pulsante Invia fino a quando il modulo non è valido:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Questo snippet CSS è un anti-pattern. Sebbene la tua UI possa sembrare intuitiva e chiara, molti utenti tentano di inviare un modulo per attivare i messaggi di errore. Fare in modo che un pulsante di invio appaia disabilitato in questo modo non consente la convalida dei vincoli, una funzionalità su cui molti utenti fanno affidamento.
Il CSS applicato viene aggiornato continuamente in base allo stato attuale dell'interfaccia utente. Ad esempio, quando includi tipi di input con vincoli, come email, number, url e tipi di data, se il valore è diverso da null (non vuoto) e il valore corrente non è un indirizzo email, numero, URL, data o ora valido, verrà creata una corrispondenza con la pseudo-classe CSS :invalid. Questo aggiornamento costante è diverso dalla convalida integrata di vincoli HTML, che si verifica solo quando l'utente tenta di inviare il modulo.
La convalida di vincoli integrata è pertinente solo per i vincoli impostati con attributi HTML. Sebbene sia possibile definire uno stile per un elemento in base alle pseudoclassi :required e :valid/:invalid, il browser ha fornito messaggi di errore generati da errori basati sugli attributi required, pattern, min, max e persino type.
Quando tentiamo di inviare il modulo senza scegliere lo studente preferito richiesto, la convalida dei vincoli impedisce l'invio del modulo a causa di un errore validityState.valueMissing.
Se una delle proprietà validityState restituisce true, l'invio viene bloccato e il browser visualizza un messaggio di errore nel primo controllo del modulo errato, mettendo in evidenza lo stato attivo. Quando l'utente attiva l'invio di un modulo e vengono rilevati valori non validi, il primo controllo modulo non valido mostra un messaggio di errore e viene impostato lo stato attivo. Se per un controllo obbligatorio non è impostato alcun valore, se un valore numerico è fuori intervallo o se un valore non è del tipo richiesto dall'attributo type, il modulo non verrà convalidato, non verrà inviato e viene visualizzato un messaggio di errore.
Se il valore di number, data o ora è inferiore al minimo di min impostato o superiore al valore massimo di max impostato, il controllo verrà impostato su :out-of-range (e :invalid) e l'utente verrà informato dell'errore valididityState.rangeUnderflow validityState.rangeOverflow quando tenterà di inviare il modulo. Se il valore non è conforme al valore step, sia impostato esplicitamente o sia come valore predefinito su 1, il controllo sarà :out-of-range (e :invalid) e verrà visualizzato un errore validityState.stepMismatch. L'errore viene visualizzato sotto forma di fumetto e per impostazione predefinita fornisce informazioni utili su come correggerlo.
Esistono attributi simili per la lunghezza dei valori: gli attributi minlength
e maxlength avvisano l'utente di un errore
con validityState.tooLong o
validityState.tooShort al momento dell'invio.
Inoltre, maxlength impedisce all'utente di inserire troppi caratteri.
L'utilizzo dell'attributo maxlength può causare un'esperienza utente scadente. In genere, è l'esperienza migliore per consentire all'utente di inserire un numero di caratteri superiore a quello consentito fornendo un contatore, facoltativamente sotto forma di elemento <output>, che non viene inviato con il modulo, il che consente all'utente di modificare il testo finché l'output non mostra che la lunghezza massima consentita non è stata superata. maxlength
può essere incluso nel codice HTML; come tutto ciò che abbiamo illustrato, funziona senza JavaScript. Poi, al caricamento, il valore dell'attributo maxlength può essere usato per creare questo contatore di caratteri in JavaScript.
Alcuni tipi di input sembrano avere vincoli predefiniti, ma non sono così. Ad esempio, il tipo di immissione tel fornisce un tastierino numerico sui dispositivi con tastiere dinamiche, ma non vincola i valori validi. Per questo e per altri tipi di input
c'è l'attributo pattern. Puoi specificare un'espressione regolare che il valore deve corrispondere per essere considerato valido.
Se un valore è la stringa vuota e il valore non è obbligatorio, non verrà generato un errore validityState.patternMismatch. Se il campo è obbligatorio e vuoto, verrà mostrato all'utente il messaggio di errore predefinito per validityState.valueMissing anziché
patternMismatch.
Per le email, validityState.typeMismatch probabilmente
è troppo tollerante per le tue esigenze. Ti consigliamo di includere l'attributo pattern in modo che gli indirizzi email Intranet senza un TLD non vengano accettati come validi.
L'attributo pattern consente di fornire un'espressione regolare che il valore deve corrispondere. Quando richiedi una corrispondenza di schema,
assicurati che all'utente sia chiaro cosa ci si aspetta.
Tutto questo può essere fatto senza una sola riga di JavaScript, ma essendo un'API HTML, puoi utilizzare JavaScript per includere messaggi personalizzati durante la convalida dei vincoli. Puoi anche utilizzare JavaScript per aggiornare il numero di caratteri rimasti, mostrare una barra di avanzamento per migliorare la sicurezza della password o altri modi per migliorare dinamicamente il completamento.
Esempio
Questo esempio ha un modulo all'interno di un elemento <dialog> con un elemento <form> nidificato con tre controlli modulo e due pulsanti di invio, con
etichette chiare e istruzioni.
Il primo pulsante di invio chiude la finestra di dialogo. Utilizza formmethod="dialog" per eseguire l'override del metodo predefinito del modulo e chiudi <dialog> senza inviare i dati o cancellarli. Devi anche includere formnovalidate, altrimenti il browser proverà a convalidare il valore di tutti i campi obbligatori. L'utente potrebbe voler chiudere la finestra di dialogo e il modulo senza
inserire alcun dato, ma la convalida impedisce questo problema. Includi aria-label="close" perché "X" è un segnale visivo noto, ma non è un'etichetta descrittiva.
Tutti i controlli del modulo hanno etichette implicite, quindi non è necessario includere gli attributi id o for. Entrambi gli elementi di input
hanno l'attributo obbligatorio che li rende obbligatori. L'input del numero ha step impostato esplicitamente per dimostrare come viene incluso step. Poiché step è 1 per impostazione predefinita, questo attributo può essere omesso.
<select> ha un valore predefinito che rende superfluo l'attributo required. Anziché includere l'attributo value in ogni opzione, il valore predefinito è il testo interno.
Il pulsante Invia alla fine imposta il metodo dei moduli su POST. Facendo clic, viene verificata la validità di ciascun valore. Se tutti i valori sono validi, i dati del modulo verranno inviati, la finestra di dialogo verrà chiusa e la pagina potrebbe reindirizzare a thankyou.php, che è l'URL dell'azione. Se mancano valori o se il valore numerico presenta un passaggio non corrispondente o non rientra nell'intervallo, verrà visualizzato un messaggio di errore pertinente definito dal browser; il modulo non verrà inviato e la finestra di dialogo non verrà chiusa.
I messaggi di errore predefiniti possono essere personalizzati con il metodo validityState.setCustomValidity('message here'). Tieni presente che se imposti un messaggio personalizzato, il messaggio deve essere impostato esplicitamente sulla stringa vuota quando tutto è valido o il modulo non verrà inviato.
Altre considerazioni
C'è un'intera sezione dedicata ad aiutare gli utenti a inserire i dati corretti nei moduli. Per una buona esperienza utente, è importante impedire che commettano errori includendo istruzioni e fornendo suggerimenti, se necessario. Questa sezione illustra in che modo il solo HTML può fornire la convalida lato client, ma la convalida deve essere sia lato client sia lato server. La convalida può essere fornita in modi discreti durante la compilazione del modulo, ad esempio aggiungendo un segno di spunta quando il valore è corretto. Tuttavia, non fornire messaggi di errore prima che il controllo del modulo sia stato completato. Se l'utente commette un errore, informalo dove si trova l'errore e che cosa ha sbagliato.
Quando disegna i moduli, è importante tenere presente che non tutti sono come te. Un utente potrebbe avere una sola lettera come cognome (o nessun cognome), potrebbe non avere un codice postale, avere un indirizzo di tre righe o non avere un indirizzo. È possibile che l'utente visualizzi una versione tradotta del modulo.
I controlli del modulo, le relative etichette e i messaggi di errore devono essere visibili sullo schermo, precisi e significativi, determinabili in modo programmatico e associati in modo programmatico al gruppo o all'elemento del modulo appropriato. L'attributo autocomplete
può e deve essere utilizzato per consentire una compilazione più rapida del modulo e migliorare l'accessibilità.
Il linguaggio HTML fornisce tutti gli strumenti per rendere accessibili i controlli di base dei moduli. Più un elemento o un processo di un modulo è interattivo, maggiore è la necessità di prestare attenzione all'accessibilità per quanto riguarda la gestione dei focus, l'impostazione e l'aggiornamento di nomi, ruoli e valori ARIA, ove necessario, e gli annunci in tempo reale ARIA, se necessario. Ma, come abbiamo appreso qui, con il solo HTML, puoi fare molta strada per raggiungere il tuo obiettivo di accessibilità e validità senza ricorrere ad ARIA o JavaScript.
Verifica la tua comprensione
Verifica le tue conoscenze dei moduli.
Come fate a far parte dello stesso gruppo i pulsanti di opzione?
name.id.Quale elemento HTML viene utilizzato per indicare all'utente a cosa serve questo campo del modulo?
<h1><title><label>