Corsi on-line

Un form di ricerca semplice ed elegante

In questo post vi insegnerò a stilizzare i moduli di ricerca del vostro sito al fine di ottenere un risultato semplice, essenziale ed allo stesso tempo elegante. Lo spunto per questo post mi viene dal layout del noto blog Abduzeedo:

Come potete vedere il modulo di ricerca è davvero essenziale: il campo di testo ed il bottone di ricerca sembrano fusi in un unico elemento unicolor, delimitato da un bordino colorato. L’unico “vezzo” è dato da un semplice effetto mouseover che comporta il cambio di colore del box di ricerca al passaggio del mouse.

Per ricreare questo box di ricerca ci serviranno:

  • una semplice struttura di tag HTML
  • un’immagine con sfondo trasparente da usare come bottone di submit (come questa)
  • qualche istruzione di CSS
  • un pizzico di Javascript

Per prima cosa vediamo la struttura HTML del modulo:

<div id="cerca-box" class="ricerca" onmouseover="coloreboxcerca('EEEEEE')" onmouseout="coloreboxcerca('999999')">
  <form>
  <input id="cerca-query" type="text" name="q" class="query"/>
  <input type="image" src="bottone-cerca.png"/>
  </form>
</div>

Vediamo ora il CSS:

<style type="text/css">
.ricerca { border: 3px solid #336699; background: #999999; padding: 4px; float: left; }
.ricerca input { float: left; height: 16px; }
.ricerca input.query { background: #999999; border: none; width: 140px; font-family: verdana, arial, tahoma; font-size: 12px; color: #000000; }
</style>

e per finire il codice Javascript che contiene la funzione che cambia il colore del modulo agli eventi onmouseover e onmouseout:

<script type="text/javascript">
function coloreboxcerca(colore) {
  document.getElementById('cerca-box').style.background = '#' + colore;
  document.getElementById('cerca-query').style.background = '#' + colore;
}
</script>

Un esempio funzionante può essere visto a questa pagina.

Post correlati
I più letti del mese
Tematiche