La maggior parte dei siti e delle applicazioni include un modulo web. siti barzellette, come DoWebsites<form>.
L'elemento HTML <form> identifica un punto di riferimento di un documento che contiene
controlli interattivi per inviare informazioni. Nidificati in un <form>, troverai tutte le funzionalità interattive (e non interattive)
i controlli del modulo che lo compongono.
Il codice HTML è potente. Questa sezione si concentra sulla potenza del codice HTML, illustrando ciò che il codice HTML può fare senza aggiungere JavaScript. L'utilizzo dei dati dei moduli lato client per aggiornare in qualche modo la UI in genere coinvolge CSS o JavaScript, di cui non si parlerà in questo articolo. C'è un intero corso Moduli di apprendimento. Questa sezione non verrà duplicata qui, ma introdurremo 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
a un server. Gli attributi HTML consentono di richiedere all'utente di selezionare i controlli del modulo o di inserire un valore. HTML
possono definire criteri specifici a cui il valore deve corrispondere per essere valido. Quando l'utente prova a inviare il modulo,
tutti i valori di controllo del modulo passano attraverso la convalida del vincolo lato client e possono impedire l'invio
finché i dati non soddisfano i criteri richiesti; il tutto senza JavaScript. Puoi anche disattivare questa funzionalità impostando la novalidate
in <form> o, più spesso, formnovalidate su un pulsante, salvando i 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, il valore
'value' è l'etichetta del pulsante e viene visualizzata sul pulsante. Quando utilizzi <button>, l'etichetta è il testo tra l'apertura
e la chiusura di <button> tag. 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> con alcuni input per il modulo e un pulsante di invio. Tuttavia, c'è
l'invio di un modulo.
Gli attributi dell'elemento <form> impostano il metodo HTTP tramite
cui il modulo viene inviato e l'URL che elabora l'invio del modulo. Sì, i moduli possono essere inviati, elaborati ed
è possibile caricare una nuova pagina senza JavaScript. L'elemento <form> è così potente.
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 di nome/valore dei vari controlli modulo del modulo. Per impostazione predefinita, sono inclusi tutti i campi
controlli nidificati all'interno del modulo che hanno un name. Tuttavia, con l'attributo form, è possibile includere controlli del modulo
all'esterno di <form> e di omettere i controlli del modulo nidificati all'interno di <form>. Funzionalità supportata per i controlli modulo e <fieldset>,
l'attributo form assume come valore il id del formato del controllo a cui è associato, non necessariamente la forma
è nidificato. Ciò significa che non è necessario nidificare fisicamente i controlli del modulo 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 name=value coppie, aggiunta all'URL di action.
Con POST, i dati vengono aggiunti al corpo della richiesta HTTP. Quando invii dati sicuri come password e carte di credito
informazioni, usa sempre POST.
Esiste anche un metodo DIALOG. Se <form method="dialog"> si trova all'interno di un <dialog>, l'invio del modulo chiuderà la finestra di dialogo;
c'è un evento di invio anche se i dati non sono stati né cancellati né inviati. Di nuovo, senza JavaScript. Questo argomento viene discusso in
la sezione della finestra di dialogo. Tieni presente che, poiché il modulo non viene inviato, probabilmente
includi sia formmethod="dialog" sia formnovalidate sul pulsante Invia.
I pulsanti del modulo possono avere più attributi rispetto a quelli descritti all'inizio di questa sezione. Se il pulsante include un formaction,
Attributo formenctype, formmethod, formnovalidate o formtarget, i valori impostati sul pulsante che attiva il modulo
l'invio ha la precedenza su action, enctype, method e target
impostato il <form>. La convalida del vincolo avviene prima dell'invio del modulo, ma solo se non c'è né una
formnovalidate sul pulsante di invio attivato o novalidate su <form>.
Per individuare il pulsante utilizzato per inviare un modulo,
il pulsante name. 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 compilato, vengono inviati anche 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 testo interno.
Il valore di <select> è il value di <option> selezionato o, se il <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>
Selezione di "Hoover Sukhdeep" (o non facendo nulla, perché il browser visualizza e quindi seleziona il primo valore dell'opzione per impostazione predefinita) e poi fai clic sul pulsante Invia, la pagina viene ricaricata, impostando 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. Selezione di "Miscuglio di frullati"
Se fai clic sul pulsante Invia, la pagina viene ricaricata, impostando 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 denominato che hanno un name
ad eccezione delle caselle di controllo non selezionate, dei pulsanti di opzione non selezionati e dei nomi e dei valori di pulsanti diversi da quello che
inviato il modulo. Per tutti gli altri controlli modulo, se hanno un nome, ma non è stato inserito alcun valore o è stato impostato come predefinito,
name del controllo del modulo viene inviato con un valore vuoto.
Esistono 22 tipi di input, pertanto non possiamo coprirli tutti.
Tieni presente che l'inserimento di un valore è facoltativo e spesso rappresenta una cattiva idea quando vuoi che l'utente inserisca delle informazioni.
Per gli elementi <input> in cui l'utente non può modificare il valore, devi sempre includere un valore, anche per l'input
di elementi con un tipo di 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 che rappresentano un'eccezione a questa regola.
Pulsanti di opzione
Se hai già notato che quando selezioni un pulsante di opzione in un gruppo di pulsanti, puoi selezionarne solo uno nella
una volta, ciò è dovuto all'attributo name. Questo effetto che è possibile selezionare solo uno viene creato assegnando a ciascun pulsante di opzione
in un gruppo uguale a name.
Un name deve essere univoco per il gruppo: se per errore usi lo stesso name per due gruppi separati, selezionando un pulsante di opzione
nel secondo gruppo deseleziona tutte le selezioni effettuate nel primo gruppo con lo stesso name.
name e value del pulsante di opzione selezionato vengono inviati con il modulo. Assicurati che ogni pulsante di opzione abbia
un valore value pertinente (e solitamente univoco). I valori dei pulsanti di opzione non selezionati non vengono inviati.
Su una pagina puoi avere tutti i gruppi di pulsanti di opzione che vuoi e ogni gruppo lavora in modo indipendente, purché ognuno abbia un
univoci-per-il-gruppo name.
Se vuoi caricare la pagina con uno dei pulsanti di opzione in un gruppo con lo stesso nome selezionato, includi l'attributo checked.
Questo pulsante di opzione corrisponderà alla pseudo-classe CSS :default,
anche se l'utente seleziona un'altra radio. Il pulsante di opzione attualmente selezionato corrisponde a :checked
pseudo-classe.
Se l'utente deve scegliere un controllo radio da un gruppo di pulsanti di opzione, aggiungi l'attributo required ad almeno uno
dei controlli. Se includi required in un pulsante di opzione in un gruppo, una selezione è obbligatoria per l'invio del modulo, ma
non deve essere necessariamente la radio con l'attributo selezionato per essere valido. Inoltre, indica chiaramente nel <legend>
che il controllo del modulo è obbligatorio. Viene descritta l'etichettatura di gruppi di pulsanti di opzione insieme a ogni singolo pulsante
in seguito.
Caselle di controllo
È valido che tutte le caselle di controllo all'interno di un gruppo abbiano lo stesso name. Solo le caselle di controllo selezionate hanno i rispettivi name e value
inviati con il modulo. Se sono selezionate più caselle di controllo con lo stesso nome, lo stesso nome verrà inviato con
(si spera) valori diversi. Se disponi di più controlli modulo con lo stesso nome, anche se non sono tutte caselle di controllo,
vengono inviate tutte, separate dalla "e commerciale".
Se non includi value in una casella di controllo, il valore delle caselle di controllo selezionate verrà impostato sul valore predefinito on, che probabilmente non corrisponde
utili. Se hai tre caselle di controllo denominate chk e sono tutte selezionate, l'invio del modulo non sarà decifrabile:
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
è richiesto qualsiasi controllo del modulo. Se aggiungi required a una casella di controllo, questa diventa obbligatoria; non influisce su altri
caselle di controllo con lo stesso nome.
Etichette e set di campi
Affinché gli utenti sappiano come compilare un modulo, il modulo deve essere accessibile. Ogni controllo del modulo deve avere un'etichetta.
Vuoi anche etichettare gruppi di controlli del modulo. Mentre le singole aree di input, di selezione e di testo sono etichettate con <label>,
gruppi di controlli modulo sono etichettati dai contenuti dei file <legend> di
<fieldset> che li raggruppa.
Negli esempi precedenti, avrai notato che ogni controllo del modulo, ad eccezione del pulsante di invio, aveva un <label>. Etichette.
fornisce i controlli dei moduli con nomi accessibili. I pulsanti prendono il nome accessibile dal contenuto o dal valore. Tutte le altre
i controlli del modulo richiedono un elemento <label> associato. Se non è associata alcuna etichetta, il browser eseguirà comunque il rendering dei controlli del modulo.
ma gli utenti non sapranno quali informazioni sono
previste.
Per associare esplicitamente un controllo del modulo a un <label>, includi l'attributo for in <label>: il valore rappresenta 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 modulo offre diversi vantaggi. Le etichette rendono i controlli del modulo accessibili agli utenti di screen reader assegnando al controllo un nome accessibile. Le etichette sono anche "aree interessate"; rendono il sito più fruibile per gli utenti con problemi di mobilità aumentando l'area. Se usi il mouse, prova a fare clic su un punto qualsiasi dell'etichetta "Il tuo nome". Attività quindi si concentra l'input.
Per fornire etichette implicite, includi il controllo modulo tra i tag <label> di apertura e chiusura. e lo stesso vale per
accessibile sia da uno screen reader che da un dispositivo puntatore, ma non fornisce il hook di stile come l'esplicito
dell'etichetta.
<label>Your name
<input type="text" name="name">
</label>
Poiché le etichette sono "aree interessate", non devono includere elementi interattivi all'interno di un'etichetta esplicita, né altri componenti interattivi. diverso dal controllo modulo etichettato in un'etichetta implicita. Ad esempio, se includi un link in un'etichetta mentre il browser il codice HTML, gli utenti saranno confusi se fanno clic sull'etichetta per accedere a un controllo del modulo, ma vengono reindirizzati una nuova pagina.
In genere, il parametro <label> precede il controllo del modulo, tranne nel caso di pulsanti di opzione e caselle di controllo. Questa operazione non è obbligatoria.
È solo lo schema UX comune. La serie Moduli di apprendimento contiene informazioni sulla progettazione dei 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 dei controlli e le relative etichette
hanno bisogno di un'etichetta. Per etichettare il gruppo, raggruppa tutti gli elementi in un
<fieldset>, dove <legend> fornisce l'etichetta per il gruppo.
<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, il valore <label> implicito assegna a ogni etichetta un pulsante di opzione e <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 contenente molte domande
diviso in gruppi di domande correlate, lo "studente preferito" <fieldset> potrebbe essere nidificato in un altro <fieldset> etichettato come
"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 -->
La posizione di questi elementi gli aspetti predefiniti hanno causato un utilizzo insufficiente, ma <legend> e <fieldset> possono essere utilizzati in stile con CSS.
Oltre a tutti gli attributi globali, <fieldset> supporta anche gli attributi name, disabled e form.
Quando disattivi un set di campi, tutti i controlli nidificati del modulo sono disattivati. Né gli attributi name né form hanno
molto utile in <fieldset>. Il campo 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).
Tipi di input e tastiera dinamica
Come osservato in precedenza, ci sono 22 diversi tipi di input.
In alcuni casi, quando un utente utilizza un dispositivo con una tastiera dinamica che viene visualizzata solo quando necessario, ad esempio un telefono, l'input
tipo utilizzato determina il tipo di tastiera visualizzata. La tastiera predefinita mostrata può essere ottimizzata in base al tipo di immissione richiesto.
Ad esempio, se digiti tel verrà mostrato un tastierino ottimizzato per l'inserimento di numeri di telefono. email include i @ e i .; e ai
la tastiera dinamica per url include due punti e il simbolo della barra. Purtroppo, l'iPhone ancora non include : in
la tastiera dinamica predefinita per i tipi di input url.
Tastiere di <input type="tel"> su iPhone e due telefoni Android diversi:
Tastiere di <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 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 estensioni e tipi globali. Ad esempio, accept="video/*, .gif" accetta file video o GIF animate.
Utilizza "audio/*" per i file audio "video/*" per i file video e "image/*" per i file immagine.
L'attributo enumerato capture, definito nel
specifica di acquisizione di contenuti multimediali, può essere usata se un nuovo contenuto multimediale
deve essere creato utilizzando la fotocamera o il microfono dell'utente. Puoi impostare il valore su user per i dispositivi di input rivolti all'utente
o environment per la fotocamera o il microfono posteriori dello smartphone. In genere, l'utilizzo di capture, senza un valore, funziona perché l'utente
sceglierà il dispositivo di input da 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.
Alcuni selettori CSS corrispondono ai controlli del modulo in base alla presenza di attributi HTML, tra cui :required
e :optional se il valore booleano required
sia impostato o meno; :default se checked
è hardcoded, e :enabled o :disabled,
a seconda che l'elemento sia interattivo e disabled
. La pseudoclasse :read-write associa gli elementi a
contenteditable impostato e
controlli del modulo che sono modificabili per impostazione predefinita, ad esempio tipi di input di number, password e text (ma non caselle di controllo,
pulsanti di opzione o il tipo hidden, tra gli altri). Se un elemento normalmente scrivibile ha readonly
impostato, 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 si attiva o disattiva in base allo stato. Quando l'utente
esce da un controllo del modulo, :user-invalid non ancora completamente supportato
La pseudo-classe :user-valid corrisponderà.
Puoi utilizzare il codice CSS per indicare se i controlli del modulo sono obbligatori 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 interfaccia utente possa sembrare intuitiva e chiara, molti utenti tentano di inviare un modulo a attivare i messaggi di errore. La disattivazione di un pulsante di invio in questo modo non consente la convalida del vincolo, ma 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
non è un'email, un numero, un URL, una data o un'ora validi, la pseudo-classe CSS :invalid corrisponderà a. Questa costante
l'aggiornamento è diverso dalla convalida del vincolo HTML integrata, che si verifica solo quando l'utente tenta di inviare il modulo.
La convalida dei vincoli integrata è pertinente solo per i vincoli impostati con attributi HTML. Anche se puoi definire lo stile di un elemento
nelle pseudoclassi :required e :valid/:invalid, il browser ha fornito messaggi di errore derivanti da errori basati
gli attributi required, pattern, min, max e persino type vengono forniti al momento dell'invio del modulo.
Quando proviamo a inviare il modulo senza scegliere lo studente preferito richiesto, la convalida del vincolo impedisce l'invio del modulo.
a causa di un errore validityState.valueMissing.
Se una delle proprietà di validityState restituisce true, l'invio viene bloccato e nel browser viene visualizzato un messaggio di errore.
nel primo controllo modulo errato, in modo da impostare lo stato attivo. Se l'utente attiva l'invio di un modulo e sono presenti valori non validi,
il primo controllo modulo non valido mostrerà un messaggio di errore e verrà impostato lo stato attivo. Se per un controllo obbligatorio non è impostato alcun valore,
il valore numerico non è compreso nell'intervallo o se un valore non è del tipo richiesto dall'attributo type, il modulo non sarà convalidato.
non verrà inviato e verrà visualizzato un messaggio di errore.
Se il valore di number, di data o di ora è inferiore al valore minimo impostato per min o è superiore al valore massimo di max impostato, il controllo sarà :out-of-range (e :invalid), e
l'utente riceverà informazioni su valididityState.rangeUnderflow,
validityState.rangeOverflow quando
e provare a inviare il modulo. Se il valore non è conforme alla specifica
step, che sia impostato in modo esplicito o predefinito su 1, il controllo sarà :out-of-range (e :invalid) e sarà presente un
validityState.stepMismatch. L'errore viene visualizzato sotto forma di fumetto e, per impostazione predefinita, fornisce informazioni utili su come correggere l'errore.
Esistono attributi simili per la lunghezza dei valori: minlength
e maxlength avvisano l'utente di un errore
con validityState.tooLong o
validityState.tooShort all'invio.
Inoltre, il criterio maxlength impedisce all'utente di inserire troppi caratteri.
L'utilizzo dell'attributo maxlength può portare a un'esperienza utente scadente. Di solito è consigliabile consentire all'utente
per inserire un numero di caratteri superiore a quello consentito fornendo un contatore, facoltativamente sotto forma di
<output>, che non viene inviato con il modulo,
consentendo loro di modificare il testo fino a quando l'output non mostra che la lunghezza massima consentita non è stata superata. maxlength
possono essere inclusi nel codice HTML, come tutto ciò che abbiamo detto, funziona senza JavaScript. Quindi, al caricamento, viene restituito il valore
l'attributo maxlength può essere utilizzato per creare questo contatore di caratteri in JavaScript.
Alcuni tipi di input sembrano avere vincoli predefiniti, ma non lo fanno. Ad esempio, il tipo di input tel fornisce un valore numerico
tastierino di un telefono su dispositivi con tastiere dinamiche, ma non vincola valori validi. Per questo e altri tipi di input,
esiste l'attributo pattern. Puoi specificare un'espressione regolare a cui il valore deve corrispondere per essere considerato valido.
Se un valore è la stringa vuota e il valore non è obbligatorio, non verrà generato un evento validityState.patternMismatch
. Se richiesto e vuoto, il messaggio di errore predefinito per validityState.valueMissing verrà mostrato all'utente, anziché
patternMismatch.
Per le email, probabilmente anche validityState.typeMismatch è troppo
perdonando le tue esigenze. Ti consigliamo di includere pattern
in modo che gli indirizzi email intranet senza un TLD non siano accettati come validi.
L'attributo pattern consente di fornire un'espressione regolare che il valore deve corrispondere. Quando è necessaria una corrispondenza di pattern,
assicurare che sia molto chiaro all'utente 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 e personalizzati durante la convalida del vincolo. Puoi anche usare JavaScript per aggiornare il numero di caratteri rimanenti, mostrare Una barra di avanzamento per la sicurezza della password oppure qualsiasi altro metodo per migliorare in modo dinamico il completamento.
Esempio
Questo esempio include un modulo all'interno di <dialog> con un elemento <form> nidificato con tre controlli del modulo e due pulsanti di invio, con
etichette ed istruzioni chiare.
Il primo pulsante di invio chiude la finestra di dialogo. Utilizza formmethod="dialog" per eseguire l'override del metodo predefinito del modulo e chiudi la finestra
<dialog> senza inviare o cancellare i dati. Devi includere anche l'formnovalidate, altrimenti il browser
prova a eseguire la convalida controllando che tutti i campi obbligatori abbiano un valore. L'utente potrebbe voler chiudere la finestra di dialogo e il modulo senza
l'inserimento di dati; e la convalida potrebbe impedire 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, perciò non è necessario includere gli attributi id o for. Gli elementi di input
con l'attributo obbligatorio, che li rende obbligatori. L'input del numero è impostato in modo esplicito per step per dimostrare come sia step
inclusi. Poiché il valore predefinito di step è 1, questo attributo può essere omesso.
<select> ha un valore predefinito che rende superfluo l'attributo required. Anziché includere l'attributo value
su ciascuna opzione, il valore predefinito è il testo interno.
Il pulsante di invio alla fine imposta il metodo dei moduli su POST. Facendo clic su questo pulsante, viene verificata la validità di ciascun valore. Se tutte
sono validi, i dati del modulo verranno inviati, la finestra di dialogo verrà chiusa e la pagina potrebbe reindirizzare a thankyou.php,
che corrisponde all'URL di azione. Se mancano valori o se il valore numerico presenta una mancata corrispondenza dei passaggi o è fuori intervallo, viene
verrà visualizzato il messaggio di errore pertinente definito dal browser, il modulo non verrà inviato e la finestra di dialogo non si chiuderà.
I messaggi di errore predefiniti possono essere personalizzati con validityState.setCustomValidity('message here')
. Tieni presente che, se imposti un messaggio personalizzato, il messaggio deve essere esplicitamente impostato sulla stringa vuota quando
è 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 sempre esperienza utente, è importante impedire agli utenti di commettere errori includendo istruzioni e fornendo suggerimenti, se necessario. Questa sezione illustra come il solo HTML può fornire la convalida lato client, ma deve essere sia lato client che lato server. La convalida può essere fornita in modi discreti durante la compilazione del modulo, ad esempio aggiungendo una quando il valore è corretto. Tuttavia, non fornire messaggi di errore prima del completamento del controllo del modulo. Se l'utente commette un errore, comunica all'utente dove si trova l'errore e cosa ha sbagliato.
Quando progetti i moduli, è importante tenere presente che non tutti sono come te. Qualcuno potrebbe avere una sola lettera come cognome (o nessun cognome), potrebbe non avere un codice postale, potrebbe avere una via di tre righe, potrebbero non avere un indirizzo. Potrebbero visualizzare 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, a livello di programmazione
determinabile e in modo programmatico associato all'elemento di modulo o al gruppo appropriato. La autocomplete
L'attributo può e deve essere utilizzato per velocizzare la compilazione del modulo e migliorare l'accessibilità.
HTML fornisce tutti gli strumenti per rendere accessibili i controlli di base del modulo. Più un elemento del modulo o un processo sono interattivi, maggiore attenzione deve essere data all'accessibilità per quanto riguarda la gestione degli elementi, l'impostazione e l'aggiornamento di nomi, ruoli, e valori, ove necessario, e gli annunci in tempo reale ARIA in base alle esigenze. Ma, come abbiamo imparato qui, con il solo HTML, è possibile ottenere un per raggiungere il tuo obiettivo di accessibilità e validità senza ricorrere ad ARIA o JavaScript.
Verifica le tue conoscenze
Verifica la tua conoscenza dei moduli.
In che modo i pulsanti di opzione fanno parte dello stesso gruppo?
name.id.Quale elemento HTML viene utilizzato per spiegare all'utente a cosa serve questo campo del modulo?
<h1><title><label>