Introduzione
Gli elementi avanzati dei form HTML permettono di raccogliere dati più precisi e di offrire un’esperienza d’uso più semplice senza dipendere immediatamente da librerie JavaScript. In questo tutorial realizzeremo un modulo per la richiesta di analisi di un documento.
L’utente potrà:
- selezionare una categoria tramite
<datalist>; - indicare il livello di priorità con un input
range; - scegliere una data tramite un input
date; - caricare un file usando un input
file.
Il vantaggio principale consiste nel fornire controlli semantici e comprensibili sia agli utenti sia ai browser. Gli attributi come required, min, max, accept e multiple contribuiscono inoltre alla validazione di base.
È importante ricordare che la validazione HTML avviene nel browser e non sostituisce mai i controlli sul server. Un utente può modificare la richiesta HTTP, quindi ogni valore dovrà essere verificato nuovamente lato server.
Codice completo
<form action="/richieste/crea" method="post" enctype="multipart/form-data">
<fieldset>
<legend>Richiesta di analisi documento</legend>
<p>
<label for="titolo">Titolo della richiesta</label>
<input
type="text"
id="titolo"
name="titolo"
minlength="5"
maxlength="100"
required>
</p>
<p>
<label for="categoria">Categoria del documento</label>
<input
type="text"
id="categoria"
name="categoria"
list="categorie-documento"
placeholder="Scrivi o scegli una categoria"
required>
<datalist id="categorie-documento">
<option value="Contratto">
<option value="Fattura">
<option value="Curriculum">
<option value="Relazione tecnica">
<option value="Manuale operativo">
</datalist>
</p>
<p>
<label for="priorita">
Priorità:
<output id="valore-priorita" for="priorita">3</output>/5
</label>
<input
type="range"
id="priorita"
name="priorita"
min="1"
max="5"
value="3"
step="1"
oninput="document.getElementById(´valore-priorita´).value = this.value">
</p>
<p>
<label for="scadenza">Data desiderata per la consegna</label>
<input
type="date"
id="scadenza"
name="scadenza"
min="2026-10-03"
required>
</p>
<p>
<label for="documenti">Documenti da analizzare</label>
<input
type="file"
id="documenti"
name="documenti"
accept=".pdf,.doc,.docx,.txt"
multiple
required>
</p>
<p>
<small>
Formati ammessi: PDF, DOC, DOCX e TXT. Seleziona uno o più file.
</small>
</p>
<p>
<label for="note">Note aggiuntive</label>
<textarea
id="note"
name="note"
rows="5"
maxlength="500"
placeholder="Descrivi eventuali esigenze particolari"></textarea>
</p>
<button type="submit">Invia richiesta</button>
</fieldset>
</form>Spiegazione
Il ruolo di datalist
<datalist> contiene una serie di suggerimenti collegati a un input tramite l’attributo list. Nell’esempio, l’input con id="categoria" utilizza list="categorie-documento". L’utente può scegliere uno dei valori proposti oppure digitare una categoria personalizzata.
Questa caratteristica distingue datalist da un elemento <select>: il campo non è limitato esclusivamente alle opzioni predefinite. È una soluzione utile quando si desiderano suggerimenti, ma si vuole mantenere la possibilità di inserire valori nuovi.
Input di tipo range
L’input range rappresenta un valore numerico all’interno di un intervallo. Gli attributi min, max, value e step definiscono rispettivamente il limite inferiore, il limite superiore, il valore iniziale e l’incremento.
Un cursore è però meno esplicito di un campo numerico. Per questo l’esempio associa un elemento <output> al cursore. L’evento oninput aggiorna immediatamente il valore mostrato. In un progetto più complesso si può spostare questo comportamento in un file JavaScript separato, evitando codice inline.
Input di tipo date
<input type="date"> offre un controllo per la scelta della data. Il valore inviato al server segue normalmente il formato AAAA-MM-GG, anche se la visualizzazione può variare in base al browser e alle impostazioni locali.
L’attributo min impedisce all’utente di scegliere una data precedente a quella indicata. In un’applicazione reale, però, il valore non dovrebbe essere scritto manualmente se cambia ogni giorno: è preferibile generarlo sul server o impostarlo tramite JavaScript.
Input di tipo file
Per caricare file è necessario usare type="file". Inoltre, il form deve avere method="post" e soprattutto enctype="multipart/form-data". Senza quest’ultimo attributo, il contenuto binario dei file non viene trasmesso correttamente.
L’attributo accept suggerisce al browser quali estensioni selezionare, mentre multiple permette di scegliere più file. Questi attributi migliorano l’interfaccia, ma non rappresentano una protezione sufficiente: il server deve controllare estensione, tipo MIME, dimensione, contenuto e nome del file.
Best practice
- Collega sempre le etichette ai controlli: usa
fornell’elemento<label>e lo stesso valore nell’attributoiddell’input. - Usa nomi significativi: gli attributi
namesono fondamentali perché identificano i dati inviati al server. - Non affidarti soltanto a accept: l’attributo limita la scelta nell’interfaccia, ma non garantisce che il file sia sicuro o valido.
- Controlla le dimensioni dei file: definisci un limite lato server e comunica chiaramente questo limite all’utente.
- Considera l’accessibilità: non usare solo il colore per indicare errori e mantieni messaggi comprensibili per chi utilizza tecnologie assistive.
- Verifica le date sul server: una data minima configurata nel markup può essere alterata dal client.
- Prevedi un fallback: alcuni browser meno recenti possono offrire un supporto limitato per determinati input. Il form deve comunque restare utilizzabile.
- Evita valori eccessivamente rigidi in datalist: i suggerimenti devono aiutare, non impedire l’inserimento di una categoria valida ma non prevista.
- Proteggi i caricamenti: rinomina i file sul server, impedisci l’esecuzione di contenuti caricati e salvali fuori dalle cartelle pubbliche quando possibile.
- Usa fieldset e legend: raggruppare i controlli rende il modulo più ordinato e migliora la comprensione da parte degli screen reader.
Riepilogo
In questo esempio abbiamo costruito un modulo realistico per la richiesta di analisi di documenti. datalist fornisce suggerimenti flessibili, range gestisce un valore numerico intuitivo, date raccoglie una data in modo semantico e file consente il caricamento di uno o più documenti.
Gli attributi HTML svolgono una parte importante della validazione e dell’esperienza utente, ma non possono sostituire i controlli applicativi. Una soluzione completa combina markup semantico, messaggi accessibili, validazione lato client e verifica rigorosa lato server.