Form con CSS e Javascript… e possibilmente con giudizio
Mercoledì 12 Settembre 2007 - 11:44
di Cesare Lamanna
Shaun Inman ha presentato sul suo blog una tecnica per modificare l’aspetto di campi di form di tipo file (<input type="file">). È un caso per certi versi esemplare rispetto a due diversi ambiti.
La tecnica è basata su una combinazione di CSS e Javascript, e rispetta in pieno i dettami del cosiddetto progressive enhancement. Se Javascript è disabilitato e sui browser su cui non funziona, tutto degrada senza inficiare la funzionalità. Di seguito uno screenshot dell’esempio su Safari (supportato) e Opera (non supportato):
Leggendo il post troverete tutti i dettagli tecnici. La base è rappresentata da questo semplice markup HTML:
<label class="cabinet">
<input type=”file” class=”file” />
</label>
e da queste regole CSS:
.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;
display: block;
overflow: hidden;
cursor: pointer;
}
.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
Tramite il CSS si imposta un’immagine di sfondo per l’elemento label e poi si nasconde l’input sfruttando l’opacità (che è uguale a 0). In questo modo, a differenza di quanto avviene con display:none o visibility:hidden, il campo risulta comunque cliccabile. Il resto è svolto dal Javascript, che va attivato con una dichiarazione del tipo SI.Files.stylizeAll();.
Tutto bene? Sotto l’aspetto puramente estetico/visuale forse sì. Quel che balza subito agli occhi però è che la tecnica pone un immediato problema di usabilità. In questo tipo di input è presente di default una sezione accanto al pulsante che visualizza il percorso locale del file selezionato: è una forma di feedback e controllo indispensabile e che nell’esempio realizzato da Inman si perde (fatto di cui l’autore è ovviamente consapevole come si evince dai commenti).
Con questo arriviamo al secondo motivo di esemplarità che un esperimento come questo può sollevare. La tentazione di agire sull’aspetto grafico dei form è forte, ma i rischi connessi sono tanti e non trascurabili.
Per la cronaca, scorrendo la lista dei commenti si scopre che: qualcosa di simile era stato già creato e che sul sito di Disney UK è stato in qualche modo risolto il problema del feedback visuale rispetto al nome e al percorso del file. Si parta da questa pagina e si selezioni dalla tendina in basso l’opzione ‘Technical question’, per poi provare a inviare un file usando il pulsante ‘Browse’ (che è un input di tipo file racchiuso però da uno span).
Categoria: Scripting | Permalink
Commenti
1
Vado un attimo OT: perchè il tizio che ha fatto il sito ha usato un carattere del genere (ovvero “Helvetica Neue”, Helvetica, Arial, sans-serif)?
Ho capito che su safari o vista magari si vede bene, ma per chi usa win xp (la maggioranza) si vede veramente sgranato, od almeno io lo vedo così.
Chiudo l’OT.# - postato da Alessio Michelini - 12 Settembre 2007 - 12:31
2
per altro la soluzione della disney è parzialmente compatibile anche con opera, il quale non mostra tutto il percorso del file ma solo il nome. però almeno funziona, che è già qualcosa.
# - postato da smal - 12 Settembre 2007 - 12:48
3
Preferisco anche io la soluzione adottata dalla Disney che permette di leggere il percorso del file selezionato.
@ Alessio: io il testo sul sito di Shaun lo leggo bene
4
prova invio del form
# - postato da vincent - 10 Aprile 2009 - 17:53