Applicare un'immagine di sfondo agli elementi di un Form
Articolo scritto da Max Bossi
Con un po' di fantasia ed un pizzico di buona volontà possiamo rendere più accattivante e graficamente gradevole l'aspetto dei nostri form aggiungendo un'immagine di sfondo ai nostri campi input e/o alle textarea.
In questo articolo vedremo come abbellire un semplice modulo per l'invio di messaggi ad un guestbook di un ipotetico Hotel tra le sabbie del Egitto.
Per questo semplice lavoro ho scelto un'immagine a tema che andremo ad applicare come sfondo alla nostra, altrimenti banale, textarea. Ecco l'immagine che ho scelto di utilizzare:
<style>
h1
{
color: #D2AB6F;
font-family: Verdana, Arial, Tahoma;
font-size: 16px;
font-weight: bold;
margin: 0px 0px 10px 0px;
}
td
{
color: #000000;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
}
input.sabbia,
input.invio,
textarea.deserto
{
color: #000000;
font-family: Verdana, Arial, Tahoma;
font-size: 12px;
font-weight: bold;
}
input.sabbia
{
background-color: #D2AB6F;
}
input.invio
{
color: #D2AB6F;
background-color: #000000;
}
/*
Per stilizzare la textarea ho impostato le dimensioni
dell'area di testo come quelle dell'immagine che
utilizzerò come sfondo (file 'deserto.jpg')
*/
textarea.deserto
{
width: 300px;
height: 180px;
background-image:url('deserto.jpg');
}
</style>
<form>
<h1>Guestbook del Hotel Egitto</h1>
<table border="0">
<tr><td>Nome:</td><td><input class="sabbia" type="text" name="nome" /></td></tr>
<tr><td>Cognome:</td><td><input class="sabbia" type="text" name="cognome" /></td></tr>
<tr><td>Messaggio:</td><td><textarea class="deserto" name="messaggio"></textarea></td></tr>
<tr><td colspan="2" align="right"><input class="invio" type="submit" value="Invia Messaggio!" /></td></tr>
</table>
</form>
Di seguito uno screenshot del risultato visivo che si ottiene:
