Cambiar los tipicos botones ENVIAR y BORRAR de un Formulario

Como puedo cambiar los tipicos botones "ENVIAR" y "BORRAR" de un formulario de contacto por IMAGENES....

La etiqueta input de siempre:

Código :

<imput type="submit" ...>

Usando CSS puedes modificar el aspecto del botón para cambiar el color, la fuente, márgenes...

Pero también se puede usar una imagen como botón de submit del formulario, de esta forma:

Código :

<imput type="image" src="boton.gif" ...>

Además también puedes usar las propiedades de la etiqueta <img>, alt, with, vspace...

ryuz escribió:

Como dice ryuz, esta es una buena forma si tu imagen es muy concreta, recuerda poner value="Enviar"

Ok esto lo aplico en mi boton "ENVIAR" (value = "Enviar")....pero como le hago con mi boton "BORRAR" (value="Borrar") ya que no cumple con la funcion de borrar (type="reset")

Código del Boton ENVIAR:

<input name="submit" type='submit' src="image/enviar2.jpg" class="txt" value="Enviar">

Código del Boton BORRAR:

<input name="submit2" type="reset" src="image/borrar2.jpg" class="txt" value="Borrar" />

pero no pasa nada en ambos casos!!!

crew, checa los tutoriales básicos de css, no por ponerle sólo una clase vas a hacer que éstos cambien automáticamente a lo que tenías en mente

Código :

... type="image" ...

Si no no hay inagen.

RYUZ...si cambio por "IMAGE", el boton BORRAR pierde la funcion de RESERT (borrar)...

Pues usa CSS. O mira como lo hacen aquí

RYUZ....yo otra vez, lo que hacen en EL CODIGO, lo hago pero me funciona con el Boton ENVIAR (incluso en el sitio hablan de ese cambio pero solo con el boton enviar), pero mi problema va con el BOTON BORRAR...ya que pierde la función al cambiar el codigo TYPE...

Lo de CSS...vere a que me lleva

Gracias!!!

jejeje.... bien facil, cuenstion de usar el coco


primero haces una fucnio de javascript a la que le dices lo siguiente

funcion borrar(){
var formulario=document.getElementById("miformulario);
//esa variable toma le elemento formulario alq ue le has
//agregado un id con valor miformulario, esoto por que
//en XHTML ya no usas name para el forum ok???
//ahora lo que borrara
formulario.micampo.value=""
formulario.micampo2.value=""
formulario.micampo3.value=""
}

oviamente a los campos les has puesto como name(por que si se puede) micampo, micampo2, micampo3 etc etc etc... luego
pones un enlace

<a href="#" onclick="borrar();"><img src="imagen.jpg" alt="borrar" title="borrar los campos" /></a>

y nada mas... quiza huvo algun herror de dedo, asi que checa el codigo ok

Espero te sirva.

Gracias BUZU....pero tengo un detalle resulta que el JAVAScript me funciona solamente en el EI y no en el MOZILLA....

revisa tu codigo, te dige eso desde el post anterior, mi codigo no necesariamente esta bien, puede que algo se me haya escapado, ya que lo hice de rapido, no para poner el codio a usar, sino para plantear una idea, y checa tu mozila, tal vez has bloqueado el javascript, postea el codigo y vemos que es lo que falla

Oh SHIT! Todo está mal. Todo lo que te han dicho no es la -mejor- forma. Solo usa una etiqueta button!!

Código :

<button type="submit" class="submit">Mi texto del botón enviar</button>
<button type="reset" class="reset">Mi texto del botón reset</button>

Y el resto va con css.

Código :

button { border:0; padding:0; margin:5px; }
button.submit { width:200px; height:80px; background:url(submit.png) no-repeat; }
button.submit { width:130px; height:50px; background:url(reset.png) no-repeat; }

amigo mio.... tienes toda la razon.... rayos... el buzu y sus malos consejos jejejeje bueno, todos nos equivocamos,

Mira el lado amable, aprendiste que existe el button y es lo mejor que hay en un formulario! Te olvidas de las complicaciones de los input type="button", type="submit", type="reset". Y son más fáciles de estilizar al ser una etiqueta aparte. Para ultimo te ahorra estar poniendo clases "btn" como loco.

PD: Si si, se que existe input[type="submit"] pero no es soportado, y button da mejor semántica a la web.

tienes toda la razon....

Bueno puede que este resuelto pero encontré algo mas simplificado

Código :

<img src="imagen.jpg" onclick="document.nombreDelFormulario.reset()">

obiamente al formulario le tienen que poner un nombre <form name="nombre del formulario">
y listo