Rimpiazzare elementi di form con Javascript

Negli ultimi tempi sono diverse le tecniche che consentono di personalizzare elementi di form grazie a Javascript. La prima in ordine di tempo è Select something new: permette di trasformare una select in un menu dropdown. La tecnica ha avuto un seguito con la parte 2, in cui vengono presentate migliorie al codice, all’accessibilità  e all’usabilità  (qui la demo).

àˆ stata poi la volta degli Styled Checkboxes e dei Custom Checkbox, che consentono di rimpiazzare i classici checkbox con delle immagini, e ARC, che oltre ai checkbox permette di personalizzare anche i radio button.

Ultimo in ordine di tempo, e senza dubbio il più potente, è lo script Niceforms che permette di rimpiazzare select, checkbox, radiobutton e aggiungere effetti hover su input, textarea e bottoni.

Un po’ di tempo fa avevo pensato di preparare anch’io una tecnica simile da presentare su PRO, ma poi ho realizzato che forse non ne valeva la pena, per diversi motivi… che sono poi gli stessi per cui molto probabilmente non userei uno degli script che ho appena indicato in un progetto reale. L’interazione tramite il Javascript moderno ha uno scopo fondamentale, quasi una missione: migliorare l’esperienza di navigazione senza sacrificare accessibilità , usabilità  e fruibilità  dei contenuti.

In via di principio tutti gli script che rimpiazzano elementi di form si occupano di:

1. Verificare se le immagini sono abilitate e in caso positivo..,
2. nascondere gli elementi di form da rimpiazzare
3. aggiungere le immagini necessarie
4. riprodurre l’interazione degli elementi dei form.

In sostanza, si va ad imitare mediante Javascript un’interazione naturale per scopi, oserei dire, solo estetici. L’unico miglioramento è quello grafico, a fronte però del rischio di compromettere la fruibilità  dei form. Credo che nessuno vorrebbe perdere visitatori o potenziali clienti per un modulo un po’ più bellino…

In conclusione: si tratta di soluzioni senza dubbio creative e affascinanti ma il cui uso è da ponderare attentamente.