Un form è un elemento in HTML perché è ciò che ci permette di inserire dati e quindi interagire anche con il web e il suo database, che richiede controlli dal punto di vista della sicurezza, poiché da un modulo possiamo inviare file a un server, per elaborare un ordine o un pagamento, selezionando diversi elementi e controlli di un modulo, che verrà poi elaborato da un evento javascript o da qualche altro linguaggio di programmazione web.
Molte volte, gli sviluppatori devono utilizzare librerie diverse per poter eseguire attività nei moduli al fine di controllare gli eventi e in alcuni casi dobbiamo ricorrere ad alcuni metodi di codice indesiderati per inviare dati, controllare ciò che viene inserito, evitare iniezioni di codice o attacchi XSS.
Se vogliamo effettuare tutti questi controlli ed eventi possiamo trovare un gran numero di file javascript che aumentano notevolmente il peso del web in kb e rallentano la pagina. Inoltre è insicuro perché se qualcuno disabilita l'uso di Javascript tutti i controlli smetteranno di funzionare.
Gli elementi di forme e attributi in HTML5 forniscono un maggior grado di controllo e markup semantico rispetto alla versione precedente, sono stati aggiunti attributi e proprietà che eliminano la necessità di eseguire controlli esternamente tramite script. Le funzionalità dei moduli in HTML5 forniscono un controllo migliore e non dipendono dal fatto che Javascript sia abilitato o disabilitato nel browser.
Attributi modulo HTML5 - Segnaposto
Per mezzo del proprietà segnaposto Possiamo indicare un esempio del tipo di dati da registrare, questo ci permette di fornire informazioni all'utente che servano da guida. Questo testo che indichiamo all'interno del controllo scomparirà dopo che l'utente avrà inserito un carattere.
L'attributo segnaposto può essere utilizzato solo nelle caselle di testo o nelle aree di testo.
Pattern con espressioni regolari nei form
L'attributo pattern ci consente di definire le nostre regole per convalidare i dati che l'utente inserisce utilizzando le espressioni regolari. Un'espressione regolare è una sequenza di caratteri che definisce un modello di dati, ad esempio, il modello [a-z] indica che l'utente può inserire solo lettere minuscole o il modello [0-9] indica che è possibile inserire solo numeri.
HTML5 consente di utilizzare modelli, quindi se i caratteri inseriti non corrispondono al modello definito automaticamente genererà un errore.
Stiamo andando a definire alcune regole con modelli e fogli di stile per cambiare il colore del bordo se si verifica l'evento non valido, ovvero quanto inserito dall'utente non è conforme a quanto definito in un determinato pattern.
Creiamo un file Esempio01.html e scriviamo il seguente codice:
Pattern con espressioni regolari
Utente
Chiave:
E-mail:
Data
Prezzo
Se inviamo il modulo, convaliderà ogni campo rispetto al modello definito e se non è soddisfatto, mostrerà il messaggio che definiamo nel tag title, utilizzerà anche gli stili definiti nella regola e nelle proprietà CSS della classe non valida utilizzata da HTML5.
Ad esempio inseriamo un'e-mail errata:
Inseriamo anche una data errata e vediamo che non consente l'invio del modulo. Se vogliamo migliorare o aggiungere un effetto visivo, possiamo usare i CSS per aggiungere un'icona di sfondo nel controllo in cui si verifica l'errore. Ad esempio aggiungiamo i seguenti stili css a quelli che avevamo già, cambiamo l'input in input [type = 'text'] in modo che i fogli di stile influenzino solo le caselle di testo e non il pulsante.
Utilizziamo le seguenti icone:
Accanto a ogni controllo aggiungiamo la proprietà richiesta, ad esempio:
Durante l'esecuzione dell'esempio possiamo vedere che se inviamo il modulo con i campi vuoti, ci mostreranno i campi obbligatori e validi.
Il vantaggio dei pattern è che non utilizziamo JQuery o nessun altro tipo di convalida e se questa opzione è disattivata nel browser, le restrizioni e le regole che definiamo continueranno a funzionare. Ciò non implica che inviando il modulo evitiamo controlli durante l'elaborazione dei dati, se salvarli in un database o inviarli per posta o eseguire qualsiasi operazione.
Modulo con più invii
Qualcosa di complesso da fare è inviare lo stesso modulo a due pagine diverseSupponiamo che un singolo form di login che cliccando su un pulsante vada a pagine diverse dove cambiano le query e il processo informativo. Questo viene fatto definendo il proprietà di formazione, dove indichiamo un'altra opzione di elaborazione per l'azione per impostazione predefinita.
Modulo con più invii
Utente:
Chiave:
Non c'è dubbio che l'interazione con questi tipi di proprietà e attributi faciliti notevolmente lo sviluppo di siti web, senza dover utilizzare librerie esterne e codici javascript complessi.
Come designer e sviluppatori, di solito troviamo che uno script ha una certa monotonia per strutturare html e convalidare, in particolare per scrivere regole di convalida e quindi mostrare all'utente quando si verifica un errore. HTML 5 introduce questi nuovi attributi, tipi di input e altri elementi in modo che dobbiamo scrivere meno codice e concentrarci maggiormente sulla semantica che sulla sintassi.
Queste regole funzionano in tutti i browser, indipendentemente dal sistema operativo e non abbiamo bisogno di utilizzare altre librerie o hack per adattarci a diversi sistemi o dispositivi. Abbiamo visto diversi attributi del modulo che aiutano a migliorare l'esperienza dell'utente e a risparmiare tempo di sviluppo. Ci sono alcuni attributi che non funzionano ancora in tutti i browser.
