Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

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

Una tecnica per modificare l'aspetto grafico degli input di tipo file.
Una tecnica per modificare l'aspetto grafico degli input di tipo file.
Link copiato negli appunti

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

Resa del form su Safari

Resa del form su Opera

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

Ti consigliamo anche