Cambiare il pulsante "submit" del modulo

max1850 · 6 Mar 2009

Salve.
Uso dreamweaver cs3.
Vado subito al dunque. Ho un modulo con dei campi di testo e un pulsante di tipo "submit". Ora, al posto di questo pulsante, che graficamente è molto brutto da vedere, vorrei inserire un'immagine che faccia le veci del pulsante stesso, cioè deve essere di tipo "submit" per inviare i dati del modulo.
Come posso fare?

Grazie

Max!

satifal · 6 Mar 2009

Sicuramente utilizzando i CSS potrai ottenere ottimi risultati. Comunque il modo più semplice per ottenere ciò che chiedi è fare una cosa del genere:

HTML:

<html>
	<body>
		<form action="..." method="post">
			<input src="immagine_pulsante.gif" type="image" name="submit" />
		</form>
	</body>
</html>

max1850 · 6 Mar 2009

satifal ha scritto:
Sicuramente utilizzando i CSS potrai ottenere ottimi risultati. Comunque il modo più semplice per ottenere ciò che chiedi è fare una cosa del genere:

HTML:

<html> <body> <form action="..." method="post"> <input src="immagine_pulsante.gif" type="image" name="submit" /> </form> </body> </html>

Ciao!
Si, funziona! :fonzie:
Ora, volevo fare la stessa cosa del pulsante "reset" (cioè quello che fa cancellare i contenuti dei campi di testo) ma non funziona. Come posso fare?
Un'altra cosa: come si fa a fare questi pulsanti con i CSS? Oppure, se è lungo da spiegare, sai dove posso trovare della documentazione in italiano?
Perchè ho scaricato 2 manuali di CSS ma non parla di queste cose...

Ciao
Max!

Endorama · 10 Mar 2009

una possibilità per usare i css è quella di definire la proprietà background-image.

Codice:

input submit#image {
background-image: url(image.gif);
}

se giochi bene con le proprietà, come border e padding, dovresti ottenere risultati piuttosto originali...

Per esempio da un'occhiata qui. Il pulsante "iscriviti" è un campo input sumbit, modificato solo via css.

Se poi vuoi maggiorni informazioni vai sul sito w3school.com, e nella sezione css c'è un bal database con tutte le propietà ed i loro utilizzi...

satifal · 10 Mar 2009

Puoi utilizzare l'elemento button anzichè input ed un css del tipo:

HTML:

<html>
    <head>
        <style type="text/css">
            #myResetButton {
                width: 80px;
                height: 30px;
                border-style: none; 
                cursor: pointer;
                background: transparent url(immagine1.gif) no-repeat center center;
            }
            #myResetButton:hover {
                background: transparent url(immagine2.gif) no-repeat center center;
            }		
        </style>
    </head>

    <body>
        <form action="pagina.htm" method="post">
            <input type="text" name="testo" /><br/>
            <button type="reset" id="myResetButton"></button><br/>
            <button type="submit">submit</button><br/>
        </form>
    </body>
</html>

Ovviamente è solo un esempio.
In #myResetButton puoi trovare le dimensioni da attribuire all'immagine, la disabilitazione dei bordi del pulsante di default (border-style: none; ) e l'assegnazione dell'immagine desiderata. Invece #myResetButton:hover serve, in caso lo si voglia, a fornire un effetto di pulsante premuto quando il cursore viene posizionato sul pulsante stesso sostituendo l'immagine originale con un'altra immagine.

Cerca

Cerca

Cambiare il pulsante "submit" del modulo

max1850

Utente Attivo

satifal

Utente Attivo

max1850

Utente Attivo

Endorama

Nuovo Utente

satifal

Utente Attivo

Discussioni simili