Traduzione: Vlad Merzhevich
Tutti conoscono i moduli web, giusto? Inseriamo un tag, qualche, magari, completiamo il tutto con un bottone e il gioco è fatto.
Non ne sai la metà. HTML5 definisce oltre una dozzina di nuovi tipi di campi che puoi utilizzare nei tuoi moduli. E quando dico "usa", intendo che possono essere usati subito, senza espedienti, trucchi o soluzioni alternative. Non preoccuparti troppo, non sto dicendo che tutte queste nuove entusiasmanti funzionalità siano effettivamente supportate in ogni browser. Assolutamente no, non intendo da tutti. Nei browser moderni, sì, i tuoi moduli mostreranno tutto ciò di cui sono capaci. Ma nei browser più vecchi, i moduli continueranno a funzionare, anche se non al massimo delle loro potenzialità. Cioè, queste funzionalità si degradano con grazia in ogni browser. Anche in IE6.
Testo suggerito| CIOÈ. | Firefox | Safari | Cromo | musica lirica | i phone | Androide |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Il primo miglioramento di HTML5 relativo ai moduli è la possibilità di impostare il testo del prompt nel campo di input. Questo testo viene visualizzato nel campo di input se il campo è vuoto e non è attivo. Non appena si fa clic nel campo di input (o ci si accede tramite Tab), il testo del suggerimento scompare.
Probabilmente hai già visto il testo del messaggio. Ad esempio, Mozilla Firefox include un testo suggestivo nella barra degli indirizzi che dice "Cerca nei segnalibri e nella cronologia".
Quando fai clic sulla barra degli indirizzi, il testo del suggerimento scompare.
Ecco come puoi includere testo suggestivo nei tuoi moduli.
I browser che non supportano l'attributo segnaposto semplicemente lo ignorano. Nessun danno o violazione.
Chiedi al professor Markup☞ D. Posso utilizzare il markup HTML per l'attributo segnaposto? Voglio inserire una foto o magari cambiare i colori.
R. L'attributo segnaposto può contenere solo testo, nessun codice HTML. Tuttavia, esistono estensioni CSS speciali che consentono di impostare lo stile del testo in alcuni browser.
Campi di messa a fuoco automatica| CIOÈ. | Firefox | Safari | Cromo | musica lirica | i phone | Androide |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
I siti Web possono utilizzare JavaScript per concentrarsi automaticamente sul primo campo del modulo. Ad esempio, nella pagina principale Google.com Il campo per l'inserimento delle parole chiave di ricerca è dotato di messa a fuoco automatica. Anche se questo è conveniente per la maggior parte delle persone, può essere fastidioso per gli utenti avanzati e le persone con bisogni speciali. Se premi la barra spaziatrice mentre aspetti che la pagina scorra, non ci sarà alcuno scorrimento perché il focus è sul campo di input del modulo (scriverà spazio nel campo invece di scorrere). Se sposti lo stato attivo su un altro campo di input durante il caricamento della pagina, lo script di messa a fuoco automatica del sito potrebbe "utilmente" riportare lo stato attivo al campo di input originale, interrompendo la digitazione e facendoti digitare nel posto sbagliato.
Poiché la messa a fuoco automatica funziona tramite JavaScript, possono esserci difficoltà nel gestire questi casi estremi e poche opzioni per coloro che non vogliono che una pagina Web "rubi" la loro attenzione.
Per risolvere questi problemi, HTML5 introduce l'attributo autofocus per tutti gli elementi del modulo. L'attributo autofocus fa esattamente quello che sembra: non appena la pagina viene caricata, sposta lo stato attivo sul campo specificato. Ma poiché si tratta solo di markup e non di uno script, il comportamento sarà coerente su tutti i siti. Inoltre, i produttori di browser (o gli autori di estensioni) possono offrire agli utenti un modo per disabilitare la messa a fuoco automatica.
Ecco come impostare la messa a fuoco automatica di un campo modulo.
I browser che non supportano l'attributo autofocus lo ignoreranno.
Che è successo? Supponiamo che tu voglia che la messa a fuoco automatica funzioni ovunque, non solo nei fantasiosi browser HTML5? Puoi lasciare lo script corrente con la messa a fuoco automatica, basta apportare due piccole modifiche:
- aggiungere l'attributo autofocus al codice HTML;
- Controlla se il browser supporta l'attributo autofocus e, in caso contrario, esegui il tuo script.
Messa a fuoco automatica con alternativa
if (!("autofocus" in document.createElement("input")) ) (
document.getElementById("q").focus();
}
Molte pagine Web attendono che window.onload venga attivato e imposti il focus. Ma l'evento window.onload non si attiverà finché tutte le immagini non saranno state caricate. Se la tua pagina ha molte immagini, questi script ingenui potrebbero potenzialmente cambiare focus dopo che l'utente avrà iniziato a interagire con un'altra parte della tua pagina. Questo è il motivo per cui gli utenti esperti odiano gli script di messa a fuoco automatica.
Ad esempio, nella sezione precedente, lo script di messa a fuoco automatica è stato inserito immediatamente dopo il campo del modulo a cui faceva riferimento. Questa è la soluzione ottimale, ma potrebbe offendere la tua sensibilità inserendo un blocco di codice JavaScript al centro della pagina (o, più banalmente, il tuo sistema potrebbe non essere così flessibile). Se non puoi inserire uno script al centro della pagina, dovresti impostare il focus tramite un evento personalizzato come $(document).ready() in jQuery invece di window.onload .
Messa a fuoco automatica tramite jQuery
$(documento).ready(funzione() (
$("#q").focus();
}
});
L'evento personalizzato jQuery si attiva non appena il DOM è accessibile, ovvero attende il caricamento del testo della pagina, ma non attende il caricamento di tutte le immagini. Questo non è un approccio ottimale: se la pagina è insolitamente grande o la connessione di rete è lenta, l'utente potrebbe ancora interagire con la pagina prima che venga eseguito lo script focus. Ma è comunque molto meglio che aspettare che si verifichi l'evento window.onload.
Se sei d'accordo e sei disposto a inserire uno script a istruzione singola nel codice della tua pagina, questo è un compromesso meno dannoso della prima opzione e migliore della seconda. Puoi utilizzare eventi personalizzati jQuery per impostare i tuoi eventi, ad esempio autofocus_ready. È quindi possibile attivare manualmente questo evento non appena il campo di messa a fuoco automatica diventa disponibile. Grazie a E.M. Shtenberg per avermi insegnato questa tecnica.
Messa a fuoco automatica con evento personalizzato alternativo
$(document).bind("autofocus_ready", funzione() (
if (!("autofocus" in document.createElement("input"))) (
$("#q").focus();
}
});
$(document).trigger("autofocus_ready");
Questa soluzione è ottimale, proprio come il primo approccio. Il focus verrà impostato sul campo del modulo non appena tecnicamente possibile mentre il testo della pagina è ancora in fase di caricamento. Parte della logica applicativa (focus nel campo form) è stata spostata dal corpo della pagina alla sezione. Questo esempio è basato su jQuery, ma il concetto di eventi personalizzati non è esclusivo di jQuery. Altre librerie JavaScript come YUI e Dojo offrono funzionalità simili.
Riassumiamo.
- È importante impostare correttamente la messa a fuoco.
- Se possibile, chiedi al browser di utilizzare l'attributo autofocus sul campo in cui desideri mettere a fuoco.
- Se utilizzi codice alternativo per browser meno recenti, definisci il supporto per l'attributo autofocus in modo che lo script venga eseguito solo nei browser meno recenti.
- Imposta la concentrazione il prima possibile. Inserisci lo script focus nel codice immediatamente dopo il campo del modulo. Se questo non ti disturba, incorpora una libreria JavaScript che supporti eventi personalizzati e genera l'evento nel codice immediatamente dopo il campo del modulo. Se ciò non è possibile, utilizza un evento come $(document).ready() da jQuery.
- In nessun caso dovresti aspettare che window.onload venga messo a fuoco.
Per più di un decennio, i moduli hanno contenuto solo pochi tipi di campi. I più comuni sono i seguenti.
Tutti questi tipi di campo funzionano ancora in HTML5. Se "aggiorni a HTML5" (magari modificando !DOCTYPE ), non dovrai apportare una sola modifica ai tuoi moduli. Evviva la compatibilità con le versioni precedenti!
Tuttavia, HTML5 definisce 13 nuovi tipi di campo e non c'è motivo di non iniziare a utilizzarli.
Il primo di questi nuovi tipi di indirizzi email. Sembra qualcosa del genere.
Stavo per scrivere una frase che iniziava "sui browser che non supportano type="email" ..." ma si è fermata. Perché? Perché non sono sicuro che i browser non supportino type="email" . Tutti i browser "supportano" type="email" . Potrebbero non fare nulla di speciale, ma i browser che non riconoscono type="email" lo tratteranno come type="text" e lo visualizzeranno come un normale campo di testo.
Sottolineerò quanto questo sia importante. Esistono milioni di moduli su Internet che ti chiedono di inserire il tuo indirizzo email e tutti utilizzano l'estensione . Vedi una casella di testo, inserisci il tuo indirizzo email e il gioco è fatto. E poi arriva HTML5, che definisce type="email" . I browser stanno impazzendo? NO. Ogni browser sulla Terra tratta l'attributo tipo sconosciuto come type="text" - anche IE6. Quindi puoi "aggiornare" i tuoi moduli utilizzando type="email" adesso.
Cosa succede se diciamo che il browser supporta type="email"? Beh, potrebbe significare qualsiasi cosa. La specifica HTML5 non richiede alcuna interfaccia utente specifica per i nuovi tipi di campo. Opera aggiunge una piccola icona al campo del modulo. Altri browser HTML5 come Safari e Chrome vengono visualizzati come un campo di testo, lo stesso di type="text", in modo che i tuoi utenti non notino la differenza (finché non guardano il codice sorgente).
E poi c'è l'iPhone.
iPhone non ha una tastiera fisica. Tutta la "digitazione" avviene facendo clic sulla tastiera su schermo che appare al momento opportuno, ad esempio quando si accede a un campo modulo su una pagina Web. Apple ha fatto qualcosa di intelligente con il browser dell'iPhone. Riconosce alcuni nuovi campi HTML5 e modifica dinamicamente la tastiera su schermo per ottimizzare l'input.
Ad esempio, un indirizzo e-mail è un testo, giusto? Naturalmente, ma questo è un tipo di testo speciale. Pertanto, quasi tutti gli indirizzi e-mail contengono il simbolo @ e almeno un punto (.), ma è improbabile che contengano uno spazio. Pertanto, quando utilizzi un iPhone e vai su , otterrai una tastiera su schermo che include una barra spaziatrice più piccola e tasti dedicati per i simboli. E @.
Lasciatemi riassumere. Non c'è alcun aspetto negativo nel convertire immediatamente tutti i campi della posta elettronica in type="email" . Quasi nessuno se ne accorgerà tranne gli utenti iPhone, che probabilmente non se ne accorgeranno nemmeno. Ma chi se ne accorgerà sorriderà tranquillamente e ti ringrazierà per aver reso il loro lavoro un po' più semplice.
Indirizzi webUn indirizzo web, che i geek standard chiamano URL, ad eccezione di alcuni pedanti che chiamano URI, è un altro tipo di testo specializzato. La sintassi di un indirizzo web è limitata al relativo standard Internet. Se qualcuno ti chiede di inserire un indirizzo web in un modulo, si aspetta qualcosa come "http://www.google.com/", non "125 Farwood Road". Le barre sono comuni: anche la home page di Google ne ha tre. Anche i punti sono comuni, ma gli spazi sono vietati. E ogni indirizzo web ha un suffisso di dominio come ".com" o ".org".
E quindi... (rullo di tamburi per favore)... . Su iPhone appare così.
L'iPhone ha ridisegnato la sua tastiera virtuale proprio come ha fatto per la posta elettronica, ma ora la ottimizza per digitare un indirizzo web. La barra spaziatrice è stata completamente sostituita da tre tasti virtuali: barra, punto e ".com" (puoi tenere premuto il tasto ".com" per selezionare un suffisso diverso come ".org" o ".net").
I browser che non supportano HTML5 tratteranno type="url" come type="text" , quindi non ci sono svantaggi nell'utilizzare questo tipo per tutti i campi in cui è necessario inserire un indirizzo web.
I numeri come contatoriProssimo passo: i numeri. Richiedere un numero è più complesso che richiedere un'e-mail o un indirizzo web. Innanzitutto i numeri sono più complessi di quanto si pensi. Seleziona rapidamente un numero. -1? No, intendevo un numero compreso tra 1 e 10,7 ½? No, no, non essere insignificante, stupido. π? Ora hai appena scelto un numero irrazionale.
Vorrei sottolineare che non ti viene spesso chiesto "solo un numero". È più probabile che chiedano un numero compreso in un determinato intervallo. Potresti volere solo determinati tipi di numeri all'interno di quell'intervallo, forse numeri interi, ma non frazioni o decimali o qualcosa di più esotico come i multipli di 10. HTML5 copre tutto questo.
Scegli un numero, quasi uno qualunque
Consideriamo un attributo alla volta.
- type="number" significa che questo è un campo numerico.
- min="0" specifica il valore minimo consentito per questo campo.
- max="10" è il valore massimo consentito.
- step="2" in combinazione con il valore minimo definisce i numeri validi nell'intervallo: 0, 2, 4 e così via, fino al valore massimo.
- valore="6" valore predefinito. Dovrebbe sembrare familiare, questo è lo stesso attributo sempre utilizzato per definire i valori dei campi del modulo. Ne parlo qui come punto di partenza, ovvero che HTML5 si basa su versioni precedenti di HTML. Non devi imparare di nuovo a fare ciò che hai già fatto.
Questo è il codice per un campo numerico. Tieni presente che tutti questi attributi sono facoltativi. Se hai un minimo ma non un massimo, puoi specificare l'attributo min ma non l'attributo max. Il valore di passaggio predefinito è 1 ed è possibile omettere l'attributo step finché non è necessario un valore di passaggio diverso. Se non esiste un valore predefinito, l'attributo value può essere una stringa vuota o addirittura omesso del tutto.
Ma HTML5 non si ferma qui. Allo stesso, bassissimo prezzo della libertà, ottieni queste pratiche tecniche JavaScript.
- input.stepUp(n) incrementa il valore del campo di n.
- input.stepDown(n) diminuisce il valore del campo di n.
- input.valueAsNumber restituisce il valore corrente come numero in virgola mobile (la proprietà input.value è sempre una stringa).
Problemi di visualizzazione? Bene, l'interfaccia corretta per la gestione dei numeri è implementata in modo diverso nei browser. Su iPhone, dove la digitazione è difficile, il browser ottimizza nuovamente la tastiera virtuale per l'immissione dei numeri.
Nella versione desktop di Opera, il campo type="number" appare come un contatore con piccole frecce su e giù su cui puoi fare clic per modificare i valori.
Opera rispetta gli attributi min , max e step, quindi otterrai sempre un valore numerico accettabile. Se aumenti il valore al massimo, la freccia su nel contatore diventa grigia.
Come per tutti gli altri campi di input di cui ho parlato in questo capitolo, i browser che non supportano type="number" lo tratteranno come type="text" . Il valore predefinito verrà visualizzato nel campo (così come è memorizzato nell'attributo value), ma altri attributi come min e max verranno ignorati. Sei libero di implementarli tu stesso o di utilizzare un framework JavaScript che implementa già la gestione dei contatori. Prima controlla qui.
if (! .inputtypes.numero) (
// nessun supporto nativo per il campo tipo=numero
// potrebbe provare Dojo o un altro framework JavaScript
}
Un contatore non è l'unico modo per rappresentare l'input numerico. Probabilmente hai anche visto uno slider simile a questo.
Ora puoi anche avere uno slider sul modulo. Il codice sembra stranamente simile a un campo contatore.
Tutti gli attributi disponibili sono gli stessi di type="number" - min , max , step , value - e significano la stessa cosa. L'unica differenza è l'interfaccia utente. Invece di un campo di input, i browser dovrebbero visualizzare type="range" come dispositivo di scorrimento. Al momento in cui scrivo, le ultime versioni di Safari, Chrome e Opera funzionano con questo. Sfortunatamente, l'iPhone viene visualizzato come un semplice campo di testo; non ottimizza nemmeno la tastiera su schermo per l'immissione di numeri. Tutti gli altri browser trattano semplicemente il campo come type="text" , quindi non c'è motivo di iniziare a utilizzare immediatamente questo tipo.
HTML 4 non include la selezione della data tramite calendario. I framework JavaScript ti consentono di aggirare questo problema (Dojo, jQuery UI, YUI, Closure Library), ma, ovviamente, ciascuna di queste soluzioni richiede "implementare" il framework per qualsiasi calendario integrato.
HTML5 definisce finalmente un modo per abilitare i selettori di date nativi senza alcun script. In realtà ce ne sono sei: data, mese, settimana, ora, data + ora e data + ora con fuso orario.
Finora, il supporto è... scarso.
| tipo="data" | 9.0+ | - |
| tipo="mese" | 9.0+ | - |
| tipo="settimana" | 9.0+ | - |
| tipo="ora" | 9.0+ | - |
| tipo="dataora" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Ecco come viene visualizzato Opera:
Se hai bisogno di tempo insieme alla data, Opera supporta anche:
Se hai bisogno di un mese più un anno (ad esempio la data di scadenza di una carta di credito), Opera può visualizzare:
Meno comune, ma disponibile, è selezionare la settimana dell'anno tramite:
Ultimo ma non meno importante è il timing con:
Selettore data con alternativa
...
var i = document.createElement("input");
i.setAttribute("tipo", "data");
if (i.type == "testo") (
// Nessun supporto nativo per la selezione della data :(
// Usa Dojo/jQueryUI/YUI/Closure per crearlo,
// quindi sostituisce dinamicamente l'elemento
}
È probabile che altri browser finiranno per supportare questi tipi. Come type="email" e altri tipi, questi campi del modulo appariranno come testo normale nei browser che non riconoscono type="date" e le sue varianti. Se lo desideri, puoi semplicemente utilizzare , rendere felici gli utenti di Opera e attendere che altri browser si mettano al passo. È più realistico usarlo, ma controlla se il browser ha il supporto nativo per il selettore di date e includi una soluzione alternativa sotto forma di uno script di tua scelta (Dojo, jQuery UI, YUI, Closure Library o altre opzioni).
Finestra di ricercaQuindi, cerca. Non solo ricerche da Google o Yahoo (beh, anche quelle). Pensa a qualsiasi casella di ricerca, su qualsiasi pagina, su qualsiasi sito web. Amazon ha una casella di ricerca, Yandex ha una casella di ricerca, anche la maggior parte dei blog. Come sono fatti? , proprio come qualsiasi altro campo di testo sul Web. Risolviamo questo problema.
Cerca una nuova generazione
In alcuni browser non noterai alcuna differenza rispetto a un normale campo di testo. Ma se utilizzi Safari su Mac OS X, apparirà così.
Hai trovato la differenza? Il campo di input ha gli angoli arrotondati! Lo so, lo so, difficilmente riesci a contenere i tuoi sentimenti. Ma aspetta, c'è di più! Quando inizi a digitare type="search" nel campo, Safari inserirà un piccolo pulsante "x" sul lato destro della finestra. Cliccando sulla "x" si cancella il contenuto del campo. Google Chrome, che ha la stessa tecnologia sotto il cofano, si comporta allo stesso modo. Entrambi questi piccoli trucchi sembrano e si comportano in modo simile alla ricerca nativa in iTunes e in altre applicazioni client di Mac OS X.
Apple.com utilizza la ricerca sul sito per aiutare il sito a trasmettere un'atmosfera da "amante degli ara". Ma non c'è nulla di specifico per i Mac qui. È solo codice, quindi ogni browser su ogni piattaforma può scegliere come eseguire il rendering in base alle convenzioni della piattaforma. Come con tutti gli altri nuovi tipi, i browser che non riconoscono type="search" lo tratteranno come type="text" , quindi non c'è assolutamente alcun motivo per non iniziare a utilizzare type="search" per tutte le caselle di ricerca oggi stesso.
dice il professor MarkapPer impostazione predefinita, Safari non applica la maggior parte degli stili. Se vuoi forzare Safari a trattare il campo di ricerca come un normale campo di testo (in modo da poter applicare i tuoi stili), aggiungi questa regola al tuo foglio di stile.
ingresso(
-aspetto-webkit:campotesto;
}
Grazie a John Lane per avermi insegnato questo trucco.
Selezione del coloreHTML5 definisce anche un campo che permette di selezionare un colore e lo restituisce in formato esadecimale. Nessun browser supporta i selettori di colori, il che è un peccato perché ho sempre amato le tavolozze di Mac OS. Forse un giorno.
Nota traduttore Opera 11 supporta questa funzionalità.
Convalida del moduloIn questo capitolo ho parlato dei nuovi elementi dei moduli e delle nuove funzionalità come l'autofocus, ma non ho menzionato forse la parte più interessante dei moduli HTML5: la convalida automatica dell'input. Diamo un'occhiata ai problemi comuni relativi all'immissione di un indirizzo email in un modulo. Probabilmente hai una convalida lato client tramite JavaScript, seguita da una convalida lato server tramite PHP, Python o un altro linguaggio lato server. HTML5 non sostituirà mai la convalida lato server, ma un giorno potrebbe sostituire la convalida lato client.
Esistono due grossi problemi con la convalida dell'indirizzo email in JavaScript:
Seriamente, sbaglierai l'indirizzo. Determinare che un insieme di caratteri casuali sia un indirizzo email valido è incredibilmente difficile. Più guardi attentamente, più diventa difficile. Ho già detto che è molto, molto difficile? Non è più semplice scaricare questo grattacapo sul tuo browser?
Opera controlla type="email"
Ecco uno screenshot di Opera 11, sebbene la funzionalità sia presente da Opera 9. Il codice prevede l'impostazione del valore email per l'attributo type. Quando un utente Opera tenta di inviare un modulo con , il browser controlla automaticamente l'indirizzo email, anche se gli script sono disabilitati.
HTML5 offre anche la convalida degli indirizzi web con campo e dei numeri con . La convalida del numero tiene conto dei valori degli attributi min e max, quindi i browser non ti consentiranno di inviare il modulo se inserisci un numero troppo grande.
Non esiste un codice che consenta la convalida del modulo in HTML5, viene eseguita per impostazione predefinita. Per disabilitare la convalida, utilizzare l'attributo novalidate.
Non mettermi alla prova
I browser sono stati lenti nell'includere il supporto per la convalida dei moduli in HTML5. Firefox 4 avrà il pieno supporto. Sfortunatamente, Safari e Chrome sono implementati solo parzialmente: convalidano gli elementi del modulo, ma non visualizzano alcun messaggio visibile quando un campo del modulo non supera la convalida. In altre parole, se inserisci una data errata (o scritta in modo errato) in type="date" , Safari e Chrome non invieranno il modulo, ma non ti diranno il motivo per cui non lo hanno fatto. Metteranno a fuoco il campo che contiene un valore non valido, ma non visualizzeranno un messaggio di errore come Opera o Firefox 4.
Campi richiesti| CIOÈ. | Firefox | Safari | Cromo | musica lirica | i phone | Androide |
| - | 4.0+ | - | - | 9.0+ | - | - |
La convalida del modulo in HTML5 non è limitata al tipo di ciascun campo. Puoi anche specificare che alcuni campi sono obbligatori, tali campi devono avere un valore prima di poter inviare il modulo.
Il codice per i campi obbligatori è il più semplice possibile.
I browser possono modificare l'aspetto originale di un campo obbligatorio. Ecco un esempio di come appare in Mozilla Firefox 4.0.
Inoltre, se si tenta di inviare un modulo senza compilare un valore richiesto, Firefox visualizzerà una barra informazioni che informa che il campo è obbligatorio e non può essere vuoto.
Buongiorno a tutti. Alexey Gulynin è in contatto. Nell'ultimo articolo hai appreso dei nuovi elementi strutturali in HTML5. In questo articolo vorrei raccontarvi cosa ci ha portato il nuovo HTML5 quando si lavora con i moduli. Innanzitutto si tratta di verificare che i campi rispettino determinate condizioni, senza utilizzare Javascript. In precedenza, abbiamo specificato tutti i campi di input con un tag con l'attributo type="text". Successivamente Javascript ha verificato che il campo non fosse vuoto e soddisfacesse determinati requisiti (ad esempio l’e-mail dell’utente). Con l'avvento di HTML5, l'intera procedura è diventata più semplice. Cominciamo con un esempio. Creiamo un modulo e aggiungiamo un tag con un nuovo attributo type="email" (questo attributo ci impedirà di inviare il modulo finché non verrà inserito l'indirizzo email corretto):
Moduli in HTML5
In questo caso, abbiamo specificato il tipo di campo come email e, in sostanza, finché non inseriremo un indirizzo email valido, il modulo non dovrebbe essere inviato. Il browser Yandex mostra un suggerimento molto interessante quando inseriamo alcune sciocchezze in questo campo. Ho inserito "123" e ho provato a inviare. Viene visualizzato un messaggio che informa che è necessario il simbolo "@".
Quelli. se inserisco "@", il modulo dovrebbe essere inviato. Questo è esattamente quello che è successo. Pertanto, non consiglio di utilizzare questo tipo di campo, a meno che non venga aggiunto un altro attributo: pattern .
Questo attributo controlla se ciò che abbiamo inserito corrisponde a ciò che è presente in pattern . Ciò richiede la conoscenza delle espressioni regolari. Facciamo in modo che il nostro modulo venga inviato solo dopo aver inserito un indirizzo email NORMALE e non solo la riga contenente "@" :
E-mail:
Se non sai cosa sono le espressioni regolari, va bene. Saranno discussi in uno dei seguenti articoli.
Ora il nostro campo funziona normalmente.
L'attributo obbligatorio è necessario affinché non sia possibile inviare un'espressione vuota (obbligatorio - obbligatorio da compilare).
Esiste anche un attributo type con il valore tel , che consente di inserire un numero di telefono:
Anche in questo caso è necessario specificare lo schema affinché questo campo funzioni normalmente, perché il formato del telefono di ognuno è diverso. Ad esempio, ecco il formato:
Telefono: Esempio di numero corretto 937-12-12
Fino a quando il numero di telefono non verrà inserito correttamente, il modulo non verrà inviato da nessuna parte. Noto inoltre che pattern può essere utilizzato anche in campi di testo semplici (type="text" ).
Altro nuovo attributo di tipo con il valore url , che permette di verificare se l'url inserito è valido. Esempio:
URL:
. Funziona correttamente nel browser Yandex.Un altro nuovo elemento è lo slider, che viene specificato dall'attributo type con il valore range .
Questo elemento ha un valore minimo e massimo, che può quindi essere passato da qualche parte. Compiti subito:
Crea un campo di testo accanto a questo cursore in cui verrà visualizzato il valore del cursore quando cambia.
In caso di difficoltà, è possibile visualizzare il codice seguente:
Lavorare con uno slider in HTML5
|
var range = document.getElementById("myrange"); var testo = document.getElementById("miotesto"); range.addEventListener("change", function())( //iscriviti all'evento change text.value = range.value; ));Il prossimo nuovo elemento è il numero . Ti faccio un esempio e tutto ti sarà chiaro:
In questo caso possiamo selezionare elementi da 5 a 100 con incrementi di 5. Questo elemento è tutt'altro che perfetto. Non solo ha un aspetto diverso nei diversi browser, ma puoi inserirvi manualmente un valore (alcuni browser lo gestiscono). Sebbene il mio browser abbia elaborato questo campo abbastanza normalmente (utilizzo un browser Yandex). Non consiglio di utilizzarlo ancora, a meno che non si eseguano controlli in Javascript. Un altro compito per casa (nessun codice questa volta):
Controlla in Javascript che il valore inserito in questo campo deve essere un multiplo di 5 (usa l'evento change).
Finora abbiamo esaminato solo un attributo, require . Ma ce ne sono anche altri:
L'attributo autofocus viene utilizzato per garantire che quando si accede a questa pagina, il focus cada su questo campo.
L'attributo segnaposto funge da tooltip. Non appena inizi a digitare qualcosa, il messaggio scomparirà. Per esempio:
E-mail:
In questo articolo hai imparato quali nuovi elementi per lavorare con i moduli sono apparsi in HTML5. Questa era la parte 1 dell'articolo, nel prossimo articolo esamineremo altri elementi su come lavorare con i moduli, iscriviti per non perdertelo.
Alexey Gulynin è stato in contatto, lascia i tuoi commenti, ci vediamo nei prossimi articoli.
Un modulo HTML è una parte di un documento che consente all'utente di inserire informazioni di interesse, che possono successivamente essere accettate ed elaborate lato server. In altre parole, i moduli vengono utilizzati per raccogliere le informazioni immesse dagli utenti.
Per determinare a quale elemento del modulo appartiene l'etichetta corrente, è necessario utilizzare l'attributo for del tag. Il valore dell'attributo for deve corrispondere al valore dell'attributo globale dell'elemento del modulo a cui verrà applicata l'etichetta. L'attributo for non può essere utilizzato se l'elemento sarà all'interno di un elemento.
Vediamo un esempio di utilizzo:
Esempio di utilizzo di un tag Sì NoNon proprio
In questo esempio noi:
- Dentro Primo forme:
- Pubblicato due pulsanti di opzione ( ) per selezionare tra un numero limitato di opzioni. Tieni presente ancora una volta che per i pulsanti di opzione all'interno dello stesso modulo è necessario specificare lo stesso nome; abbiamo specificato valori diversi. Per Primo checked , che specifica che l'elemento deve essere preselezionato al caricamento della pagina (in questo caso, un pulsante di opzione con il valore yes ). Inoltre, abbiamo specificato attributi globali per i pulsanti di opzione, che definiscono un identificatore univoco per l'elemento.
- Abbiamo inserito due elementi che definiscono le etichette di testo per i nostri campi di testo. Tieni presente che abbiamo utilizzato l'attributo for per determinare a quale elemento del modulo appartiene l'etichetta corrente. Il valore dell'attributo for corrisponde al valore dell'attributo globale del pulsante di opzione di cui abbiamo bisogno.
- Dentro secondo forme:
- Pubblicato due pulsanti di opzione ( ) per selezionare tra un numero limitato di opzioni. Per secondo Per i pulsanti di opzione abbiamo specificato un attributo check, che indica che l'elemento deve essere preselezionato al caricamento della pagina (in questo caso, un pulsante di opzione con il valore no ). Inoltre, abbiamo specificato valori univoci per i pulsanti di opzione all'interno del modulo e gli stessi nomi.
- Abbiamo posizionato due elementi, al loro interno abbiamo posizionato i nostri pulsanti di opzione. A differenza del metodo precedente, non è necessario specificare attributi globali (identificatore per l'elemento) per i pulsanti di opzione e utilizzare l'attributo for per le etichette di testo per fare riferimento ad essi (creare un'associazione).
Nel browser, entrambe le opzioni (metodi) per l'utilizzo delle etichette di testo sembrano identiche:
Descrizione comando per i campi di inputVediamo un esempio di utilizzo:
Un esempio di utilizzo dell'attributo Login segnaposto:Parola d'ordine:
Ulteriore
In questo esempio, abbiamo specificato per un elemento con tipo testo (un campo di testo a riga singola) e tipo password (un campo password) un suggerimento testuale per l'utente (l'attributo segnaposto) che descrive il valore previsto per l'input.
Il risultato del nostro esempio:
Domande e compiti sull'argomentoPrima di passare all'argomento successivo, completa il compito pratico:
- Utilizzando le conoscenze acquisite, crea il seguente modulo d'ordine:
Un avvertimento: nei campi in cui è prevista la selezione, dovrebbe essere possibile selezionare facendo clic sul testo e non solo sull'elemento stesso.
Dopo aver completato l'esercizio, controlla il codice della pagina aprendo l'esempio in una finestra separata per assicurarti di aver fatto tutto correttamente.
Questo è il primo di tre articoli sui moduli Web HTML5. Prima di passare allo stile e alla convalida JavaScript lato client, daremo un'occhiata al markup di base. Ti consiglio di leggere questo articolo anche se hai già familiarità con i moduli: qui sono descritti molti nuovi attributi e funzionalità!
I moduli HTML possono sembrare semplici, ma sono essenziali per la maggior parte dei siti Web e delle applicazioni. In HTML4, i tipi di campi di input erano limitati al seguente elenco:
- tipo di input="testo"
- tipo di input="casella di controllo"
- tipo di input="radio"
- tipo di input="password"
- input type="hidden" - per i dati invisibili all'utente
- input type="file" - per caricare file
- textarea - per inserire grandi quantità di testo
- selezionare - per gli elenchi a discesa
- pulsante - solitamente utilizzato per inviare i dati del modulo, ma è possibile utilizzare anche input type="submit" e input type="image".
Oltretutto:
- le opzioni di stile con i CSS sono limitate
- gli elementi avanzati, come gli elementi per la selezione della data e del colore, devono essere implementati in modo indipendente utilizzando il codice
- la convalida lato client richiede JavaScript
HTML5 ha introdotto un numero enorme di nuovi tipi di campi. Forniscono input nativi e aiutanti di convalida senza alcun codice JavaScript.
| Tipo | Descrizione |
| inserendo l'indirizzo email | |
| tel | inserendo un numero di telefono: nessuna sintassi rigorosa, ma le interruzioni di riga verranno rimosse |
| URL | inserisci l'URL |
| ricerca | il campo di ricerca con interruzioni di riga viene rimosso automaticamente |
| numero | numero in virgola mobile |
| allineare | controllo per inserire un valore approssimativo, solitamente presentato utilizzando i dispositivi di scorrimento |
| data | inserendo giorno, mese e anno |
| appuntamento | Inserimento del giorno, mese, anno, ora, minuto, secondo e microsecondo relativo al fuso orario attuale |
| datetime-locale | inserendo data e ora senza fuso orario |
| mese | inserendo mese e anno senza fuso orario |
| settimana | inserendo il numero della settimana senza fuso orario |
| tempo | inserimento dell'ora senza fuso orario |
| colore | selezione del colore |
Oltre a quelli sopra elencati, i campi di input possono avere qualsiasi attributo specifico del modulo. Alcuni sono tipi booleani, il che significa che non richiedono valori, ad esempio:
Naturalmente, puoi aggiungerli se ti piace la sintassi in stile XHTML, ad esempio
| Attributo | Descrizione |
| nome | nome del campo di input |
| valore | significato originale |
| controllato | rende selezionata una casella di controllo o un pulsante di opzione |
| lunghezza massima | La lunghezza massima della stringa di testo di input. In HTML5 può essere applicato anche ai campi textarea |
| minlength | Lunghezza minima della linea. Questa funzionalità è documentata, ma al momento in cui scrivo il supporto del browser è debole e i validatori HTML si lamentano. Un caso d'uso alternativo è pattern=".(3,)", che controllerà la presenza di almeno tre caratteri nella stringa di input |
| segnaposto | suggerimento discreto all'interno del campo |
| messa a fuoco automatica | imposta il focus sull'elemento specificato (visibile) quando la pagina viene caricata |
| necessario | indica che è necessario inserire un valore nel campo (non un campo vuoto) |
| modello | controlla un valore rispetto a un'espressione regolare |
| min | valore minimo consentito (numerico e data) |
| massimo | valore massimo consentito (numerico e data) |
| fare un passo | fase di modifica del valore. Ad esempio, input type="number" min="10" max="19" step="2" consentirà solo valori di 10, 12, 14, 16 o 18 |
| completamento automatico | Indica al browser un suggerimento per il completamento automatico, ad esempio "conto corrente", oppure può essere impostato su "on" o "off" per abilitare/disabilitare il completamento automatico |
| Modalità di immissione |
indica il metodo di input. Funzionalità più utili:
|
| misurare | dimensione in numero di caratteri per campi come testo o password o numero di pixel per campi come email, telefono, URL o ricerca. Probabilmente vale la pena evitare e utilizzare lo stile CSS |
| righe | Numero di righe di testo (solo textarea) |
| col | numero di righe di caratteri (solo textarea) |
| elenco | si riferisce a un elenco di opzioni |
| controllo ortografico | impostato su true o false per abilitare/disabilitare il controllo dell'assegnazione per un campo |
| modulo | ID del modulo a cui appartiene questo campo. In genere, i campi dovrebbero essere posizionati all'interno del modulo, ma questo attributo ti consente di posizionare il campo all'esterno del modulo, in qualsiasi punto della pagina |
| formazione | specifica un URI che sovrascrive l'azione del modulo durante l'invio dei dati (solo per i pulsanti di invio/immagine) |
| metodo | specifica GET o POST, sovrascrive l'attributo del metodo del modulo (solo per i pulsanti di invio/immagine) |
| formantype | specifica il tipo di contenuto al momento dell'invio (testo/semplice, multipart/form-data o application/x-www-form-urlencoded, solo per pulsanti e immagini di invio) |
| formtarget | specifica la finestra/cornice di destinazione per sovrascrivere l'attributo di destinazione del modulo al momento dell'invio (solo per pulsanti/immagini di invio) |
| sola lettura | il valore del campo non può essere modificato, anche se verrà convalidato e inviato |
| Disabilitato | disabilita il campo di input: non verrà inviata alcuna convalida e nessun dato |
Tieni presente che i campi data devono utilizzare il formato AAAA-MM-GG per gli attributi valore, minimo e massimo.
L'esempio seguente mostra un campo che richiede un'e-mail che termina con @miosito.com, su cui l'attenzione si sposta quando viene caricata la pagina.
Elenchi dati
L'elenco dati contiene un insieme di valori adatti per qualsiasi tipo di campo, ad esempio:
Se datalist è supportato, il browser fornisce un elenco di valori da completare automaticamente non appena inizi a digitare i dati in un campo. L'elenco completo viene solitamente visualizzato facendo clic sulla freccia giù (se presente). A differenza di un elenco a discesa standard, l'utente può inserire valori arbitrari nel campo.
È possibile specificare valori e spiegazioni testuali per i valori, ad esempio:
Internet Explorer
ma vale la pena ricordare che l'implementazione differisce a seconda del browser. Ad esempio, Firefox completa automaticamente il testo (Internet Explorer), mentre Chrome completa automaticamente i valori (IE) e il testo è indicato con un carattere grigio più piccolo:
Gli elenchi di dati possono essere popolati utilizzando JavaScript se desideri riceverli tramite AJAX.
Disabilitazione della convalidaPuoi disabilitare la convalida dell'intero modulo impostando l'attributo novalidate sull'elemento del modulo. Inoltre, puoi impostare l'attributo formnovalidate sul pulsante/immagine di invio del modulo.
Ricorda che l'impostazione dell'attributo disabilitato su un campo disabiliterà la convalida di quel campo.
Campi di outputAbbiamo discusso i campi di input in precedenza, ma HTML5 fornisce anche campi di output.
- output: il risultato del calcolo delle azioni dell'utente
- progress - barra di avanzamento (gli attributi valore e massimo impostano lo stato)
- metro - una scala che può cambiare colore tra verde, giallo e rosso a seconda dei valori impostati degli attributi valore, minimo, massimo, basso, alto e ottimale
Secondo le specifiche, ogni elemento del modulo è considerato un paragrafo ed è separato dalle altre parti dall'elemento
Interessante. Utilizzo i div per scopi di separazione, anche se dubito che faccia molta differenza. Il tag p è più corto, tranne per il fatto che è necessario applicare uno stile aggiuntivo per rimuovere i margini.
Ancora più importante, le etichette devono essere utilizzate circondando l'elemento del modulo o posizionandole una accanto all'altra e collegandole con un attributo for ai campi corrispondenti, ad esempio:
Nome
Cognome
Indirizzo e-mail
Iscriviti alla nostra Newsletter
I controlli non sono standardizzatiNon esistono linee guida di progettazione per gli elementi del modulo che i produttori di browser debbano seguire. Questo è intenzionale: l'elemento del modulo di selezione della data standard orientato al mouse potrebbe essere troppo piccolo per un utente di dispositivo mobile, quindi il produttore può occuparsi di creare una versione alternativa dell'elemento del modulo per le interfacce touch.
Supporto del browserNon tutti i tipi di campo e gli attributi sono supportati in tutti i browser. In generale, tutti i browser moderni a partire da IE10+ includono il supporto per tipi di campi di base come email o campi numerici. Ma al momento in cui scrivo, i campi data/ora sono supportati solo nei browser basati sui motori Webkit e Blink.
Per i tipi di campo non supportati, il browser utilizzerà un campo di input di testo standard e ignorerà gli attributi non supportati e i relativi valori.
Utilizzare sempre il tipo corretto!È importante utilizzare il tipo di campo corretto per il tipo di dati di input previsto. Potrebbe sembrare ovvio, ma ci saranno situazioni in cui sarà necessario utilizzare un semplice campo di testo.
Diamo un'occhiata alle date. Il supporto del browser è irregolare, il che porta a sfide di implementazione.
Una soluzione semplice sarebbe quella di smettere di utilizzare il campo data HTML5, ripristinare un campo di testo e implementare il proprio controllo della data. Non farlo. Non creerai mai un selettore di date adeguato che funzioni su tutti i dispositivi, con tutte le risoluzioni dello schermo, supporti tastiera, mouse e tocco e continui a funzionare con JavaScript disabilitato. Inoltre, i browser mobili dispongono di strumenti propri per l'elaborazione dei controlli progettati per il controllo touch.
I tipi di campi di input HTML5 sono il futuro. Usateli e, se necessario, usate un sostituto JavaScript in situazioni che richiedono una buona compatibilità tra browser. Ma ricorda cosa è richiesto...
Convalida lato serverLa convalida lato browser non è garantita. Anche se costringi tutti a eseguire l'aggiornamento all'ultima versione di Chrome, non puoi comunque evitare:
- bug del browser o errori JavaScript che consentono il passaggio di dati errati
- utenti che modificano il DOM o gli script utilizzando gli strumenti del browser
- invio di dati da sistemi che non controlli
- intercettazione dei dati nel percorso dal browser al server (solitamente tramite HTTP)
La convalida lato client non è mai stata e non sostituirà mai la convalida lato server. La convalida dei dati utente sul lato server è di grande importanza. La convalida lato client è un'ulteriore funzionalità utile.
Infine, ricordiamo che le date possono essere ottenute in vari formati, siano essi AAAA-MM-GG, MM-GG-AAAA, GG-MM-AAAA e altri. Controlla i numeri nei primi quattro caratteri o, se necessario, utilizza gli strumenti di analisi e controllo integrati del linguaggio/framework utilizzato.
In questo articolo ho parlato di molti aspetti del markup dei moduli HTML5. Nel prossimo articolo esamineremo le proprietà CSS relative ai moduli.
Al momento della stesura di questo documento, il supporto per tutti i nuovi moduli, elementi di input, attributi e tipi è altamente specifico del browser. L'implementazione della stessa funzione nei diversi browser può differire in modo significativo. Detto questo, il panorama del supporto dei moduli HTML5 sta cambiando rapidamente e continua a migliorare. Al momento in cui scrivo, le tabelle più aggiornate sono queste, che forniscono informazioni dettagliate sul supporto dei moduli HTML5 da parte di vari browser.
Panoramica delle innovazioni Nuovi elementiHTML5 introduce cinque nuovi elementi relativi all'immissione dei dati e ai moduli.
| progresso | Rappresenta lo stato di avanzamento di un'attività. | L'elemento progress può rappresentare lo stato di download di un file. |
| metro | Rappresenta un valore scalato all'interno di un intervallo noto. | L'elemento contatore può essere utilizzato ad esempio per misurare la temperatura o il peso. |
| datalist | Rappresenta un insieme di elementi opzione che possono essere utilizzati in combinazione con il nuovo attributo list per creare menu a discesa. | Quando l'utente va ad inserire i dati nell'area associata alla lista dati, appare un menu a tendina con i valori della lista dati. |
| keygen | Un controllo per la creazione di coppie di chiavi. | Quando invii un modulo, la chiave privata viene archiviata nell'archivio locale e la chiave pubblica viene inviata al server. |
| produzione | Visualizza i risultati del calcolo. | Un esempio di utilizzo dell'elemento di output potrebbe essere quello di visualizzare la somma dei valori di due elementi di input. |
HTML5 introduce 13 nuovi elementi di input. Nei browser che non li supportano, diventano normali elementi di input di testo.
| tel | Immissione di un numero di telefono. | L'elemento tel non forza l'immissione del testo in un formato specifico: è possibile utilizzare l'elemento pattern o il metodo setCustomValidity() per fare ciò, che esegue una convalida aggiuntiva. |
| ricerca | Richiede all'utente di inserire il testo da trovare. | La differenza tra ricerca e testo sta principalmente nel design. Per il tipo di ricerca, il campo di input può essere progettato in conformità con i campi di ricerca di una determinata piattaforma. |
| URL | Inserisci un URL. | L'elemento url viene utilizzato per inserire un singolo URL assoluto che rappresenta un intervallo di valori abbastanza ampio. |
| Inserisci un singolo indirizzo email o un elenco di indirizzi. | Se viene specificato l'attributo multiple, è possibile inserire più indirizzi email separati da virgole. | |
| appuntamento | Inserisci la data e l'ora nel fuso orario UTC. | |
| data | Inserimento di una data senza fuso orario. | |
| mese | Inserisci una data con anno e mese, ma senza fuso orario. | |
| settimana | Inserisci una data composta da un numero di settimana e un anno, ma senza fuso orario. | Un esempio di questo formato è 2011-W05 per la quinta settimana del 2011. |
| tempo | Inserisci l'ora con ore, minuti, secondi e frazioni di secondo, ma senza fuso orario. | |
| datetime-locale | Inserimento di data e ora senza fuso orario. | |
| numero | Immissione di dati numerici. | I valori validi sono numeri in virgola mobile. |
| allineare | Immissione di dati numerici (a differenza del tipo di numero, il numero in sé non ha importanza). | L'implementazione di questo controllo dell'intervallo nella maggior parte dei browser che lo supportano è un dispositivo di scorrimento. |
| colore | Selezione di un colore utilizzando la ruota dei colori. | Il valore deve essere un colore semplice minuscolo valido, ad esempio #ffffff. |
HTML5 introduce anche diversi nuovi attributi per gli elementi di input e di modulo.
| messa a fuoco automatica | Concentra l'input su un elemento quando la pagina viene caricata. | L'attributo autofocus può essere applicato agli elementi input, select, textarea e button. |
| segnaposto | Indica all'utente il tipo di dati da inserire. | Il valore segnaposto viene visualizzato in testo chiaro finché l'elemento non viene evidenziato e l'utente immette i dati. Questo attributo può essere specificato sugli elementi input e textarea. |
| modulo | Specifica uno o più moduli a cui appartiene l'elemento di input. | Con l'attributo form, puoi posizionare elementi di input ovunque nella pagina, non solo nell'oggetto form. Inoltre, un singolo elemento può essere associato a più moduli. |
| necessario | Un attributo booleano che indica che l'elemento è obbligatorio. | L'attributo obbligatorio è utile quando si esegue la convalida basata su browser senza utilizzare codice JavaScript speciale. |
| completamento automatico | Permette di specificare che il campo non deve utilizzare il completamento automatico e non deve sostituire i valori precedentemente inseriti dall'utente. | L'attributo di completamento automatico è utile per campi come il numero di carta di credito o la password monouso che non devono essere completati automaticamente. Per impostazione predefinita, l'attributo di completamento automatico è attivato. Per disabilitarlo, impostalo su off. |
| modello | Verifica del valore di un elemento in base a un'espressione regolare. | Se viene utilizzato l'attributo pattern, dovresti fornire anche un valore titolo che descriva all'utente il modello di input previsto. |
| nome | Progettato per inviare informazioni sulla direzione del controllo insieme al modulo. | Ad esempio, se l'utente ha inserito il testo da destra a sinistra e l'elemento di input contiene l'attributo dirname, il parametro direzione verrà inviato insieme al valore immesso. |
| novalidate | Se questo attributo è specificato su un elemento del modulo, la verifica dell'invio del modulo è disabilitata. | |
| formazione | Sostituire l'attributo action su un elemento del modulo. | |
| formantype | Sostituire l'attributo enctype su un elemento del modulo. | Questo attributo è supportato sugli elementi input e pulsante. |
| metodo | Sostituire l'attributo del metodo su un elemento del modulo. | Questo attributo è supportato sugli elementi input e pulsante. |
| formnovalidate | Sostituire l'attributo novalidate su un elemento del modulo. | Questo attributo è supportato sugli elementi input e pulsante. |
| formtarget | Sostituire l'attributo target su un elemento del modulo. | Questo attributo è supportato sugli elementi input e pulsante. |
Uno dei miglioramenti alla tecnologia XMLHttpRequest è l'introduzione dell'oggetto FormData. Con FormData, puoi creare e inviare set di coppie chiave/valore e file utilizzando XMLHttpRequest. Quando si utilizza questo metodo, i dati vengono inviati nello stesso formato del metodo send() del modulo con il tipo di codifica multipart/form-data .
L'oggetto FormData consente di creare rapidamente moduli HTML in JavaScript e inviarli utilizzando il metodo XMLHttpRequest.send(). Di seguito è riportato un semplice esempio.
Var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", somefile) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://qualcosa.url/"); xhr.send(formData);
È inoltre possibile utilizzare l'oggetto FormData per immettere dati aggiuntivi in un modulo esistente prima di inviarlo.
Var formElement = document.getElementById("someFormElement"); var formData = new FormData(formElement); formData.append("part_description", "La parte migliore di sempre!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://qualcosa.url/"); xhr.send(formData);
Verifica basata su browserCerto, controllare i dati dei moduli è un compito piuttosto noioso, ma non può essere evitato. Oggi, lato client, viene solitamente utilizzato il codice JavaScript o una libreria speciale per verificare la validità dei dati inseriti e la loro presenza nei campi obbligatori del modulo prima del loro invio.
Nuovi attributi di input come require e pattern , combinati con i selettori di pseudo-classe CSS, semplificano la scrittura dei controlli e la fornitura di feedback agli utenti. Esistono altri metodi di convalida avanzati che consentono di utilizzare il codice JavaScript per specificare regole e messaggi personalizzati, nonché determinare se un elemento non è valido e perché non è valido.
attributo richiestoSe viene specificato l'attributo obbligatorio, il campo deve contenere un valore al momento dell'invio del modulo. Di seguito è riportato un esempio di campo di immissione dell'indirizzo e-mail obbligatorio che verifica se il valore immesso è un indirizzo e-mail valido, come descritto.
attributo del modello
L'attributo pattern specifica l'espressione regolare utilizzata per convalidare il campo di input. Questo esempio mostra un campo di immissione testo obbligatorio per un numero di parte. Si presuppone che tale numero sia composto da tre lettere maiuscole e quattro numeri. L'utilizzo degli attributi obbligatorio e modello consente di garantire che un valore immesso in un campo corrisponda a questo formato. Se l'utente passa il mouse sul campo, viene visualizzato un messaggio nell'attributo titolo.
Modificando leggermente l'esempio precedente, è possibile evidenziare il campo di input in rosso se viene inserito un codice articolo non valido. Tutto quello che devi fare è aggiungere uno stile CSS che inserisca il campo di input in una cornice rossa se il valore non è valido.
:non valido ( bordo: 2px solido #ff0000; )
attributo formnovalidateL'attributo formnovalidate può essere applicato agli elementi input e pulsante. Include la verifica dell'invio del modulo. Di seguito è riportato un esempio in cui l'invio di un modulo utilizzando il pulsante Invia richiede un valore valido, ma l'invio utilizzando il pulsante Salva non ne richiede uno.
API di controllo dei vincoli
L'API Constraint Check fornisce strumenti utili per eseguire controlli specifici. Permette di risolvere problemi come impostare un errore personalizzato, verificare la validità di un elemento e determinare il motivo della sua invalidità. Di seguito è riportato un esempio che genera un messaggio di errore personalizzato se i valori in due campi non corrispondono.
Email: Ripeti indirizzo email: funzione check(input) ( if (input.value != document.getElementById("email_addr").value) (input.setCustomValidity("I due indirizzi email devono corrispondere."); ) else ( / / l'input è valido -- reimposta il messaggio di errore input.setCustomValidity(""); ) )
AssembleaDi seguito è riportato un esempio di modulo di richiesta di prenotazione che utilizza diversi tipi di elementi di input, convalida del modulo, selettori e stili CSS.
