Forms in HTML5

Sommario

Gli elementi e gli attributi dei form in HTML5 forniscono un mark-up più ricco di valore semantico rispetto ad HTML4, e alleggeriscono gli sviluppatori dalla necessità di scripting e styling intensivo richiesta da HTML4. Le caratteristiche dei form HTML5 generano anche una migliore esperienza utente, rendendo i form più coerenti tra i diversi siti web fornendo un feedback immediato all'utente in merito ai dati inseriti. La funzionalità viene fornita anche agli utenti che hanno disabilitato lo scripting nel browser.

Questa sezione descrive gli elementi nuovi o modificati in HTML5, che sono supportati da Gecko / Firefox, versione 4 o superiore.

L'elemento <input>

L'elemento <input> ha alcuni nuovi valori per l'attributo type.

• search: L'elemento rappresenta un campo di ricerca. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta.
• tel: L'elemento rappresenta un controllo per la modifica di un numero telefonico. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso, ma nessun'altra sintassi viene imposta, dato che la formattazione dei numeri di telefono varia notevolmente a livello internazionale. È possibile utilizzare attributi quali pattern e maxlength per limitare i valori immessi nel controllo.
• url: L'elemento rappresenta un controllo per la modifica di un URL. Le interruzioni di riga e gli spazi vuoti finali vengono eliminati automaticamente dal valore immesso.

• email: L'elemento rappresenta un controllo per la modifica di un indirizzo email. Le interruzioni di riga vengono rimosse automaticamente dal valore immesso. Un indirizzo e-mail non valido può essere immesso, ma il campo di input verrà validato solo se l'indirizzo di posta elettronica soddisfa la produzione ABNF 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) dove atext è definito in RFC 5322 sezione 3.2.3, e ldh-str è definito in RFC 1034 sezione 3.5.

  Nota: Se l'attributo multiple è presente, potranno essere inseriti diversi indirizzi email nel <input>, ad esempio una lista di email separate da virgole, ma questa funzionalità al momento non è stata implementata in Firefox.

L'elemento <input> ha anche nuovi attributi:

• list: l'ID di un elemento <datalist> il cui contenuto, che consiste in elementi <option>, dovrà essere utilizzato come suggerimento: le <option> (opzioni) vengono visualizzate nell'area dedicata ai suggerimenti del campo di input.
• pattern: Un'espressione regolare con cui il valore del controllo viene confrontato. Può essere usato negli <input> di tipo text, tel, search, url, ed email.
• form: Una stringa indicante a quale elemento <form> "appartiene" l'input. Ogni input può appartenere ad un solo form.
• formmethod: Una stringa indicante il metodo HTTP (GET o POST) da usare per l'invio dei dati al server; sovrascrive l'attributo method dell'elemento <form>, se definito. L'attributo formmethod può essere usato negli <input> di tipo image o submit, e quando l'attributo form è stato impostato.
• x-moz-errormessage : Una stringa che contiene un messaggio da visualizzare quando il campo non passa la validazione. Questo attributo è un'estensione di Mozilla, non rientra negli standard.

L'elemento <form>

L'elemento <form> ha un nuovo attributo:

• novalidate: Questo attributo fa in modo che il form non richieda la validazione.

L'elemento <datalist>

L'elemento <datalist> racchiude una lista di elementi <option> da suggerire all'utente durante la compilazione di un <input>.

Puoi aggiungere l'attributo list ad un elemento <input> per collegare un campo specifico ad un elemento <datalist> specifico.

L'elemento <output>

L'elemento <output> rappresenta il risultato di una computazione (un calcolo).

Puoi usare l'attributo for per specificare una relazione tra un elemento <output> e altri elementi del documento che hanno influenzato la computazione (come input o parametri). Il valore dell'attributo for è una lista di ID degli altri elementi separati da spazi.

Gecko 2.0 (ma non necessariamente altri motori di rendering dei browser) supporta la definizione di vincoli di validità personalizzati e messaggi di errore per gli elementi <output>, e pertanto applica le pseudo-classi CSS :invalid, :valid, :-moz-ui-invalid, e :-moz-ui-valid anche ad esso. Ciò può essere utile in situazioni in cui il risultato calcolato viola una regola, ma nessun valore immesso specifico lo fa (per esempio, "La somma totale delle percentuali non deve superare il 100%").

L'attributo <placeholder> (testo segnaposto)

