Personalizzare i Form

La personalizzazione dei Form, per quel che mi riguarda, è la parte più difficile del design di una sito web. Bè, forse ho esagerato, ma comunque è una delle parti alla quale dobbiamo prestare molta attenzione, sia per una questione di estetica, sia per una questione di usabilità, per non parlare poi dell’accessibilità del form stesso.

Questo articolo parlerà in modo approssimativo di una soluzione molto efficace per modificare la visualizzazione dei checkbox.

Si tratta di un semplicissimo, script JS che si occupa di sostituire i nostri checkbox con delle immagini.
Si può trovare una dettagliata spiegazione qui.

Ma vediamo, in modo superficiale, il suo funzionamento.
Questo script è composto da due funzioni, la prima, chiamata replaceChecks(), si occupa di individuare tutti gli elementi input che hanno come attributo di tipo “checkbox”, quindi inserire subito prima un’immagine e quindi nascondere il suddetto input.
La seconda funzione si chiama checkChange() ed è assegnata all’evento onclick delle immagini e si occupa di modificare lo stato dell’immagine e dell’input stesso.

Questo script va a modificare gli elementi delle pagine XHTML usando il DOM in modo da rendere il tutto compatibile con tutti i maggiori browser moderni. Infatti è compatibile con Internet Explorer, Netscape, Firefox, Safari, Opera ed altri ancora.

Inoltre, proprio per la sua costruzione basata su DOM, è possibile prenderne il sunto per poter costruire nuovi script anche più complessi per la modifica di altre parti dei nostri form.