I form in HTML

Finora abbiamo visto elementi tutto sommato statici. Esistono però elementi in HTML che permettono all’utente di interagire con la pagina. Questi elementi sono i form. Noti anche moduli in italiano, sono i principali punti d’interazione che l’utente ha a disposizione quando visualizza una pagina web.

Tipicamente l’impiego di questi elementi è legato all’invio di dati al server affinché vengano processati, come ad esempio: l’invio di una mail, piuttosto che la registrazione di un utente e così via. Possono anche essere utilizzati per poter modificare la UI, come ad esempio filtrare un elenco di elementi da un listato e così via.

I form sono composti da dei controlli, chiamati anche widget e più comunemente input. Questi input possono essere di vario tipo e forma. Ma prima di andare ad esaminare la vasta quantità di input che abbiamo a disposizione dobbiamo parlare un attimo del tag che contiene tutti questi elementi.

Il tag

Il tag <form> è il tag principale con il quale possiamo iniziare a costruire un form. Come tag ha degli attributi che dobbiamo tenere a mente, come:

• autocomplete: attiva o disattiva l’autocompletamento sui vari campi all’interno del form. Questa opzione è disattivabile sui singoli input, ma in questo caso agisce da configurazione globale.
• action: indica la destinazione dei nostri file una volta premuto il pulsante d’invio.
• method: indica il verbo HTTP con la quale vogliamo mandare i dati, i valori possibili sono:
  • GET: i dati vengono serializzati nell’URL come parametri
  • POST: i dati saranno inseriti nel payload della richiesta che verrà fatta
• novalidate: in HTML5 abbiamo dei controlli che possiamo usare per validare i campi di un form, con questo attributo disattiviamo questo meccanismo. Questo può essere utile se usiamo JavaScript.
• name: se usato, questo attributo farà in modo che il form abbiamo ruolo form. Questo ruolo permette di identificare un gruppo di elementi che offrono funzionalità simili ad un form. Diciamo che è estremamente raro che questo attributo serva su un form.

Dentro ad un form cosa ci troviamo? Vari elementi, a partire dalle etichette dei vari campi. Vediamole nel dettaglio

Etichettare i campi con

<label> è il tag che ci permette di etichettare i campi. Purtroppo tante volte questo è anche il tag che viene sacrificato in favore di un design più pulito. Il mio consiglio è quello di mantenerle sempre e se proprio non si può fare a meno di toglierle nascondile, in questo modo il testo della label sarà ancora accessibile per gli screen reader.

Usare <label> ha i suoi vantaggi, come:

• Avere un collegamento non solo visuale, ma anche programmatico
• Quando l’utente clicca la label il browser evidenzia il campo collegato

Questo è possibile grazie all’uso dell’attributo for, il quale permette di collegare la label al campo attraverso l’attributo id dell’input.

Le <label> tra le altre cose le possiamo trovare scritte in due modi: esplicite, implicite.

Esplicite sono quelle label che usano l’attributo for in questo modo:

1<label for="username">Username</label>
2<input type="text" name="username" id="username" />

Mentre le label implicite sono quelle che includono al loro interno sia il testo dell’etichetta che l’input, in questo modo:

1<label>
2   Username
3   <input type="text" name="username" />
4</label>

Per quanto concerne l’accessibilità mi sono già espresso sulla best practice di non ometterle completamente per scelte di design, ma piuttosto di nasconderle. In questo modo gli screen reader avrebbero a disposizione comunque la label e il tuo bellissimo design sarebbe comunque accessibile. Per quanto io rimango dell’idea che le label debbano essere visibili.

Inoltre, gli elementi interattivi come bottoni e link potrebbero disturbare gli screen reader. Questo accade anche con gli heading (h1-h6), quindi evita di annidare tag come <a>, <button>, <h1>-<h6> in una label.

1<input type="checkbox" name="privacy" id="privacy" />
2   <label for="privacy">Dichiaro di aver preso visione della privacy policy e di accettarla integralmente</label><a href="privacy.html">Consulta la privacy policy</a>

Gli input in HTML

Giunti a questo punto è decisamente opportuno introdurre gli input. Ce ne sono principalmente tre:

• <input>
• <textarea>
• <select>

Deluso? Pensavi fossero molti di più? Allaccia le cinture perché è qui che inizia il divertimento.

Il tag input

Elemento cardine dei form, <input> ha la bellezza di ventidue valori possibili dell’attributo type e grazie a questo possiamo costruire form veramente molto complessi.

