Cambiare il pulsante "submit" del modulo

max1850

max1850

Utente Attivo
8 Gen 2007
107
0
16
Cosenza
www.net-site.it
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

satifal

Utente Attivo
25 Set 2008
522
13
0
Roma
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

max1850

Utente Attivo
8 Gen 2007
107
0
16
Cosenza
www.net-site.it
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>
Clicca per allargare...
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!
 
E

Endorama

Nuovo Utente
7 Mar 2009
9
0
0
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...
 
Ultima modifica:
satifal

satifal

Utente Attivo
25 Set 2008
522
13
0
Roma
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.
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
webmachine [WOOCOMMERCE][WORDPRESS] Cambiare testo pulsante Acquista E-Commerce 0
P Cambiare il valore di un campo tabella con un pulsante cliccabile PHP 2
neo996sps Cambiare stato di un pulsante PHP 3
Shyson Cambiare colore al pulsante button HTML e CSS 6
F Url dinamiche da cambiare con categoria, subcategoria e title PHP 2
D Aiuto CSS in ELEMENTOR - Cambiare un testo CMS (Content Management System) 0
M Cambiare pennello a lavoro completo Photoshop 0
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
Y cambiare sfondo di una pagina Javascript 1
E Cambiare lingua in Elements per Mac Mac e Software 2
R Non riesco a cambiare l'immagine di sfondo PHP 4
K Cambiare font size su echo stringa variabile PHP 24
V [PHP Symphony] Cambiare da ApcCache ad OpCache PHP 4
P Cambiare visualizzazione con JS Javascript 1
Web93 CAMBIARE TAG POST TITOLO DA H2 A H1 WordPress 1
L [PHP] cambiare gli if in un url semplice PHP 1
G Cambiare colore ad un record database mysql MySQL 0
Domenico_Falco1 Cambiare url in un sito con pagine dinamiche Ajax 4
L Cambiare classi solo scroll up jQuery 2
Topografo Buon 2019 (Tutti gli altri hanno scritto "Salve a tutti", cerchiamo di cambiare) Presentati al Forum 1
joomeph Cambiare Nome Utente Supporto Mr.Webmaster 3
M [Visual Basic] Cambiare lo stato in checked delle checkbox richiamando dati dal database Visual Basic 6
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
Licantropo [MySQL] Cambiare le date MySQL 4
B [Javascript] Cambiare classe ed aggiornare relativi eventi Javascript 3
L Cambiare nome pagina facebook Annunci servizi di Social Media Marketing 4
P [HTML] Wordpress - cambiare font di un tema WordPress 1
L APPARECCHIO VOIP DA CAMBIARE Adsl e Connettività 0
T cambiare formato in uscita timestamp Database 0
O Allo scroll cambiare colore di sfondo jQuery 0
crealatualista [Javascript] Cambiare record tabella... Javascript 4
napuleone [Javascript] cambiare i parametri di stampa con js Javascript 2
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V javascript - cambiare immagine di sfondo di un div Javascript 3
D [Javascript] Script che consenta di cambiare un'immagine in base all'ora del giorno della settimana Javascript 11
B CAMBIARE PAGINA INIZIALE PHPMYADMIN MySQL 2
webmachine [WORDPRESS] Cambiare titolo pagina articoli WordPress 0
webmachine [PRESTASHOP] Cambiare ordine prezzo-sconto-prezzoscontato E-Commerce 1
B CAMBIARE TEMPLATES PHPMYADMIN MySQL 0
otto9due Dreamweaver CC 2017 - cambiare colorazione codice Windows e Software 5
webmachine [JQUERY] Cambiare immagine al click, toggle jQuery 1
A Cambiare Risposta onclick con Switch. Javascript 1
V Cambiare colore ad un button HTML e CSS 3
E Cambiare l'option di un select con jquery jQuery 1
ecosito CSS: è possibile cambiare font con uno non di uso comune? HTML e CSS 11
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Shyson Cambiare color all'onclick Javascript 9
elettroweb come cambiare testo Flash 0
M Cambiare dinamicamente il contenuto di un DIV Javascript 4
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16

Discussioni simili

Alto Basso