I Form in html5

I Form in html5

Proseguendo la mia guida su html5, intendo raccontarvi le novità più importanti che sono state introdotte sui form del muovo markup html5.

Vi dico è che alla data di oggi 07/04/2010, l’unico browser che supporta queste novità è l’ultima versione di Opera, scaricabile qui. Quindi il mio file di esempio dovrete vederlo con Opera!

Rendere un campo obbligatorio required

Quando create un form, e dovete rendere un campo obbligatorio, cosa fate? O inserite un codice javascript oppure lo gestite con una variabile php, ebbene, adesso dovrete solo aggiungere l’attributo required, come per esempio:

<form><input name=”name”  type=”text ” required></form>

Mettendo required, in automatico il campo diventa obbligatorio e sarà il browser a mandarci un messaggio di errore in caso di mancata compilazione.

 Validare una mail

Oltre che un campo obbligatorio, possiamo anche  inserire un controllo affichè il campo per inserire la mail sia popolato da un indirizzo mail valido. Mentre fino ad oggi questo lo facevamo con javascript, ora ci basterà specificare che il type dell’input è email (invece che text) e aggiungere required. Vedi esempio:

<form><input name=”email” type=”email” required></form>

Davvero comodo!

Inserire un valore di scelta minimo e massimo nel form 

Anche questa è una novità molto importante, immaginate di voler fare un campo obbligatorio che raccolga la data anagrafica di una persona, oppure la sua data di nascita. Per evitare inutili errori di compilazione, sarebbe opportuno mettere un valore minimo e un valore massimo, per esempio età minima 14 anni, massima 90, basta mettere nell’input che si tratta di number, aggiungere min=”14″ max=”90″ e poi mettere required. Vedi esempio

 <input name=”eta” type=”number” min=”18″ max=”99″ required>

Validare un indirizzo internet in un form html5

Seguendo lo stesso esempio della validazione per l’email, la stessa cosa possiamo farla con un indirizzo internet (url).  In pratica dobbiamo creare un form nel quale non solo è richiesto di inserire un indirizzo internet, ma che sia anche valido, quindi scritto bene. Non dovete far altro che nel type scrivere url. Esempio.

 <input name=”url” type=”url”>

Creare un form con validazione speciale in html5

Una grande novità  introdotta nei form in html5 è quella di rendere obbligari dei campi e di costruire dei controlli di validazioni in maniera molto semplice. Facciamo per esempio che voi dovede mettere un campo con il cap, che l’utente deve riempire; per evitare errori di compilazione, non solo mettiamo che il campo sia solo numerico, ma che il numero massimo di numeri sia 5. Come facciamo?Guradate l’esempio.

<input name=”codice_postale” requie pattern=”([0-9]{5})”type=”text”>

Dobbiamo usare l’attributo requie pattern=”” , e qui dentro, scrivere il costrutto, prima indichiamo che il campo debba essere numerico e poi che il numero massimo di caratteri sia 5, tutto tra parentesi.  Davverò un’ottima applicazione!

Inserire una data nel form html5

C’è un attributo da mettere in input, si chiama date, e vi permette al passaggio del mouse sul form, di scegliere la data. Lo so che non ci crederete, ma solo con questo date riuscirete a visualizzare un calendario e scegliere il giorno che volete. E’ davvero geniale! Esempio

<input name=”data” type=”date”>

Cliccate sull’esempio che vi ho creato e vedete il risultato!