Con tutti questi valori possibili, tanti sono anche i potenziali attributi impostabili di conseguenza, per la precisione sono trentotto, non si impostano tutti, ma ce ne sono davvero parecchi. Di seguito vediamo i tipo di input a disposizione:

1. button: Un bottone, senza particolari effetti, utile se si vuole configurare qualche funzionalità particolare.
2. checkbox: Permette di selezionare un valore (vero o falso) e con il setup opportuno scelte multiple sono inclusive (se ne possono selezionare più di una)
3. color: Apre un color picker dalla quale selezionare un colore
4. date: Permette di scegliere una data
5. datetime-local: Permette di scegliere una data e un orario
6. email: Sembra un campo di testo, ma in fase di invio controlla che la mail sia nel formato corretto. Sui dispositivi mobili cambierà leggermente la tastiera mettendo la chiocciola al posto della virgola
7. file: Permette di selezionare dei file da filesystem.
8. hidden: Campo nascosto, utile per inviare informazioni extra al server (es. pagina di provenienza o controlli di sicurezza)
9. image: Un pulsante d’invio grafico, mostra un’immagine al posto del classico bottone
10. month: Permette di selezionare il mese e l’anno
11. number: Permette di digitare un numero. Sui dispositivi mobili attiverà la tastiera numerica
12. password: Il testo digitato apparirà con i pallini per non essere visualizzato
13. radio: Permette di selezionare una scelta tra più opzioni. A differenza di checkbox la scelta è esclusiva (non possono esserci più scelte)
14. range: Permette di scegliere un valore numerico dove il valore in sé non deve essere preciso
15. reset: Mostra un bottone che resetta tutto il form.
16. search: Sembra un campo di testo, ma quando l’utente digita mostra una X per cancellare quanto digitato. Sui dispositivi mobili mostra una lente d’ingrandimento al posto dell’invio.
17. submit: Mostra un pulsante che invia il form.
18. tel: Sembra un campo di testo, ma quando in stato di focus da mobile viene mostrata una tastiera con i caratteri possibili in un numero di telefono.
19. text: Non sembra un campo di testo, perché lo è. Questo tipo di input è il valore di default. Eventuali caratteri per andare a capo vengono rimossi automaticamente
20. time: Permette di scegliere un orario
21. url: Sembra un campo di testo, ma anche questo tipo di input modifica la tastiera dai dispositivi mobili e in fase d’invio viene validato affinché il valore inserito sia effettivamente un URL.
22. week: Permette di scegliere una settimana dell’anno.

Di attributi ce ne sono altrettanti, ma in questo caso vedremo quelli più usati:

• accept: suggerisce il formato di file attesi (si usa con: file)
• autocomplete: auto completamento del campo (si usa con tutti ad esclusione di: checkbox, radio e i vari bottoni)
• checked: se il campo è selezionato oppure no (si usa con: checkbox e radio)
• disabled: disabilita il campo (si usa con tutti)
• list: per collegare una datalist (si usa con tutti ad esclusione di: hidden, password, checkbox, radio e bottoni vari)
• max: valore massimo consentito (si usa con: date, month, week, time, datetime-local, number e range)
• maxlength: numero massimo di caratteri consentiti (si usa con: text, email, search, url, tel, password)
• min: valore minimo consentito (si usa con: date, month, week, time, datetime-local, number e range)
• minlength: numero minimo di caratteri consentiti (si usa con: text, email, search, url, tel, password)
• multiple: se accetta valori multipli (si usa con: email e file)
• name: da un nome all’input e verrà usato quando il form verrà inviato (si usa con tutti)
• pattern: value dovrà corrispondere all’espressione regolare affinché il campo sia valido (si usa con: text, search, url, tel, email e password)
• placeholder: testo segnaposto, verrà nascosto non appena l’utente inizia a digitare (si usa con text, search, url, tel, email, number e password)
• readonly: Il campo è di sola lettura (si usa con tutti ad esclusione di: hidden, range, color, checkbox, radio e bottoni vari)
• required: Il campo è obbligatorio e in fase di validazione se nessun valore è presente il form non verrà inviato (si usa con tutti ad esclusione di: hidden, range, color e bottoni vari)
• step: Intervallo d’incremento di un valore (si usa con: date, month, week, time, datetime-local, number e range)
• type: Il tipo di input che si vuole renderizzare (si usa con tutti)
• value: Il valore dell’input. A differenza di range questo testo non scompare quando l’utente inizia a digitare (si usa con: tutti tranne image).

