Elementi di un form HTML

Questo è il post #28 di 31 nella serie “HTML 101 - Le basi”

In un applicazione tradizionale, un form è una pagina Web o una parte della pagina Web che contiene elementi in cui l’utente può inserire dei dati. Una volta che i dati sono stati inseriti nel form, vengono inviati al server. I dati vengono processati dal server e la nuova pagina viene ritornata e renderizzata dal client.

Quando navighiamo, attraverso un browser, ad una specifica pagina o risorsa web, la richiesta che punta all’URL definito dalla risorsa, viene inviata al corretto web server nella forma di richiesta HTTP (o HTTPS se stiamo sfruttando un layer di trasporto sicuro).
Il web server risponde con una risposta che, nel caso in cui la risorsa richiesta dal client esiste, conterrà il contenuto del documento HTML che verrà renderizzato dal browser.

Se una pagina web contiene un form, quando il form viene sottomesso, un altra richiesta HTTP viene inviata al server.
La richiesta contiene un URL esattamente come la precedente ma inoltre include i dati inseriti nei campi del form stesso. Questi dati possono essere inclusi nel body della richiesta o possono essere inviati come parametri nella string URL.

Form Web

Forms sono sicuramente uno degli aspetti più cruciali di qualsiasi sito web commerciale in quanto, senza forms non è possibile avere alcun tipo di transazione.

Attività commerciali richiedono l’uso di forms al fine di catturare dettagli degli utenti, per esempio, quando creiamo nuovi account per gli utenti o quando consentiamo agli utenti di selezionare dettagli del volo per la prenotazione delle loro vacanze, etc..

Considerando quello che abbiamo appena detto, ci rendiamo conto che la capacità di sviluppare form complessi è uno skill essenziale di ogni sviluppatore web.

Come funziona un form web

Abbiamo chiarito che un form web ha lo scopo di consentire all’utente, di inviare delle informazione ad un server e a questo punto abbiamo due possibilità, possiamo salvare i dati inviati o possiamo farci qualcosa.

Vediamo come può essere graficamente rappresentato un processo di sottomissione di un form web e descriviamone i passi:

Il form, dopo essere stato compilato dall’utente e prima dell’invio, passa una fase di validazione lato front-end, in cui viene verificato.
Vengono controlati che i dati sia congruenti a quelli che ci aspettiamo come per esempio nel caso di un modulo di contatto, che il il nome dell’utente e l’email siano stati inseriti e che l’email rispetti il formato corretto.

Questa fase di validazione viene essenzialmente fatta per evitare di fare chiamate al server remoto se già siamo in grado di dire che i dati nel form non sono corretti.

Se passiamo la fase di validazione lato front-end, i dati vengono inviati al server. Il server eseguirà nuovamente una validazione dei dati perché potrebbero essere stati modificati da qualcuno con intenzioni non lecite, essenzialmente il back-end non dovrebbe mai fidarsi dei dati che arrivano dal front-end.

Superate queste fasi di validazioni, il server processa i dati sulla base dei requisiti dell’applicazione e alla fine viene ritornato qualcosa al client.

Questo è quello che succede, in maniera molto semplificata, quando un form web viene sottomesso.

L’elemento form

L’elemento form è usato per raggruppare uno o più elementi input con lo scopo d’inviare le informazioni a un server web.

Gli elementi input contenuti all’interno del tag <form>, sono i campi in cui l’utente inserirà i dati. Un form, di solito, conterrà anche degli elementi label che altro non sono che semplici blocchi di testo associati agli elementi input e che meglio ne descrivono il ruolo.

Un altro attributo che quasi sempre è presente, nei classici form web, è action che contiene l’informazione (nella forma di URL) su dove inviare i dati del form.

Uno degli attributi più importanti dell’elemento form è method che definisce il metodo HTTP utilizzato per inviare i dati del form.

Campi di un form

Campi input

L’elemento input è uno dei più utilizzati all’interno di un form web e crea un campo all’interno del quale l’utente può inserire dei dati.

Questo tag richiede l’uso di due attributi, name e type.

L’attributo name attribuisce all’elemento un nome univoco che è richiesto quando sottomettiamo il form. Il motivo per questo è che, quando il form viene inviato, i dati vengono organizzati in coppia chiave-valore e la chiave deve essere univoca.

L’attributo type determina il tipo di dato consentito all’interno di quello specifico elemento. Anche se il valore text per questo attributo è quello più usato, i valori attribuibili all’attributo type sono molti di più.

Un altro attributo spesso utilizzato su un elemento con type uguale text è l’attributo placeholder, il quale aggiunge un testo (in grigio) al campo che solitamente suggerisce all’utente il tipo di testo che dovrebbe essere digitato all’interno del campo.

Per conclude questa breve introduzione, dobbiamo aggiungere che un form dovrebbe avere un campo specifico con lo scopo d’inviare il form al server è che ha un valore specifico per l’attributo type di submit. Quando il browser vede questo particolare tipo di input, genererà un bottone per essere cliccato dall’utente al fine di inviare il i dati del form attraverso il metodo HTTP specificato nell’attributo method all’ URL specificato come valore dell’attributo action.

Vediamo un semplice esempio:

<form name="search-form" method="GET" action="process.php">
  <input type="text" name="search-term" value="Atlantis"/>
  <input type="submit" name="submit" value="Search" />
</form>

La precedente porzione di HTML sarà visualizzata dal browser come segue: Esempio di form in HTML

e al click del bottone Search, i dati del form saranno inviati alla pagina process.php usando il metodo HTTP GET.

Adesso diamo una breve carrellata degli altri elementi che possono essere usati all’interno di un form HTML e poi vedremo come usarli nel video di dimostrazione che trovate alla fine di questa sezione.