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.