L’elemento textarea

L’elemento textarea è come un input di tipo text con la differenza che permette di andare a capo.

Alcuni degli attributi di questo tag sono:

• id
• name
• rows e cols: larghezza e altezza della textarea indicano le righe e le colonne visibili. I valori di default sono 2 per le righe e 20 per le colonne.
• disabled
• maxlength
• minlength
• placeholder
• readonly
• spellcheck: abilita il controllo grammaticale da parte del browser/sistema operativo

<textarea> non supporta value perché il valore si inserisce tra tag di apertura e chiusura.

1<textarea id="commento" name="commento" rows="10" cols="50">
2   Questo è il mio commento
3</textarea>

L’elemento select

<select> nota anche come dropdown, permette di renderizzare un menù a tendina con tutta una serie di voci valide da selezionare, l’utente può solo scegliere il valore senza possibilità di personalizzazione.

Se si volesse una sorta di autocompletamento lasciando comunque libero il valore finale si può sempre usare una <datalist>.

1<select name="opzioni" id="opzioni">
2   <option value="1">Opzione 1</option>
3   <option value="2">Opzione 2</option>
4   <option value="3">Opzione 3</option>
5</select>

Se si volesse selezionare un valore di default, <option> supporta l’attributo selected.

1<select name="opzioni" id="opzioni">
2   <option value="1">Opzione 1</option>
3   <option value="2" selected>Opzione 2</option>
4   <option value="3">Opzione 3</option>
5</select>

Se, invece, si avessero delle <option> che si vogliono raggruppare è possibile usare il tag <optgroup>

1<select id="frutta" name="frutta">
2  <optgroup label="Agrumi">
3    <option value="arancia">Arancia</option>
4    <option value="limone">Limone</option>
5    <option value="lime">Lime</option>
6  </optgroup>
7  <optgroup label="Bacche">
8    <option value="fragola">Fragola</option>
9    <option value="Mirtillo">Mirtillo</option>
10    <option value="Mora">Mora</option>
11  </optgroup>
12  <optgroup label="Tropicali">
13    <option value="banana">Banana</option>
14    <option value="ananas">Ananas</option>
15    <option value="mango">Mango</option>
16  </optgroup>
17</select>

Raggruppare gli input in gruppi

Ci sono ancora un paio di tag utili da conoscere che sono <fieldset> e <legend>.

<fieldset> permette di creare gruppi di controlli che condividono il medesimo scopo o sono semplicemente correlati tra loro (es. dati anagrafici di un utente, indirizzo di spedizione o fatturazione).

<fieldset> e <legend> vanno in coppia perché <legend> è l’etichetta di <fieldset> e molti screen reader usano questa informazione per avvisare l’utente qual è lo scopo dei campi che sta evidenziando.

1<fieldset>
2  <legend>Informazioni Personali</legend>
3  <label for="nome">Nome:</label>
4  <input type="text" id="nome" name="nome"><br><br>
5  <label for="email">Email:</label>
6  <input type="email" id="email" name="email"><br><br>
7  <label for="telefono">Telefono:</label>
8  <input type="tel" id="telefono" name="telefono"><br><br>
9</fieldset>

Validare un form

Con la valangata di attributi e tipi di input visti in precedenza sappiamo già cosa ci serve per validare un form. Gli attributi utili sono:

• required: il campo è obbligatorio
• minlength: il valore non deve essere inferiore la lunghezza minima
• maxlength: il valore non deve superare una lunghezza massima
• min: il valore non deve essere inferiore al numero specificato
• max: il valore non deve essere superiore al numero specificato
• type: alcuni campi hanno di default dei controlli opzionali, come email e url.
• pattern: permette di specificare un’espressione regolare con la quale confrontare il valore. Se non vuoi saperne di più su come si usano le espressioni regolari dai un’occhiata al corso completo e gratuito.

All’invio del form, il browser effettua una prima validazione andando a bloccare l’invio qualora qualcosa non fosse valido. Se invece tutto fosse ok, l’invio procederà normalmente.

Ovviamente, questo validazione non è sufficiente per proteggersi da attacchi informatici o simili. La validazione dei dati può essere fatta _anche _con HTML, ma poi bisogna aggiungerci un pizzico di JavaScript per il client side e qualunque sia il tuo backend dovrai fare un’ulteriore validazione e pulizia. Perché fidarsi è bene, ma non fidarsi è meglio. Decisamente meglio.