Advanced HTML HTML 5 – Progettare un Form (1).


Fra tutte le operazioni che si possono fare durante la creazione di un sito internet, la progettazione di un form è sicuramente una di quelle che richiedono più tempo.
Le attività da fare sono tante, tra cui, per citarne una a caso, la necessità di controllare la correttezza dei dati inseriti (date nel formato appropriato, numeri nei campi numero e via dicendo).

 

Informazioni incontrollabili!

Ovviamente alcune informazioni non si possono monitorare: se l’utente scrive il cognome al posto del nome… non possiamo farci nulla!
Non possiamo neanche controllare che l’e-mail sia reale, ma solo che sia stata inserita nella forma corretta, secondo le regole internazionali.

 

Form senza javascript.

Sino alla versione 4.0 dell’HTML, per progettare un form fatto bene,era quasi obbligatorio ricorrere almeno all’uso di javascript (stiamo parlando di controlli lato client), il quale si occupava di monitorare i dati prima di inviarli al server per l’elaborazione.

La cosa era spesso macchinosa: dopo l’inserimento dei dati, veniva simulato un invio al server: simulato perchè in realtà venivano prima monitoriati dal codice in locale per verificarne gli errori.
Se il modulo non aveva errori, veniva realmente inviato, altrimenti veniva riproposto all’utente per le correzioni.
Per fare una cosa ben fatta, occorreva che i dati già inseriti, venissero memorizzati e ricaricati nella pagina quando questa veniva riportata all’utente, per non fargli riscrivere tutto.
Per evitare questa operazione macchinosa, molti “sviluppatori” preferivano far decadere il tutto e ripresentare un form vuoto, con sommo gaudio dell’utente.

 

Rivoluzione 5!

Con l’arrivo della versione 5 dell’HTML, le cose sono profondamente cambiate. Un modulo può essere quasi totalmente gestito da HTML, senza il problema di perdere le informazioni in caso di invio errato del modulo.
Tutte funzionalità integrate nei comandi nativi del linguaggio HTML 5. Ma ci sono molte novità. Noi andremo a scoprire le novità più salienti e più utili al nostro scopo.

 

Iniziamo a creare.

Per prima cosa creiamo una pagina base in stile HTML 5. Se vogliamo possiamo copiare direttamente quella proposta:

<!Doctype HTML>
<HTML>
  <head>
   <meta author="nome autore"> 
   <title>Creazione di un form con HTML 5 </title>
  </head>
<body>
<!-- Creiamo un modo di prova che poi dovrete personalizzare -->
<h1> Modulo raccolta dati </h1>
<form metod="post" action="esecuzione del modulo">

<label for="name">Name : </label><br />
<input type="text" size=30 name="name" id="name"><br />

<label for="firstname">First name :</label><br />
<input type="text" size=50 name="prename" id="firstname"><br />

<label for="email">Email address :</label><br />
<input type="text" size=50 name="prename" id="email"><br />

<label for="borndate">Born date :</label><br />
<input type="text" size=50 name="prename" id="borndate"><br /> 

<label for="age">Your age :</label><br /> 
<input type="text" size=5 name="age" id="age"><br /> 
<input type="Submit">

</form>


</body>
</html>

 

Adesso che abbiamo imbastito il form e i suoi campi, andiamo a vedere come HTML 5 gestisce le informazioni, le controlla, effettua la validazione e consente l’invio del modulo.
Il tutto senza ricorre a javascript o ad altri linguagi di scripting.

HTML – Progettare un form (1)
Tagged on:                         

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *