Navigando su un sito web qualsiasi, ti sarà certamente capitato di imbatterti in un form di contatto:
stiamo parlando di quel “modulo” con dei campi da compilare che rappresenta il primo tassello di una relazione tra te e l’azienda che c’è dietro quel sito web (e viceversa!!)
Sicuramente tu stesso, come tutti noi, ne avrai utilizzato uno, magari per richiedere informazioni su un servizio offerto che ti interessava particolarmente. Capisci bene che si tratta di un elemento fondamentale e che ogni sito web che si rispetti deve disporne, pena l’impossibilità di interazione dell’utente con il sito stesso.
Se decidi di creare un sito web non puoi, quindi, non inserire almeno un form di contatto.
Insomma, quante volte ci è capitato di inserire dei dati per iscriverci ad una newsletter? E quante altre li abbiamo inseriti semplicemente per registrarci su un sito? Quante volte abbiamo commentato il post di un nostro amico su facebook o su instagram?
Bene, se abbiamo fatto almeno una di queste cose è grazie al tag form.
Il tag form, infatti, permette all’utente di inserire dei dati che verranno successivamente inviati ad un’altra pagina che si occuperà di manipolarli e, probabilmente, salvarli in un database.
<form action="https://aulab.it/richiesta-info" method="post"> </form>
Come possiamo vedere, il tag form ha due attributi fondamentali senza i quali non potrebbe mai funzionare: “action” e “method”.
Nell’attributo action inseriamo l’URL dove i dati verranno mandati e manipolati una volta che il contenuto del form verrà inviato.
Nell’attributo method, invece, inseriamo il metodo HTTP con il quale verranno mandati i dati. Abbiamo due possibili valori da inserire in questo attributo :
- GET : con questo metodo i dati verranno processati e ci verrà mostrata una pagina di risposta nel cui URL saranno presenti i dati inseriti sotto questa forma: “https://aulab.it/cerca-nel-sito?q=form”; dopo il punto interrogativo verranno inseriti i dati inseriti dall’utente nel seguente modo :
nome=Mario&email=mario.rossi@aulab.it
Utilizziamo questo metodo quando non vogliamo avere dei side effect ma ci serve avere questi dati per visualizzare una pagina in modo dinamico.
Per fare un esempio pratico provate a leggere l’URL quando cercate quacosa su Amazon.
- POST : con questo metodo i dati verranno mandati al server nel body della richiesta http. Il server, a sua volta, li processerà e li salverà all’interno del database
Vediamo, adesso, altri attributi non obbligatori che possono modificare il comportamento del nostro form.
Enctype
L’attributo enctype indica il tipo di codifica che il browser dovrà fare prima di inviare i dati al server , non è un attributo obbligatorio e può avere tre possibili valori:
- application/x-www-form-urlencoded: Il valore di default del tag form.
- multipart/form-data: dobbiamo inserire questo attributo quando nel form c’è la possibilità di inserire uno o più file.
- text/plain: è stato introdotto con l’html 5 e si utilizza solo per fare debugging.
Autocomplete
Indica se gli elementi di input, all’interno del tag form, possono essere completati automaticamente dal browser.
Può avere due possibili valori autoesplicativi : off e on , con il primo il browser non permetterà l’autocomplete con il secondo invece sì.
Target
Tramite questo attributo possiamo decidere se i dati mandati dal form devono essere mandati attraverso un’altra pagina o restando sulla pagina corrente.
Se inseriamo l’attributo target=”_blank” si aprirà una nuova scheda nel browser una volta inviati i dati.
Tag di Input
All’interno del tag form, per permettere all’utente di inserire dei dati abbiamo bisogno dei tag di input. Ci sono svariati tag di input che possono essere utilizzati in base alle diverse esigenze.
Iniziamo con il tag in assoluto più utilizzato ovvero il tag <input>:
É un “self-closing tag” (un tag autoconclusivo) quindi non ha bisogno di un tag di chiusura; in base all’attributo type si comporterà in modo diverso. Vediamone gli esempi principali :
Type text
<input type="text">
Questo è il più classico dei tag di input nel quale l’utente ha la possibilità di inserire del testo, lo utilizzeremo per far inserire dati testuali all’utente come il nome o la città di provenienza.
Type number
<input type="number">
Impostando il type con number l’utente potrà inserire solo un valore numerico all’interno di questo input e andando sopra con il mouse sulla destra del tag troveremo due frecce per andare ad aumentare o diminuire il valore inserito.
Type email
<input type="email">
Utilizziamo il type email ovviamente per far inserire all’utente una mail.
Type password
<input type="password">
Utilizziamo il type password quando dobbiamo far inserire all’utente una password o un codice che non vogliamo far visualizzare in chiaro; con questo type infatti quando l’utente scriverà all’interno dell’input verranno visualizzati dei pallini al posto dei caratteri inseriti.
Type file
<input type="file">
Utilizziamo il type file quando vogliamo che l’utente possa caricare dei file nel nostro form per mandarli al server; ricordiamoci di inserire l’attributo enctype=”multipart/form-data” all’interno del tag form altrimenti il nostro file non arriverà mai al server.
Type date
<input type="date">
Utilizziamo il type date quando vogliamo far scegliere all’utente una data dal calendario; cliccando su questo input, infatti, si aprirà un calendario dal quale potremo scegliere una data specifica.
Type checkbox
<input type="checkbox">
Utilizziamo questo input quando vogliamo far visualizzare un checkbox all’utente, ad esempio , quando vogliamo far accettare i termini e condizioni o quando vogliamo chiedere l’autorizzazione a mandare email informative.
Serve essenzialmente per rispondere con “SI” o “NO” a un utente.
Type radio
<input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female"> <input type="radio" name="sex" value="other">
Utilizziamo questo input quando vogliamo dare la possibilità all’utente di scegliere tra varie risposte. Andando a dare un attributo name identico a più input radio l’utente avrà la possibilità di selezionare solo uno dei valori, infatti , quando proverà a selezionare un altro degli input radio disattiverà quello precedentemente selezionato.
Il tag select
<select name="course"> <option value="hackademy">Corso Hackademy</option> <option value="hackademy-part-time">Corso Hackademy Part Time</option> <option value="hackademy-weekend-frontend">Corso Hackademy weekend Frontend</option> <option value="hackademy-weekend-backend">Corso Hackademy weekend Backend</option> </select>
Vediamo, adesso, un diverso tipo di input: la select.
Essa darà la possibilità all’utente di selezionare uno dei valori da un menù a tendina.
A differenza di un semplice tag input, il tag select è composto da un tag <select><select/> al cui interno ci sono dei tag <option><option/> che saranno, per l’appunto, le varie opzioni selezionabili dall’utente.
Il tag textarea
<textarea></textarea>
Ultimo campo di input, ma non per importanza , è il campo “textarea” che serve per far inserire all’utente del testo molto lungo, ad esempio la descrizione di un articolo o un messaggio con informazioni aggiuntive indirizzato ai proprietari del sito.
Diversamente dal tag input text questo tag ha sia un tag di apertura che un tag di chiusura.
Attributi generici dei tag di input
Parliamo, adesso, dei generici attributi che possiamo dare ai tag di input per migliorarne il funzionamento e l’accessibilità.
Placeholder
Sicuramente uno dei più utilizzati, possiamo inserire l’attributo placeholder in quasi tutti i tag di input e ci serve per far visualizzare del testo di default quando l’utente non ha ancora inserito dei dati. Ci basterà inserire nel tag la scritta placeholder=”Inserisci qui la tua mail” per far apparire il messaggio all’interno dell’input ancora vuoto; è fondamentale, appunto, perché aiuta a far capire all’utente il dato da inserire in un campo di input.
Name
Questo attributo, a differenza del precedente, non ha un riscontro visivo sul tag di input ma, più che altro, funzionale; conviene, infatti , pensare a questo attributo come obbligatorio quando inseriamo un tag input (anche se non lo è); le sue funzionalità sono molteplici :
- La prima è che il valore inserito all’interno dell’attributo name verrà inviato insieme al valore inserito dall’utente come parte di una coppia chiave-valore e servirà appunto per contraddistinguere il dato inserito a quale campo input fa riferimento.
Senza quest’ultimo è vuoto o non è proprio presente , infatti , il campo di input non verrà mandato una volta inviato il form. - La seconda è che il valore inserito darà al browser la possibilità di inserire l’autocompletamento del campo in base ai dati precedentemente inseriti dall’utente in altri siti e salvati sul browser. Quante volte quando ci stiamo iscrivendo ad un sito il nostro browser ci suggerisce il nostro nome e la nostra mail ? Una comodità non da poco e con pochissimo sforzo, ci basterà dare un nome semantico in inglese al nostro campo di input ad esempio : name , surname , email , address , phone ecc…
Autocomplete
Con questo attributo possiamo specificare il tipo di completamento automatico che il campo di input deve avere. Ci sono veramente tantissime possibilità, dal semplice nome dell’utente al prefisso nazionale. Ma non disperare! Puoi trovare un elenco completo con tutti i valori possibili a questo link.
Value
Quando viene specificato nel tag, questo è il valore iniziale e da quel momento in poi può essere modificato o recuperato in qualsiasi momento utilizzando il linguaggio JavaScript.
L’attributo value è sempre facoltativo, ma dovrebbe essere considerato obbligatorio per checkbox e radio in quanto questo valore sarà quello mandato al server nel caso in cui questi ultimi fossero selezionati.
Ci sono, infine, tantissimi altri attributi che servono, principalmente, per la validazione del form come required , max , min , minlength ,maxlength. Questi indicheranno un errore se proviamo ad attuare il submit del form senza rispettare i valori che vi abbiamo inserito.
Solitamente, però, ad oggi non vengono più utilizzati perchè sono facilmente modificabili dall’utente agendo sull’html: la validazione del form, difatti, viene fatta principalmente lato server.
Citiamo infine un importantissimo tag che non è tra quelli di input ma va sempre accoppiato ad uno di loro: il tag label.
<label for="name">Inserisci il tuo nome</label> <input type="text" id="name" name="name" placeholder="Mario rossi">
Associare una label al tag input offre alcuni vantaggi fondamentali per l’accessibilità del nostro sito
Il testo del tag label non è associato solo visivamente al corrispondente input di testo, ma anche programmaticamente.
Ciò significa che, ad esempio, uno screen reader leggerà l’etichetta quando il fruitore è posizionato sull’input del form, rendendo più facile per un utente che utilizza tecnologie assistive capire quali dati devono essere inseriti.
Inoltre, quando l’utente fa clic o tocca un’etichetta, il browser passa il focus all’input associato. L’aumento dell’area di messa a fuoco dell’input offre un vantaggio a chiunque cerchi di attivarlo, compresi coloro che utilizzano un dispositivo touch-screen.
Associare un tag label ad un tag input è estremamente facile: basterà aggiungere al tag input un attributo id che dovrà essere univoco all’interno della pagina html, e aggiungere un attributo for al tag label con all’interno il valore dell’id dell’input correlato.
Perfetto! Abbiamo quasi finito, non ci resta che inviare i dati. Come? Inserendo un button con l’attributo type=”submit” al cui click i dati verranno inviati.
<button type="submit">Invia i dati</button>
