back to top

Utilizzare un’immagine al posto di un pulsante in un form HTML

Il classico pulsante per l’invio di dati tramite form (submit) può essere stilizzato in vari modi utilizzando il CSS. Grazie alle nuove specifiche di CSS3, le possibilità stilistiche sono davvero numerose. Tuttavia, in alcuni casi, lo sviluppatore potrebbe preferire l’uso di un’immagine come alternativa al pulsante tradizionale, indipendentemente da quanto questo possa essere ben stilizzato.

Ma come è possibile usare un’immagine al posto di un <input> o di un <button> per inviare un modulo HTML? In questo post, esploreremo tre soluzioni pratiche per raggiungere questo obiettivo.

Utilizzare l’attributo type con valore “image”

La prima soluzione consiste nell’utilizzare un input di tipo image, che era già disponibile prima che HTML5 diventasse lo standard per il markup delle applicazioni web.

In pratica, sostituiremo il classico pulsante di submit del tipo:

<input type="submit" name="submit" value="Invia il modulo">

oppure:

<button type="submit">Invia il modulo</button>

con un input di tipo image come questo:

<input type="image" src="/img/pulsante.jpg" alt="Invia il modulo">

In questo modo, il pulsante viene sostituito da un’immagine grazie all’attributo type valorizzato come “image”, con l’attributo src che specifica il percorso dell’immagine da visualizzare.

Utilizzare un’immagine di sfondo per il pulsante

La seconda soluzione, meno convenzionale, prevede l’uso delle regole di stile CSS per applicare un’immagine di sfondo al tag input o button utilizzato per inviare il form.

input[type=submit],
button[type=submit] {
  display: inline-block;
  border: 0;
  width: 100px; /* larghezza dell'immagine */
  height: 80px; /* altezza dell'immagine */
  background-image: url('/img/pulsante.jpg');
  background-repeat: no-repeat;
  background-position: center;
}

Questa opzione differisce sostanzialmente dalla prima, poiché l’immagine viene utilizzata come sfondo del pulsante anziché come sostituto diretto del pulsante stesso.

Usare un’immagine con l’aiuto di JavaScript

Infine, un’altra soluzione prevede l’uso di un semplice tag <img> in combinazione con JavaScript per eseguire il submit del form quando l’immagine viene cliccata. Ecco un esempio:

<form id="mio-modulo">
  <!-- CONTENUTO DEL FORM ... -->
  <img src="/img/pulsante.jpg" onclick="document.getElementById('mio-modulo').submit();" alt="Invia il modulo">
</form>

Oppure, se preferisci separare la logica JavaScript dal markup HTML:

<form id="mio-modulo">
  <!-- CONTENUTO DEL FORM ... -->
  <img src="/img/pulsante.jpg" id="mia-immagine" alt="Invia il modulo">
</form>

<script>
var form = document.getElementById("mio-modulo");
document.getElementById("mia-immagine").addEventListener("click", function() {
  form.submit();
});
</script>

Conclusione

L’uso di un’immagine al posto di un classico pulsante HTML per inviare un form può essere una scelta estetica gradevole e funzionale. Ognuna delle soluzioni proposte è pienamente compatibile con gli standard attuali, e la scelta tra esse dipende dalle specifiche esigenze del progetto.

Altri contenuti interessanti

Pubblicità
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).

Leggi anche...

Caratteri speciali negli URL: quali sono e come gestirli

Gli URL (Uniform Resource Locator) sono componenti fondamentali del...

Convertire PSD in HTML/CSS: ecco come fare

Avete deciso di creare un sito web ma non...

Attributo "rel" per i link HTML

In HTML l’attributo rel può essere utilizzato esclusivamente in...

Humans.txt – cos’è, a cosa serve e come funziona

Humans.txt è un formato standard concepito per corredare un...

Un form di ricerca in HTML

Un modulo di ricerca è una delle funzionalità più...

Differenza tra sito statico e sito dinamico, vantaggi e svantaggi

Un sito statico è una collezione di pagine web...
Pubblicità