Modulo 4 — Form HTML moderni: struttura, validazione, accessibilità e UX

1️⃣ Origine e funzione dei form

I form rappresentano il cuore interattivo del Web: da semplici campi di input negli anni ’90 fino ai moduli dinamici con validazione in tempo reale. Permettono all’utente di comunicare, iscriversi, prenotare o personalizzare esperienze.

2️⃣ Struttura di base

<form action="/iscrizione" method="post">
  <label for="nome">Nome</label>
  <input id="nome" name="nome" type="text" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

  <button type="submit">Invia</button>
</form>

3️⃣ Tipi di input moderni

4️⃣ Accessibilità (A11y)

Ogni campo deve essere identificato da una <label> collegata, avere un messaggio d’aiuto e fornire un feedback chiaro.

<label for="email2">Email istituzionale</label>
<input id="email2" type="email" required aria-describedby="helpE">
<small id="helpE">Usa il dominio @liceomasci.edu.it</small>

5️⃣ Validazione

La validazione garantisce che i dati siano coerenti e sicuri. Può essere nativa (browser) o personalizzata (JavaScript).

<input id="cf" required pattern="^[A-Z]{6}[0-9]{2}[A-Z][0-9]{2}[A-Z][0-9]{3}[A-Z]$">
<script>
const c = document.querySelector('#cf');
c.addEventListener('input', () => {
  const ok = c.checkValidity();
  c.setCustomValidity(ok ? '' : 'Codice fiscale non valido');
});
</script>

6️⃣ Sicurezza e privacy

• Usa sempre HTTPS.
• Per dati personali → method="post".
• Chiedi solo ciò che serve.
• Richiedi consenso esplicito.

<label>
  <input type="checkbox" required>
  Ho letto e accetto l’informativa privacy.
</label>

7️⃣ UX e design dell’interazione

Un form usabile è chiaro, leggibile e prevedibile. Evita errori frustranti, fornisci feedback visivo e mantieni coerenza cromatica.

input:valid {border:2px solid #2ea44f;}
input:invalid {border:2px solid #d93025;}

8️⃣ Microinterazioni e salvataggio automatico

<script>
const f = document.querySelector('form');
f.addEventListener('input', () => {
  localStorage.setItem('bozzaForm', JSON.stringify(Object.fromEntries(new FormData(f))));
});
window.addEventListener('DOMContentLoaded', () => {
  const data = JSON.parse(localStorage.getItem('bozzaForm') || '{}');
  for (let [k,v] of Object.entries(data)) if (f.elements[k]) f.elements[k].value = v;
});
</script>

9️⃣ Laboratorio: iscrizione al laboratorio di informatica

<form id="lab">
  <label>Nome <input name="nome" required></label>
  <label>Email <input type="email" pattern="^[a-z0-9._%+-]+@liceomasci\.edu\.it$" required></label>
  <select name="classe" required>
    <option>3A</option><option>4A</option><option>5A</option>
  </select>
  <textarea name="note" rows="3"></textarea>
  <label><input type="checkbox" required> Accetto la privacy</label>
  <button type="submit">Invia</button>
</form>

🔟 Riflessione finale

Un form efficace non è solo codice: è un atto di comunicazione che unisce chiarezza, fiducia e responsabilità.
Ogni campo è un punto di contatto tra l’utente e la conoscenza.

Prossimo modulo → “CSS avanzato per form: layout, dark mode e micro-UX.”