Offrire ai visitatori un modulo di ricerca nel proprio sito è un aspetto
importantissimo. In questo articolo vedremo come sia possibile renderlo
anche esteticamente gradevole, oltre che più funzionale, con HTML, CSS e un pizzico di Javascript. Cominciamo subito.
Il markup
Per prima cosa vediamo subito l'esempio che passo
passo andremo a realizzare con HTML, CSS e Javascript e il suo screnshot:
In quanto all'HTML dell'esempio, la scelta è stata
dettata soprattutto dalla semanticità del form e dei suoi elementi. Ecco il codice
per intero:
<form id="search" action="" method="get">
<fieldset>
<legend>Cerca nel sito</legend>
<input type="text" id="search-in" value="cerca nel sito...">
<button><img src="search1.png" alt="Cerca" title="avvia la ricerca"></button>
</fieldset>
</form>
Dato che il form dell'esempio ha un solo campo di input,
per evitare ridondanze ho pensato di indicare la sua funzione attraverso una legend
e raggruppare campo di input e bottone di submit attraverso un fieldset.
Niente label quindi, ma per questioni di usabilità e accessibilità grazie
alla legend il form è comunque esplicito. Ecco la versione
dell'esempio senza CSS né Javascript.
Un po' di ridondanza in realtà nell'esempio
c'è, e riguarda il valore iniziale del campo di input. È per garantire la comprensione del form nel caso in
cui i CSS siano abilitati (rendendo quindi la legend non visibile) ma Javascript sia disabilitato: torneremo
sull'argomento più avanti.
Prima di procedere con il CSS, alcune riflessioni sulla scelta del markup del button
sono doverose. Questo elemento presenta diversi vantaggi rispetto all'input,
illustrati benissimo nell'articolo Premi
il button.
Per l'immagine del bottone di ricerca dell'esempio si sarebbe potuto benissimo usare una tecnica
di image replacement, svincolando così totalmente il markup dalla presentazione. Ma in questo caso
anche le migliori tecniche di image replacement
forse non avrebbero funzionato a dovere, dato che lo spazio occupato dall'icona è decisamente limitato.
L'uso di un'immagine attraverso il tag <img> ci garantisce quindi l'accessibilità
in uno scenario piuttosto raro, ma possibile: le immagini disabilitate. In questo caso, verrà mostrato
il testo alternativo indicato attraverso l'attributo alt dell'immagine stessa.
Il CSS del form
Siamo giunti quindi alla parte centrale dell'esempio,
ovvero il foglio di stile. È piuttosto corposo, ma composto da regole semplici e logiche.
Per prima cosa le regole sull'elemento form. Basterà dichiarare la larghezza:
form#search{width: 230px}
Per quanto riguarda il fieldset, elimineremo il bordo e il padding di default.
Per la legend, è importante nasconderla mantenendo l'accessibilità verso screen
reader e dispositivi alternativi. Come visto nell'articolo sulla
Tecnica off-left
non andrebbe usato display: none. In questo caso, invece dei posizionamenti assoluti,
ho pensato di usare un text-indent negativo combinato con un font-size molto piccolo.
Ecco le due regole:
form#search fieldset{border: 0px solid;padding: 0}
form#search legend{text-indent: -9999px;font-size: 1px}
Arriviamo alla personalizzazione dell'input dell'esempio.
Come visto nell'articolo Impaginare i form,
gli elementi dei form sono elementi inline e replaced. Per quanto riguarda l'input
per questioni di allineamento con il bottone si è però reso necessario renderlo float.
Viene poi dichiarata una larghezza di 170px, un margine superiore di 3 pixel (determinato empiricamente)
per poterlo allineare con l'immagine di ricerca; specificheremo infine l'immagine di sfondo
i bordi, il testo e il suo colore. Ecco la regola per intero:
form#search input{float: left;width: 170px;margin-top: 3px;
background: #FFF url(bk.png) repeat-x top left;
border: 1px solid;border-color: #999 #777 #777 #999;
font: 18px Arial,sans-serif;color: #0D56D5}
Infine il bottone di submit. Elimineremo il bordo e imposteremo il colore
di sfondo, oltre che aggiungere il cursore "a manina":
form#search button{background: #FFF;
border: 0px solid;cursor: pointer}
Il CSS dell'esempio è così ultimato; rivediamolo per
intero:
form#search fieldset{border: 0px solid;padding: 0}
form#search legend{text-indent: -9999px;font-size: 1px}
form#search input{float: left;width: 170px;margin-top: 3px;
background: #FFF url(bk.png) repeat-x top left;
border: 1px solid;border-color: #999 #777 #777 #999;
font: 18px Arial,sans-serif;color: #0D56D5}
form#search button{background: #FFF;
border: 0px solid;cursor: pointer}
Ora è tempo di un pizzico di Javascript.
Il Javascript
Dopo aver visto markup e foglio di stile, vediamo brevemente il Javascript dell'esempio.
Come abbiamo detto, l'esempio non presenta label e il fieldset è nascosto grazie ai CSS.
Per questioni di usabilità, si è reso quindi necessario replicare la funzione del form attraverso
le parole "Cerca nel sito" anche nel campo di input specificando il value iniziale.
In questi casi, per migliorare l'usabilità dei form, è una pratica piuttosto diffusa cancellare
il testo dell'input appena questo riceve il focus nel caso in cui ci sia il valore iniziale,
che verrà poi ripristinato nel caso in cui l'utente lasci il campo vuoto cliccando altrove nella pagina.
È proprio quello di cui si occupa lo script,
specificato nella sezione head della pagina attraverso la seguente riga:
<script type="text/javascript" src="caption.js"></script>
Il contenuto dello script è piuttosto breve: 19 righe in tutto, metà delle quali
per la funzione AddLoadEvent realizzata da Simon Willison e presentata
in Executing JavaScript on page load.
Questa piccola funzione ci garantisce che lo script non dia conflitti con eventuali altri
script della pagina.
Per comodità di consultazione, ecco il contenuto dello script per intero:
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function')
window.onload = func;
else
window.onload=function(){
if(oldonload)
oldonload();
func();
}
}
addLoadEvent(function(){
var inpMessage="cerca nel sito...";
var el=document.getElementById("search-in");
el.value=inpMessage;
el.onclick=function(){if(el.value==inpMessage) el.value=""}
el.onblur=function(){if(el.value=="") el.value=inpMessage}
});
La spiegazione dello script esula dagli scopi dell'articolo: basti sapere che per
poterlo usare è necessario includere la riga con l'elemento script vista prima nella
sezione head della pagina e, ovviamente, copiare il file caption.js
nella stessa cartella della pagina che utilizza il modulo. In alternativa, è anche possibile
specificare un percorso assoluto per lo script.
Conclusioni
In questo articolo abbiamo visto come poter rendere dal punto di vista
della marcatura, della personalizzazione e dell'usabilità un elemento piccolo
ma fondamentale: un mini-modulo di ricerca, attraversando le diverse scelte implementative.
La compatibilità è decisamente buona: sia la sua presentazione con i
fogli di stile che il suo comportamento con javascript sono stati testati con successo sulle
versioni di Internet Explorer dalla 5 alla 7, Opera, Firefox e Safari. Per quanto
riguarda l'icona del bottone di ricerca, l'ho trovata su questa pagina.
Molte altre risorse sulle icone si possono trovare qui sul blog.
In conclusione una piccola nota pratica: è possibile posizionare assolutamente il box di ricerca. In tal caso,
è necessario posizionare relativamente il div contenitore in modo da determinare un contesto di posizionamento.
Per posizionarlo ad esempio in alto a destra dell'header, le due regole CSS aggiuntive sarebbero le seguenti:
div#header{position: relative}
form#search{position: absolute;top: 20px;right: 10px}
Codice, immagine ed esempio sono disponibili per il download. Alla prossima.
