Redazione
a- a+

Moduli in HTML5

Vediamo novità e caratteristiche relative ai moduli in HTML5.

In questo tutorial parliamo di moduli (form) in HTML5. Un modulo è una maschera dati che può essere usata per diversi scopi: invio di mail di contatto, confronto prodotti, anagrafica utenti, ordini commerciali e altro.

La creazione di un form in HTML5 avviene ora attraverso l’implementazione di nuovi tag che ne supportano la composizione. Ai vecchi attributi infatti si sono aggiunti dei sottoelementi semantici capaci di migliorare la struttura  di markup e, di conseguenza, la realizzazione generale.

Le nuove specifiche permettono ora di sviluppare soluzioni medio-complesse usando solo i tag “in dotazione”.

Proviamo a fare qualche piccolo esempio: se prima dovevamo ricorrere a script supplementari (PHPASP e JavaScript in generale) per validare un indirizzo e-mail o rendere obbligatorio un campo testuale, oggi non è più necessario: particolari attributi HTML5 permettono queste operazioni specifiche nel corso della compilazione del codice.

Facciamo ora una panoramica generale delle novità (approfondiremo meglio nei prossimi articoli) partendo dai 2 elementi HTML “pilastro” per la creazione di moduli: <form> e <input>.

Il tag <form>

Il tag <form> è l’elemento primario per la creazione di moduli informativi: rappresenta il contenitore degli elementi che serviranno all’utente per inserire i vari dati. La creazione di moduli in HTML5 è arricchita oggi da due nuovi attributi: autocomplete e novalidate.

Vedremo nel dettaglio i nuovi attributi:

Vedremmo poi anche i nuovi campi accettati:

  • Email
  • Search
  • Url
  • Tutti quelli per indicare le date e le ore