Luca Perullo

Curriculum / intermedio

Forms HTML5 evoluti: il modulo contatti che converte

Input types nativi, validazione viva, multi-step, anti-spam, submit senza reload. Un form che gli utenti finiscono davvero.

Un form di contatto è il punto in cui un visitatore diventa lead — o si arrende. In 8 lezioni costruirai il modulo contatti del ristorante "La Forchetta": input HTML5 (email, tel, date) con validazione nativa, feedback live in tempo reale, flusso multi-step con fieldset, honeypot anti-spam, submit con fetch senza reload, stati success/error accessibili. Alla fine avrai un form pubblicabile, accessibile, che blocca i bot e fa compilare anche i meno tecnologici.

Inizia adesso80 min · 8 lezioni

Markup semantico01

Skeleton del form, label vere (no placeholder come label!), input type HTML5 nativi.

  1. 01Skeleton del form: <label> vere, niente placeholder finti2 min
  2. 02Input types HTML5: email, tel, url, date — validazione gratis2 min
  3. 03Required + pattern regex: blocca le richieste vuote2 min
  4. 04Feedback live con :valid e :invalid2 min

Validazione client-side02

Required, pattern regex, pseudo-classi :valid/:invalid per feedback live senza JS.

  1. 05Multi-step: form a 3 step con fieldset2 min
  2. 06Anti-spam: honeypot field + timer minimo2 min
  3. 07Submit con fetch: niente più reload della pagina2 min
  4. 08Stati success/error + accessibilità con aria-live3 min

Multi-step + anti-spam03

Form a 3 step con fieldset/legend, honeypot nascosto e timer minimo per bloccare i bot.

    Submit + stati UX04

    Fetch senza reload, success/error con aria-live e focus management per accessibilità.