Form con CSS e Javascript... e possibilmente con giudizio

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).