Personalizzare graficamente un Form

Mi è stato chiesto come personalizzare graficamente un form, in particolare un form di ricerca come quello presente su questo blog. La tecnica utilizzata, o meglio che utilizzo io, è ovviamente valida per qualsiasi tipo di modulo form. Quello che cambia è solo la complessità del lavoro da svolgere in funzione della complessità del form stesso.

Le basi

Tramite i fogli di stile è possibile personalizzare completamente il layout di un qualsiasi modulo form. Uno degli ostacoli che si possono incontrare, come spesso accade, è relativo alla compatibilità con i vari browser in commercio e quindi con diversi risultati finali in base al browser utilizzato.
Per questo, spesso, si opta per una soluzione sostanzialmente grafica, cioè si sfruttano delle immagini per ridefinire il layout grafico del form. Le immagini, infatti, sono le uniche entità che, salvo rai casi, sino ad oggi sono visualizzate sempre allo stesso modo su tutti i browser.

Senza immagini

Prima di vedere come alterare il layout di un form con delle immagini, vediamo quello che “sarebbe” possibile fare con i soli CSS. Un modulo form è formato nella maggiornza dei casi da campi INPUT. Tuttavia quello che vedremo è, in linea generale, applicabile a qualsiasi altro campo modulo. Tramite i CSS possiamo ridefinire l’aspetto del nostro campo INPUT agendo sulla sua dimensione, sul bordo, sullo sfondo, sul tipo di carattere, etc…
Ad esempio è possibile migliorare la resa impostando semplicemente:

1
2
3
4
5
6
input {
    border:1px solid #aaa;
    padding:4px;
    width:200px;
    font-size:12px;
}

Mozilla FireFox e Safari permettono anche di regolare in modo semplice la rotondità dei bordi (vedi anche CSS3: qualcuno ha visto Internet Explorer?):

1
2
3
4
5
6
7
8
input {
    border:1px solid #aaa;
    padding:4px;
    width:200px;
    font-size:12px;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;

In aggiunta possiamo inserire un’immagine come sfondo, per rendere più “accessibile” il significato del campo stesso:

1
2
3
4
5
6
7
8
9
10
11
input {
    border:1px solid #aaa;
    padding:4px;
    width:200px;
    font-size:12px;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;

    background:url(images/icon.png) no-repeat;
    padding-left:20px;

Se icon.png è un’icona di larghezza 16 pixel, tramite il padding permettiamo di posizionarla all’inizio del campo ma fuori dal testo.

Le immagini nel Form

L’ultimo esempio visto porterebbe ad una semplice soluzione nel momento in cui decidiamo di realizzare il layout del nostro campo INPUT completamene in grafica. Infatti in linea teorica basterebbe eliminare il bordo del campo e inserire un’immagine di background direttamente nel campo INPUT:

1
2
3
4
5
6
7
input {
    border:none;
    padding:4px;
    width:200px;
    font-size:12px;

    background:url(images/custominput.png) no-repeat;

Dico in linea teorica perchè se da un lato questa tecnica funziona (vedi FireFox), dall’altro produce strani effetti su altri browser (vedi Microsoft Internet Explorer).
Per sperare l’ostacolo si rende completamente trasparente il campo INPUT e l’immagine la si associa direttamente al tag FORM:

1
2
3
4
5
6
7
8
9
10
11
12
13
input {
    border:none;
    background:none;
    padding:4px;
    width:200px;
    font-size:12px;
}
form {
    display:block;
    width:200px;
    height:24px;
    background:url(images/custominput.png) no-repeat;
}

Il tutto con una “taggatura” HTML del tipo:

1
2
3
<form>
    <input type="text" name="cerca" />
</form>

In base alla grafica scelta e alla complessità del form, bisognerà solo “sovrapporre” in modo corretto, e quindi posizionare, il campo INPUT all’immagine grafica sottostante posta come sfondo del form. Questo è possibile inserendo gli opportuni margini al campo INPUT stesso, per farlo coincidere con il nostro layout:

1
2
3
4
5
6
7
8
9
10
input {
    border:none;
    background:none;
    padding:4px;
    width:200px;
    font-size:12px;

    margin-top:12px;
    margin-left:24px;
}

5 commenti a: “ ”

  1. 04 dic, 2009 Napolux:

    Ottimo, come al solito. Tu come lo personalizzeresti un file input? Questo articolo è molto bello, ma quando voglio qualcosa di custom tendo ad usare pulsantini fatti in flash.

    RispondiQuota
  2. 04 dic, 2009 Giovambattista Fazioli:

    @Napolux:

    Tu come lo personalizzeresti un file input?

    Un campo file input non può essere personalizzato direttamente, come dimostra il link che mi hai lasciato. La soluzione Flash è quella più adottata, anche quando il filmato Flash è nascosto e il layout viene realizzato tramite un semplice campo INPUT, o totalmente in grafica, e si fa scattare la scelta file tramite comunicazione Javascript -> Flash. Alla selezione del file, ovviamente processo contrario; Flash -> Javascript.
    Inoltre la soluzione Flash permettere di supportare la multiselezione, quindi la ritengo una opzione validissima, salvo controindicazione del caso (vedi ad esempio backend di WordPress quando si carica un media, usano Flash appunto).
    Altrimenti – come illustrato nel link che hai lasciato nel commento – una soluzione completamente HTML costringe all’uso dell’artifizio del campo file input nascosto… che mi ricorda tanto l’uso degli IFRAME quando l’oggetto HTTPRequest (alias Ajax) non era ancora noto… :D

    RispondiQuota
  3. 06 dic, 2009 I migliori post della settimana #49 | EmaWebDesign :: Web Programming / Web Design / SEO:

    [...] 06) Personalizzare graficamente un Form [...]

  4. 27 dic, 2009 francodane:

    Campi input non personalizzabili?
    scusate o mi sono perso qualcosa o cmq qualcosa non quadra dato che le proprietà sono personalizabili.
    A cosa facevate riferimento?

    RispondiQuota
  5. 27 dic, 2009 Giovambattista Fazioli:

    @francodane: non ho mai detto che i campi input non sono personalizzabili. Il campo input di tipo file, invece, è un’eccezione… questo non è personalizzabile nel senso che mostra un layout completamente differente in base al browser. Per gli altri, invece, vale la regola della compatibilità… ovvero, personalizza quel che vuoi ma verifica il risultato su tutti i browser.

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL