Form sperimentali con i CSS
Mercoledì 26 Maggio 2010 - 08:14
di Gabriele Romanato
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.
Commenti
1
Anche io da qualche hanno ho affrontato il problema, proprio in merito al bollettino postale :-).
C’è chi trova queste soluzioni on po’ chitc chi invece la trova interessante. Io sto nel mezzo! Pensando all’usabilità poi non sempre risulta intuitivo, abbituati come siamo alla compilazioni di campi “standard”… bisognerebbe trovare una linea, io in alcuni casi ho cercato di risolvare il problema “illuminando” l’intera area al passaggio del mouse rendendo i colori dei campi leggermente differenti rispetto il loro sfondo e sembra che questo esperimento riesca meglio nell’intento…# - postato da leo - 26 Maggio 2010 - 09:19
2
con uno sfondo quadrettato e la giusta spaziatura del testo le caselle del modulo risulterebbero più efficaci.
Per quanto riguarda l’uso avanzato di CSS e derivati non credo ci siano problemi. Gli esempi sono numerosi… Ma non aspettiamoci niente dalle poste :D
3
Personalizzare a certi livelli un semplice form può portare via molto tempo, cosa che spesso non è pagata visto che ci si concentra su altro.
In alcune situazioni i moduli sono centrali, come l’esempio delle poste, ma in altri no, quindi il tempo lo si investe nell’imprezionsire altri elementi del sito.
E’ vero anche che una volta messo del codice poi lo si riutilizza in altri progetti con poco.
# - postato da tatac - 26 Maggio 2010 - 10:04
4
che somaro :-P anno con l’H…. :-D
# - postato da leo - 26 Maggio 2010 - 11:14
5
davvero bravo Gabriele…
bel lavoro…però i campi del form sono al momento insufficienti…
troppo poche destinazioni e distinzioni…tipo un input esclusivamente numerico…
uno esclusivamente per tot battute…
e altre cachciatine (importanti) del genere…ad esempio nei quadratini del C/C bisognerbbe poter inserire uno e un solo numero…
la lunghezza degli input dovrebbe permettere righe moolto più lunghealtrimenti è come sulla carta che mi tocca scrivere piiiccolo piiicollo…
6
Grazie per i commenti! :-)
# - postato da Gabriele Romanato - 26 Maggio 2010 - 19:32
7
Complimenti per l’idea e la realizzazione.
Al di là di eventuali perfezionamenti (che sono sempre possibili), mi è piaciuto l’aspetto sperimentale del progetto.