Applicare un'immagine di sfondo ad un form

Home + HTML + Articoli HTML + Applicare un'immagine di sfondo ad un form

Molti siti mettono a disposizione dei propri utenti dei servizi che vengono erogati attraverso la compilazione di appositi moduli (o più precisamente form) HTML, dove è richiesto l'inserimento di dati al fine di elaborarli ed offrire i risultati desiderati.

Abbiamo già avuto modo di parlare dei form in HTML, quindi in questo articolo ci occuperemo soltanto dell'aspetto grafico dei nostri form e non del loro funzionamento "tecnico", per il quale rinviamo alla nostra guida al linguaggio HTML.

Ipotiziamo di voler inserire nel nostro sito un form che permetta di calcolare l'affinità di coppia sulla base dei nomi dei partners.
Per rendere visivamente accattivante il nostro servizio potremmo pensare di inserire il nostro form all'interno di un contesto grafico a tema... ad esempio posizionando i nostri campi all'interno di un bel cuore rosso!

Cercate o create un'immagine raffigurante un cuore di dimensioni 300 X 300 pixel. Ora create una semplice tabella delle dimensioni dell'immagine, impostando a zero il paddig e lo spacing. Impostate alla cella contenitore l'allineamento centrato sia in verticale che in orizzontale ed impostate l'immagine cuore.jpg come background. All'interno della cella inserite il form HTML. Et voilà... il gioco è fatto!

Di seguito un semplice esempio di codice

<table width="300" height="300" cellpadding="0" cellspacing="0">
    <tr>
        <td align="center" valign="middle" background="cuore.jpg">
            <form name="modulo">
                Nome di LUI<br>
                <input type="text" name="lui"><br>
                Nome di LEI<br>
                <input type="text" name="lei"><br>
                <input type="button" value="Affinità">
            </form>
        </td>
    </tr>
</table>

Di seguito uno screenshot del risultato:

Ora lascio a voi il compito di mettere in pratica quanto imparato... con un pizzico di fantasia sono sicuro che riuscirete a trovare soluzioni molto divertenti per abbellire i vostri siti web!