Corsi on-line

Due soluzioni per utilizzare le immagini nei submit

Il classico pulsante per l’invio di dati tramite form (submit) può essere stilizzato in vario modo attraverso CSS e compatibilmente con il supporto offerto dai vari browser per la navigazione Web; in alcuni casi lo sviluppatore potrebbe optare per l’utilizzo di un’immagine in alternativa all’impostazione di default che prevede la generazione di tale elemento tramite HTML.

CatturaQuesto post vuole proporre due possibili procedure finalizzate al raggiungimento dell’obiettivo preposto; la prima è basata sull’utilizzo dell’input type image che, a differenza di altre componenti dello stesso tipo (come per esempio color o email) era già disponibile prima che HTML5 diventasse il nuovo riferimento standard per il markup delle Web applications.

In sostanza parliamo di una soluzione che permette di sostituire uno snippet come quello presentato di seguito:

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

con un’alternativa come la seguente che dovrebbe garantire il medesimo risultato e, nel contempo, una resa grafica tendenzialmente più gradevole:

<input type="image" name="submit" src="img/pulsante.jpg" alt="Invia" />

La seconda procedura prevede l’impiego diretto delle regole di stile CSS, si avrà quindi:

input[type=submit] {
background:url("img/pulsante.jpg");
}

espressione che potrà essere riformulata tramite un utilizzo combinato di CSS e del markup HTML:

<input type="submit" name="submit" value="Invia" style="background:url("img/pulsante.jpg");">

Indipendente da come venga formulata questa seconda opzione, essa si differenzia in modo sostanziale dalla prima in quanto l’immagine viene utilizzata come sfondo del pulsante e non come alternativa ad esso.

Post correlati
I più letti del mese
Tematiche