In questo Tutorial vediamo come migliorare i nostri Form utilizzando alcuni nuovi TAG HTML5 e come possiamo rendere migliore la User Experience dei possessori di iPhone.
Per questo tutorial, vi propongo la struttura del Form presente sul mio sito corporate Beat Fly nel quale sono stati inseriti i nuovi TAG HTML5 e un piccolo script jQuery per garantire le nuove funzionalità su ogni Browser.
Facendo una piccola introduzione, l’avvento di HTML5 ha aggiunto diversi nuovi TAG tra i quali il cosidetto placeholder (segnaposto). I segnaposto sostituiscono il lavoro svolto per anni da quei piccoli script per visualizzare, all’interno dei campi un messaggio o un suggerimento all’utente. Tutto quello che ora dovete fare è aggiungere un "segnaposto = ‘Vostro Testo…’" che apparirà nel campo, scomparendo a sua volta sul Focus.
Attualmente il supporto HTML5 è in crescita, ma non tutti i Browser ancora hanno un supporto completo (IE); per questo motivo, pur volendo implementare queste nuove specifiche dobbiamo garantire un cosiddetto Fallback per i Browser ritardatari.
A tal fine, per mezzo di un piccolo script jquery viene controllato se il segnaposto è supportato; se lo è, lo lascia solo, altrimenti si utilizza il vecchio script come ripiego.
Vediamo la struttura del Form, riportando solo i campi interessati:
1 2 3 4 5 6 7 8 | <label for="name"><strong class="mandatory">*</strong> Nome</label> <input type="text" name="name" id="name" placeholder="Nome" tabindex="1" required="required" /> <label for="emailform"><strong class="mandatory">*</strong> Email</label> <input type="email" name="emailform" id="emailform" placeholder="name@example.com" tabindex="3" required="required" /> <label for="address"><strong class="mandatory">*</strong> Telefono</label> <input type="tel" name="address" id="address" placeholder="solo numeri" tabindex="4" required="required" /> |
Come potete vedere, ho dichiarato ogni type la tipologia del campo; questo mi permette di abilitare sull’iPhone la tastiera pertinente all’inserimento; dunque se avrò un campo numerico, la mia tastiera mostrarà i numeri, mentre se avrò un campo email sarà mostrata la tastiera con il simbolo @:
A questo punto inseriamo il nostro script jQuery Placeholder reperibile all’indirizzo: https://github.com/danielstocks/jQuery-Placeholder e il gioco è fatto.
Vi lascio alcune risorse che meritano la lettura e che potranno aumentare il vostro desiderio di iniziare ad aggiungere piccole porzioni di HTML5 ai vostri progetti:
