Form di un sito web: da quali elementi è composto e come progettarlo

Un form (o modulo in italiano) è un sistema che permette di raccogliere dei dati attraverso una pagina web. Per questo motivo rappresenta una “tecnologia” indispensabile per molti siti. Sono form i moduli dove inserisci username e password oppure dove lasci i dati quando compi un acquisto on line.

In questo articolo vedrai quali possibilità possono offrirti, in quali casi potresti utilizzarli e come progettarli al meglio dal punto di vista dell’usabilità utente e del design.

Cos’è un form

I form sono dei semplici controlli scritti in linguaggio HTML che vengono usati per raccogliere informazioni dai visitatori del sito web. Possono includere caselle di testo in cui le persone possono digitare, caselle di riepilogo in cui le persone possono fare una scelta, caselle di controllo che possono essere accese o spente, e così via.

I form sono esistiti quasi fin dagli albori del web e sono cambiati poco dal secolo scorso. Non è passato molto tempo però che il web passasse da una rete di pagine da leggere a un luogo dove si va per fare cose: fare acquisti, prenotare biglietti aerei, firmare petizioni, cercare un sito, pubblicare un tweet… e la lista continua. I moduli web gestiscono tutte queste interazioni.

L’ultima versione di HTML, HTML5, ha introdotto una nuova serie di controlli legati ai form. Tutto questo si traduce in una maggiore facilità di inserire dati come numeri di telefono, indirizzi e-mail, URL, colori, valori all’interno di intervalli, e molto altro ancora, limitando così la necessità di utilizzare codice JavaScript. Questo ha il vantaggio che gli utenti non devono scaricare librerie aggiuntive, ma tutto viene gestito nativamente attraverso il browser, incrementando le performance dei siti.

Come funziona un form

I form sono presenti in tutto il web: permettono di accedere all’account di posta elettronica, recensire prodotti, e fare transazioni bancarie. Lo spazio in cui digiti i termini di una ricerca su Google è un form.

Tutti i form funzionano allo stesso modo. In una struttura tipica di un form (o web form o modulo), un visitatore immette alcune informazioni riempiendo dei campi e al termine dell’inserimento clicca un bottone Invio. I dati inseriti dall’utente vengono quindi inviati a un server per ulteriori elaborazioni, come salvare i dati in un database o restituire un messaggio di errore se qualche valore non è conforme, per esempio se la password digitata non corrisponde a quella dell’utente.

Un form è quindi costituito da due parti. 

1. Il primo componente è costituito dal codice HTML della pagina, vale a dire dalla parte visibile del modulo: bottoni (pulsanti), campi di testo, tasti “sfoglia”, elenchi a tendina (drop-down), caselle (checkbox), etichette dei campi e testi. In questa parte vengono raccolte le informazioni dai visitatori del sito. Questa è la parte del form che gli utenti vedono sulle pagine web.
2. Il secondo componente è l’applicazione sul server che processa (vale a dire elabora) le informazioni raccolte e genera una risposta che invia al browser. La scrittura di codice per questo tipo di applicazioni richiede conoscenze di programmazione. Questa è la parte del form che gli utenti non vedono.

Nel resto dell’articolo parlerò quasi esclusivamente della parte del form che “si vede”, il primo componente di un modulo web. Tuttavia è bene conoscere quello che succede “dietro le quinte”, una volta che hai cliccato il pulsante “Invia”.

Terminata la compilazione di un form, il browser raccoglie le informazioni inserite, le codifica e le invia all’applicazione web sul server. L’applicazione web accetta le informazioni e le elabora (ovvero, fa ciò che è programmata per fare con esse), per esempio aggiunge l’indirizzo dell’utente a una newsletter. L’applicazione web restituisce anche una risposta. Il tipo di risposta inviata dipende dallo scopo del modulo. Nel caso della registrazione a una newsletter, la risposta è una semplice pagina web che ringrazia per l’iscrizione alla lista. Altre applicazioni potrebbero rispondere ricaricando la pagina del modulo con le informazioni aggiornate oppure generare un messaggio di errore se il modulo non è compilato correttamente, per citare solo alcuni esempi. Il server invia la risposta dell’applicazione web al browser, dove viene visualizzata.

I metodi dell’invio delle informazioni del form al server

Nella terminologia di un form, il metodo specifica come le informazioni verranno inviate al server.

Esistono solo 2 metodi possibili: il metodo GET (il metodo predefinito se non viene specificato nulla) e il metodo POST.

Il metodo GET

Con il metodo GET, i dati del modulo vengono passati in chiaro al server tramite un URL. In pratica le informazioni del form vengono spedite al server aggiungendole alla destra dell’URL del sito. Un punto interrogativo separa l’URL dai dati. Esempio: https://www.google.it/search?q=html5. Per questo motivo GET è il metodo più usato dai motori di ricerca.

Il metodo GET è appropriato se si desidera che gli utenti siano in grado di salvare nei preferiti i risultati dell’invio di un modulo (ad esempio un elenco dei risultati di ricerca).

Poiché il contenuto del form è in bella vista, GET non è appropriato per moduli con informazioni personali o finanziarie private. Inoltre, GET non può essere utilizzato quando il modulo viene utilizzato per caricare un file.

Infine, il metodo GET non è appropriato se l’invio del modulo esegue un’azione, come eliminare qualcosa o aggiungere dati a un database, perché se l’utente torna indietro, i dati del form verranno inviati inviato nuovamente.

Il metodo POST

Con il metodo POST, il browser invia i dati del modulo al server tramite una richiesta separata. In questo modo le informazioni contenute nel modulo non appaiono nell’URL, ma sono visibili soltanto al server.

In teoria, solo il server vede il contenuto di questa richiesta, per cui POST è il metodo migliore per l’invio di informazioni che non devono essere visibili, come le informazioni delle carte di credito o le informazioni personali. Assicurati che HTTPS sia abilitato sul tuo server in modo che i dati dell’utente siano crittografati e inaccessibili durante il trasferimento.

Il metodo POST è preferibile anche quando devi inviare molte informazioni attraverso un form, come una grossa quantità di testo, perché non c’è un limite di caratteri come per il metodo GET.

Gli elementi del form di un sito

Esaminati gli aspetti più tecnici di un modulo, in questa sezione ti illustrerò l’essenza vera e propria dei form: i controlli, vale a dire gli elementi che lo costituiscono.

HTML5 prevede una ventina di controlli. Lo scopo di ognuno è quello di permetterti di raccogliere le informazioni degli utenti nel modo migliore.

I principali elementi di un form sono i campi di testo, i bottoni e le caselle. Poi esistono anche altri controlli con funzioni particolari.

Conoscere i possibili controlli di un modulo ti permette di progettare un form di raccolta informazioni con maggiore consapevolezza ed efficacia.

Controlli per l’inserimento di testo

Gli elementi di un form che forniscono a un visitatore la possibilità di inserire un testo sono tra i controlli più usati. Si dividono in due tipi: campi di testo che permettono di inserire contenuti su una sola riga (campi di testo a riga singola) e campi di testo che permettono di inserire contenuti su più righe.

Se il tuo modulo ha campi di inserimento testo, è necessario utilizzare il protocollo sicuro HTTPS per proteggere il contenuto inserito dall’utente mentre i loro dati sono in transito verso il server.

Campo di testo a riga singola

Uno dei tipi di input per moduli più semplici è il campo di inserimento testo.

Questo elemento mostra una riga in cui l’utente può digitare del testo.

Per impostazione predefinita, gli utenti possono digitare in un campo di testo un numero illimitato di caratteri, indipendentemente dalla sua dimensione (il display scorre verso destra se il testo supera la larghezza dei caratteri del riquadro). È possibile impostare un limite massimo di caratteri.

Campi di testo su più righe (aree di testo)

