Form sperimentali con i CSS

Recentemente mi sono chiesto, anche sull’onda di quanto già  fatto da sviluppatori stranieri, è come mai si ha paura ad osare di più con i CSS.

Un campo di indagine su cui ho svolto molti test sono i form. Ho cominciato nel 2006 ed ho continuato fino ad oggi. Sostanzialmente, con i form si può osare di più, anche alla luce del fatto che non sempre i risultati sono così difficili da ottenere. Mi sono chiesto: perché non cercare di riprodurre il layout della modulistica cartacea anche sul web? Non sarebbe interessante avere dei form che assomiglino in tutto e per tutto al loro originale cartaceo? Visto che si sta andando verso una progressiva digitalizzazione del cartaceo, non sarebbe utile presentare all’utente un layout a lui/lei già  familiare?

La mia attenzione si è rivolta ai moduli delle Poste Italiane. Visto che le Poste sono online, si potrebbe pensare di utilizzare dei form sperimentali per facilitare l’utente nella compilazione. Ecco come è nata questa demo, che per funzionare fa uso dei commenti condizionali per Internet Explorer e di poche righe di codice JavaScript per Safari e Opera.

Ovviamente ha dei limiti: ho voluto ricreare il layout originale del documento, ma in realtà  sul web si possono creare degli adattamenti per facilitare ulteriormente gli utenti. Per esempio è una forzatura ricreare le caselle del modulo, che sono più che altro un proof-of-concept messo lì per dimostrare che si, la cosa è possibile. Un altra cosa da notare è che non si è usato un elemento fieldset per ricreare la struttura del campo di testo con didascalia, ma ci si è affidati ad un più cross-browser box in cui un titolo viene spostato in alto tramite il posizionamento relativo con valore negativo.

Ad ogni modo, lo scopo di questo demo è quello di dare un impulso alla ricerca e alla sperimentazione, dimostrando come i CSS possano essere impiegati per ottenere anche layout piuttosto avanzati.