L'attributo placeholder si applica agli elementi <input> e <textarea>, fornendo all'utente un suggerimento su cosa dovrebbe immettere nel campo. Il testo segnaposto non deve contenere interruzioni di linea.

L'attributo <autofocus>

L'attributo autofocus consente di specificare che un campo dovrebbero ricevere il focus (dovrebbe essere "focalizzato") al caricamento della pagina, a meno che l'utente non decida altrimenti, per esempio immettendo dati in un altro campo. L'attributo autofocus, Booleano, può essere assegnato ad un solo campo per ciascun form. Si applica agli elementi <input>, <button>, <select> e <textarea>. Unica eccezione: non può essere assegnato agli elementi <input> che abbiano l'attributo type impostato su hidden (ovviamente non si può focalizzare un elemento nascosto).

La proprietà label.control del DOM

L'interfaccia DOM HTMLLabelElement fornisce una proprietà extra, oltre alle proprietà che corrispondono agli attributi dell'elemento HTML <label>. La proprietà control restituisce il campo etichettato, cioè il campo a cui si riferisce l'etichetta (label), che è determinato dall'attributo for (se definito) o dal primo campo contenuto nell'etichetta.

Vincoli di Validazione

HTML5 fornisce sintassi ed elementi API per supportare la validazione lato client dei form. Anche se questa funzionalità non sostituisce la validazione lato server, che è ancora necessaria per la protezione e l'integrità dei dati, la validazione lato client può fornire una migliore esperienza utente, dando all'utente un feedback immediato sui dati immessi.

Se l'attributo title viene impostato su di un elemento <input>, il suo valore è usato come tooltip. Tuttavia, se la validazione fallisce, il tooltip sarà sostituito con un messaggio di errore. È possibile personalizzare tale messaggio di errore usando l'attributo non-standard x-moz-errormessage o con il metodo setCustomValidity().

<input type="email" title="Si prega di fornire una e-mail" x-moz-errormessage="E-mail non valida">

Sintassi HTML per Vincolare la Validazione

I seguenti elementi di sintassi HTML5 possono essere usati per specificare i vincoli sui dati immessi nel form.

• L'attributo required nell'elemento <input>, <select> e <textarea> indica che il campo deve essere compilato. (Sull'elemento <input>, required si applica solo in combinazione con alcuni valori dell'attributo type)
• L'attributo pattern nell'elemento <input> vincola il valore in modo che corrisponda una specifica espressione regolare.
• Gli attributi min e max nell'elemento <input> vincola il valore specificando il valore minimo e massimo che può essere immesso.
• L'attributo step nell'elemento <input> (se usato in combinazione con gli attributi min e max ) vincola la granularità dei valori che possono essere immessi. I valori che non corrispondono ad uno degli "step" consentiti non passano la validazione.
• L'attributo maxlength negli elementi <input> e <textarea> vincola il numero massimo di caratteri (in base a punti di codice Unicode) che l'utente può immettere.
• I valori url e email nell'attributo type restringono i valori accettati rispettivamente ad un URL o ad un indirizzo e-mail valido.

In aggiunta, è possibile evitare i vincoli di validazione specificando l'attributo novalidate nel <form>, o l'attributo formnovalidate nell'elemento <button> o nell'elemento <input> (quando l'attributo type è impostato su submit o image). Questi attributi indicano che il form non deve essere validato.

API per i Vincoli di Validazione

Le seguenti proprietà e metodi del DOM, correlati ai vincoli di validazione, sono disponibili agli scripts lato client:

• Negli oggetti HTMLFormElement, il metodo checkValidity() restituisce "true" se tutti gli elementi associati a tale elemento del form che sono soggetti a validazione soddisfano i loro vincoli, e "false" se non lo fanno.
• On form-associated elements:
  • La proprietà willValidate è "false" se l'elemento non soddisfa i vincoli di validazione.
  • La proprietà validity è un oggetto ValidityState rappresentante lo stato di validazione dell'elemento.
  • La proprietà validationMessage è un messaggio che descrive eventuali errori relativi ai vincoli impostati sull'elemento.
  • Il metodo checkValidity(), se l'elemento non soddisfa uno o più dei suoi vincoli, o true in caso contrario.
  • Il metodo setCustomValidity() imposta un messaggio di errore personalizzato, permettendo anche ai vincoli personalizzati di essere imposti e validati, oltre a quelli predefiniti.

Vedi anche

• Guida ai Forms HTML