Fornisce ai visitatori la possibilità di inserire dei contenuti più lunghi di quelli che stanno in una sola riga, come per esempio il campo per l’invio di commenti in un blog o quello per l’invio di richiesta informazioni in un form di contatti.

Questo controllo appare come un riquadro di inserimento testo multilinea e scorrevole quando viene visualizzato dal browser.

Delle barre di scorrimento appariranno nel caso in cui l’utente digiti più testo di quanto sia possibile nello spazio allocato.

Se non specificato diversamente, il numero massimo di caratteri accettati nell’area di testo è 32.700.

Campi di Inserimento testo specifici

Oltre ai controlli di testo generici visti sopra, HTML5 ha previsto una serie di diversi tipi di input per inserire specifici tipi di informazione come password, termini di ricerca, indirizzi e-mail, numeri di telefono e URL.

La specifica HTML5 non prescrive come i browser debbano visualizzare questi specifici controlli ma la cosa interessante è che i browser possono fornire funzionalità aggiuntive a questi campi. Per ora queste funzionalità sono implementate soprattutto dai browser mobili che mostrano tastiere virtuali diverse a seconda del tipo di campo. Per esempio Safari su iOS visualizza tastiere diverse a seconda del tipo di campo specificato (URL, indirizzo e-mail, telefono), in modo da facilitare l’immissione dei caratteri all’utente.

Alcuni di questi tipi di input implementano nativamente un sistema di convalida dei dati. Ciò significa che questo codice obbliga il browser a eseguire un controllo sull’adeguatezza del contenuto digitato dall’utente, senza la necessità di ricorrere a JavaScript. È il tipo di campo che determina quale tipo di controllo deve eseguire il browser: se è un campo URL ci si aspetta la digitazione di un indirizzo Internet: se è un campo data ci si aspetta giorno, mese e anno: se è un campo numerico ci si aspettano solo numeri, e così via. Se i dati inseriti non superano la validazione, i browser non inviano i dati all’applicazione sul server web e visualizzano degli alert per invitare l’utente a correggere l’errore.

Campo per l’inserimento di password

Un campo password funziona esattamente come un campo di inserimento testo, eccetto che, durante la digitazione, i caratteri vengono oscurati dalla vista tramite asterischi (*) o pallini (•), o un altro carattere determinato dal browser.

Campo per l’inserimento di solo numeri

HTML5 prevede due tipi di input numerici, numero e range, ideati per facilitare la raccolta di dati numerici, contrariamente alla casella di testo ordinaria che accetta qualsiasi cosa: numeri, lettere, segni di punteggiatura, simboli e anche gli spazi.

Il tipo di input numerico è utile in tutti quei casi in cui l’utente deve inserire esclusivamente cifre, come per esempio codici di avviamento postale, numeri di carte di credito, età o quantità, dato che il browser, incontrando il tipo di input numerico, rifiuterà tutti i caratteri non numerici.

Per il tipo di input numerico il browser fornisce, nella parte destra del campo, un controllo detto spinner, formato da un paio di piccole frecce, una verso l’alto per aumentare il valore e una verso il basso per diminuirlo. Il suo scopo è di facilitare la selezione di un valore numerico specifico. Sebbene lo spinner consenta di aumentare o diminuire il valore, l’utente può sempre digitare il numero direttamente nel campo.

I dispositivi mobili mostrano questo campo come un campo di testo, modificando però la tastiera virtuale associata, che mostrerà in primo piano i numeri per agevolare la compilazione di questo campo.

L’implementazione di cosa accade se l’utente non digita un numero varia a seconda del browser. Per esempio, Firefox circonda il campo di rosso non appena si perde il fuoco del campo, mentre Chrome invece non fornisce alcuna indicazione.

Per gli input di tipo numerico puoi specificare dei valori minimi e massimi permessi dal campo. Puoi impostare anche solo uno dei due valori senza l’altro. Il valore di default del minimo e del massimo è rispettivamente 0 e 100, per cui se questi attributi non vengono specificati, il campo accetterà solo valori compresi tra 0 e 100. Anche lo spinner, quando arriva a “fine corsa”, cioè quando incontra un valore minimo o massimo, non permette più l’aumento o la diminuzione del valore, disabilitando il controllo (la freccia corrispondente diventa grigia e non più attiva).

