I form in HTML5: una panoramica

14 marzo 2011

Quando Javascript fu introdotto nelle pagine web, fu subito implementato per assolvere a due compiti: il rollover delle immagini e la validazione dei form.

Mentre il primo era un mero problema visuale (e in parte anche di usabilità), il secondo utlizzo comune di Javascript era necessario perché permetteva di eliminare (o per meglio dire arginare) l’invio di form mal compilati o con errori, evitando all’utente l’attesa non necessaria tra il l’invio, l’eventuale fallita validazione dei dati inviati e il conseguente reload della pagina.

Ovviamente nessun programmatore esperto si fida di quello che “arriva” dai form. Si rende necessario, quindi, il controllo lato server dei dati inviati. Nonostante questo, l’implementazione di controlli client side è una prassi comune.

Con HTML5 avviene per la validazione e in generale per l’interazione tramite i moduli, quello che è accaduto con elementi come video e audio. La specifica introduce funzionalità e tecniche che permettono allo sviluppatore da affidarsi unicamente al linguaggio di markup, senza dove ricorrere a Javascript o a plugin esterni.

Quello che andremo a descrivere nelle prossime lezioni era originariamente parte della specifica del WHATWG chiamata Web Form 2.0, aggiornamento della specifica del W3C denominata Web Form 1.0.

Attualmente Web Form 2.0 è un progetto chiuso in quanto ora si lavora sulla parte dedicata ai form della specifica HTML5.

Lavorare con i form è stato finora molto semplice: si inizia tutto con il tag <form>, si prosegue con gli <input type="text">, a volte con gli <input type="password"> e magari con una <textarea> o una <select> o <input type="radio">, e si finisce sempre con <input type="submit">.

Questi tipi di input, però, non si adattano alla varietà di dati possibilmente richiesti. Spesso ci troviamo a richiedere indirizzi e-mail, numeri di telefono, date e molti altri tipi di dati ancora.

Non solo, ci sono anche le validazioni di consistenza derivate da questi dati, per esempio il fatto che l’indirizzo e-mail deve contenere la @ o che le date devono essere in un formato preciso, oltre a validazioni di presenza e obbligatorietà. È soprattutto a questo livello, come si accennava, che entravano in gioco Javascript e le validazioni client side.

Tutto questo con HTML5 finisce grazie all’inserimento nella specifica di nuovi type come email, number, range, search e di diversi nuovi attributi come placeholder, autofocus, require, min, max, etc.

Questi nuovi tipi di input e attributi sono molto apprezzati dalla comunità dei programmatori perch´ oltre a fornire un aumento dell’accessibilità dei form (anche in ambito mobile) sono pronti per l’uso.

Non tutti funzionano perfettamente su tutti i browser, ma senza nessun hack, senza Javascript che ne controlla il funzionamento, degradano bene, anche in preistorici browser.

Possiamo allora iniziare.

Tutte le lezioni

1 ... 20 21 22 ... 51

Se vuoi aggiornamenti su I form in HTML5: una panoramica inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su I form in HTML5: una panoramica

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy