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.
Indice
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.