Sebbene il campo numerico sia creato per accettare qualunque tipo di numero, per impostazione predefinita accetta soltanto numeri interi, vale a dire senza decimali. Questa impostazione può essere modificata.

L’altro tipo di campo che accoglie dati numerici in HTML5 è quello di tipo range (intervallo di valori). La differenza tra numero e range è sostanzialmente di carattere visivo: nel primo caso il browser mostra un campo di testo in cui digitare un valore, mentre per range il browser visualizza un elemento interfaccia di tipo slider che facilita all’utente la selezione dei valori dentro un intervallo specificato. Lo slider è composto da una barra orizzontale e da un puntatore che può essere trascinato lungo la riga orizzontale.

Campo per l’inserimento di indirizzi e-mail

Questo tipo di input permette al visitatore della pagina web di inserire un valore compatibile con la sintassi di un indirizzo e-mail. Il campo esegue un controllo sul dato inserito: se il testo digitato non corrisponde a qualcosa di valido, il campo viene dichiarato invalido e l’utente viene invitato a compilarlo nuovamente.

Perché sia considerato valido, un campo indirizzo e-mail deve contenere il simbolo @ e un punto, deve esserci almeno un carattere prima e dopo la chiocciola e due caratteri dopo il punto. Tuttavia, il campo e-mail passa la convalida se viene lasciato in bianco, a meno che non imposti il campo come obbligatorio.

Il campo può essere impostato per permettere l’inserimento di più indirizzi di posta elettronica, ciascuno separato da una virgola.

Alcuni dispositivi mobili mostrano una tastiera virtuale ottimizzata per l’immissione di indirizzi e-mail, visualizzando tra i tasti principali il tasto “@”.

Campo per l’inserimento di indirizzi Internet (URL)

Questo tipo di input permette al visitatore di inserire un valore compatibile con un indirizzo Internet. Come per il tipo di input e-mail, anche questo campo esegue un controllo di conformità sul dato inserito: se questo non corrisponde a qualcosa di valido, il campo viene dichiarato invalido e l’utente viene invitato a compilarlo nuovamente. 

Come per il tipo di input e-mail, anche per URL alcuni device mobili adattano la tastiera virtuale visualizzata fornendone una per semplificare l’inserimento di valori in questo tipo di campo, per esempio visualizzando tra i tasti principali lo slash (/) e un tasto “.com”. Di solito, tenendo premuto il tasto .com appaiono altre estensioni disponibili.

Alcuni browser mostrano anche un elenco a discesa di suggerimenti di URL, che vengono tipicamente presi dalla storia delle pagine visitate di recente nel browser. 

Campo per l’inserimento di numeri di telefono

Anche in questo caso, come lascia intuire il nome, questo tipo di input permette al visitatore di inserire un valore compatibile con un numero di telefono. L’impiego di questo tipo di input non implica attualmente nessuna forma di validazione dei dati inseriti dall’utente, a causa dei diversi sistemi di codici telefonici accettati nelle varie nazioni: alcuni paesi usano solo numeri, mentre altri incorporano spazi, trattini, segni più e parentesi (per esempio gli Stati Uniti permettono l’uso di lettere e persino di simboli). Per l’esistenza di tutte queste possibilità, HTML5 non impone ai browser di effettuare una convalida sui numeri telefonici: il campo quindi permette l’inserimento di qualsiasi carattere, lettere comprese, e alla fine questo tipo di input risulta in tutto e per tutto uguale a un campo di testo. 

Perché usarlo allora? In primo luogo per aggiungere un pizzico di semantica. Ma il vero e unico vantaggio è la sua visualizzazione sui dispositivi mobili, nei quali verrà mostrata una tastiera virtuale focalizzata sui numeri e che esclude le lettere.

