Creiamo un modulo di contatto dalla A alla Z

Questo è il post #31 di 31 nella serie “HTML 101 - Le basi

Dopo aver passato in rassegna i forms in HTML e tutti gli elementi a esso associati, abbiamo le conoscenze necessarie per creare un form di contatto.

Di seguito troverete una lista di esempi di forms da cui prendere spunto e cosa più importante, da analizzare e studiare.

Tutti gli esempi sono hostati su Codepen e potete esaminare il codice HTML, il CSS e dove presente anche il codice JavaScript.

Questi esempi sono sicuramente più complessi di quelle sono le vostre conoscenze fino a questo momento ma è importante capire cosa è possibile ottenere sfruttando in sinergia HTML, CSS e JavaScript.

Ovviamente il mio consiglio di è di focalizzarvi, al momento, soltanto sulla parte HTML e magari dare un occhiata al CSS visto che ne abbiamo trattato le basi ma il punto rimane che questi esempi devono essere trattati come linee guida.

Quando vi sentirete pronti, provate a creare un semplice form di contatto usando quello che avete imparato e non focalizzatevi sull’aspetto estetico visto che non stiamo trattando il CSS.

Come idea di base, che ovviamente potete estendere come volete, provate ad avere un form con i seguenti dettagli:

  • nome
  • cognome
  • email
  • commenti
  • pulsante per inviare il form

Come già detto, sentitevi liberi e anzi incoraggiati, a estendere il form con altri controlli che abbiamo visto nei posts precedenti.

Alla fine dell’articolo troverete un video in cui svolgeremo questo esercizio ma vi raccomando di provarci voi prima di vedere il video!

Esempi di forms HTML

Soluzione