I browser dei computer fissi invece mostreranno un semplice campo di testo. Nei dispositivi mobili la tastiera virtuale mostrata faciliterà l’inserimento dei numeri telefonici, analogamente a quanto accade per i tipi di input e-mail e URL.

Secondo Gabriele Gigliotti, esperto di HTML, “è probabile che in futuro si possa raggiungere qualche interazione con la propria rubrica in modo da facilitare ulteriormente l’inserimento di questo dato.”

Campo per eseguire una ricerca

Una casella di ricerca di solito è destinata a far inserire ai visitatori delle parole chiave che poi un’applicazione del sito utilizza per eseguire una ricerca tra i contenuti disponibili.

Una caselle di ricerca è in tutto e per tutto una semplice casella di testo, ma sebbene questo campo si comporti tale e quale a un campo di testo, alcuni browser lo visualizzeranno in modo leggermente diverso: per esempio sui browser installati su un sistema operativo di casa Apple (OS), il campo verrà visualizzato con gli angoli arrotondati; in altri casi (Safari e Chrome) quando l’utente inizia a digitare dentro una casella di ricerca, appare una piccola icona a forma di X sul lato destro su cui è possibile fare clic per pulire il contenuto del campo.

Radio bottoni e caselle di controllo (checkbox)

Questi due tipi di input servono per permettere ai visitatori di selezionare tra una serie di opzioni predeterminate.

Sia i pulsanti radio (radio buttons) che le caselle di controllo (checkbox) semplificano la scelta per i tuoi visitatori tra le diverse opzioni fornite. Sono simili nel senso che funzionano come piccoli interruttori on/off che possono essere attivati dall’utente. Tuttavia, svolgono funzioni distinte.

La differenza principale è che il radio bottone permette al visitatore di scegliere un solo valore (quando un valore è stato selezionato tutti gli altri vengono disabilitati), mentre con i checkbox se è possibile sceglierne anche più di uno.

Un radio bottone è di solito visualizzato come un cerchietto. In questo caso la selezione è mutualmente esclusiva. Un controllo del modulo composto da una serie di pulsanti radio è appropriato quando è consentita solo un’opzione dal gruppo, come “Sì o No” o “Ritiro o Consegna”. Quando un pulsante radio è “on”, tutti gli altri devono essere “off”. Con i pulsanti radio, può essere selezionato solo un pulsante alla volta e quindi, solo un valore verrà inviato al server.

Con le caselle checkbox invece l’utente può selezionare quante caselle desidera. Questo li rende la scelta giusta per liste in cui è permessa più di una selezione. Le caselle checkbox in genere hanno l’aspetto di quadratini, che possono essere accesi (“flaggati”) o spenti.

Riassumendo, i pulsanti radio sono appropriati quando è consentita solo una selezione mentre le caselle di controllo sono migliori quando gli utenti possono scegliere qualsiasi numero di opzioni, da nessuna a tutte.

Menu

Un altro modo per fornire un elenco di scelte al visitatore del tuo form online è metterle in un menu a discesa o a scorrimento. La differenza è dunque prevalentemente visuale: i menu tendono ad essere più compatti rispetto ai gruppi di pulsanti e alle caselle di controllo.  

Esistono due tipi di menù: drop-down (a discesa) e scroll (a scorrimento). Nel primo caso l’utente può selezionare una sola opzione, mentre nel secondo anche più valori.

All’interno dei menu, le voci possono essere raggruppate in voci omogenee. Pensa per esempio quando devi selezionare una nazione da una lunga lista: può esser utile raggruppare le voci per continente.

In HTML5 esiste un elemento che consente di fornire un menu a discesa di valori suggeriti per qualsiasi tipo di input di testo. Offre all’utente alcuni suggerimenti tra cui scegliere, ma se nessuno viene selezionato, l’utente può comunque digitare il proprio testo.

Controlli per la selezione di file

I moduli web possono raccogliere più di semplici dati.

Uno dei controlli più usati è quello che permette ai visitatori di inviare dei file, selezionandoli dal proprio hard disk o da altre origini.

Ad esempio, una società di stampa potrebbe utilizzare un modulo web per far caricare una grafica per un ordine di biglietti da visita. Una rivista potrebbe utilizzare un modulo per raccogliere foto digitali per un concorso fotografico.

In questo controllo è possibile specificare quali tipologie di file possono essere accettate (audio, video, immagini, pdf…) e permettere di inviare anche più di un file.

L’aspetto dell’area che permette il caricamento dei file varia leggermente a seconda del browser e del sistema operativo, ma è generalmente un pulsante che consente di accedere al sistema di organizzazione dei file sul computer.

Controlli per le date e gli orari

Se hai mai cercato un hotel o un volo online, sicuramente avrai visualizzato un piccolo calendario per scegliere la data della prenotazione.

Puoi implementare questi controlli anche nel form del tuo sito: HTML5 ha definito una serie di nuovi tipi di input inerenti a date e orari. Questi sei nuovi controlli sono utili quando viene richiesto all’utente di inserire una data o un orario, come per esempio una data di nascita o l’orario preferito per una consegna.

La particolarità di questi controlli è che facilitano al visitatore del sito l’inserimento di questo tipo di valori, perché i browser forniscono dei calendari a discesa per la selezione del valore. Questo comportamento ha anche riflessi sulla qualità del valore, perché impedisce agli utenti l’inserimento di valori non formattati correttamente o inesistenti. Inoltre, questo permette di raggiungere l’obiettivo della maggior consistenza della user experience. Tuttavia la visualizzazione di questi campi varia, e molto, a seconda del browser e del sistema operativo del visitatore.

È possibile limitare a un certo intervallo le date che gli utenti possono inserire in questo campo.

Selettore di colore

L’intento di questo tipo di controllo è quello di facilitare al visitatore la scelta di un colore, mostrando un selettore di colore a comparsa (drop-down color picker) per selezionare visivamente un valore di colore, analogamente a quello che accade nei programmi di grafica desktop. Di fatto dovrebbe essere il solito, perché i browser tendono a usare quello nativo del sistema operativo.

Controlli nascosti

È possibile settare nel form dei campi che i visitatori non visualizzano nel browser. Questi campi servono per inviare al server informazioni che non provengono dall’inserimento di dati da parte dell’utente, ma che serviranno all’applicazione che elaborerà i dati inviati con il modulo web.

Proprio per questo motivo in genere la loro posizione all’interno del form è irrilevante.

Bottoni Invia e Reset

Gli ultimi elementi che vedrai in un form on line sono i bottoni “Invia” e “Reset”.

Invia ha la funzione di inviare immediatamente i dati del form al server per l’elaborazione, quando viene cliccato o toccato. Per questo motivo si trova quasi sempre in fondo al form.

Reset riporta il form allo stato iniziale, cancellando tutti i dati immessi. Conviene valutare bene se usarlo o meno perché una pressione accidentale vanifica tutta l’immissione, particolare sempre più vero oggi che vengono effettuati controlli sulla validità del campo durante la registrazione. Per questo motivo il pulsante di reset non viene utilizzato nei moduli tanto comunemente come un tempo.

Conclusioni sui form

Come hai letto, sono molti gli elementi che puoi utilizzare per la progettazione e la realizzazione di un modulo per la raccolta dati su una pagina del tuo sito web.

Oltre a questo lungo elenco di controlli, HTML5 mette a disposizione delle funzioni di base per la validazione dei dati, come campo mancante, valore minimo e massimo, corretta formattazione delle date, aree per il drag and drop dei file da caricare sul server. Resta il fatto questo tipo di verifica è una validazione di basso livello: se hai bisogno di un controllo più accurato, per esempio la verifica dell’esistenza di uno username o la correttezza di una password, è necessario che uno sviluppatore implementi questi aspetti.

Spero che questo articolo ti sia stato utile per comprendere a fondo le potenzialità di un modulo on line. Per altre informazioni puoi scriverci a info@maxmile.it.