Comunidad de diseño web y desarrollo en internet

Cambiar los tipicos botones ENVIAR y BORRAR de un Formulario

Citar            
MensajeEscrito el 28 Nov 2006 08:46 pm
Como puedo cambiar los tipicos botones "ENVIAR" y "BORRAR" de un formulario de contacto por IMAGENES....

Por crew

168 de clabLevel



 

Desde el Pais + Largo del Mundo...CHILITO Lindo

msie
Citar            
MensajeEscrito el 28 Nov 2006 09:39 pm
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...

Por ryuz

350 de clabLevel

2 tutoriales

 

L'H

firefox
Citar            
MensajeEscrito el 28 Nov 2006 11:05 pm

ryuz escribió:


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...


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

Por frenadoll

922 de clabLevel

6 tutoriales

Genero:Masculino  

Barcelona

firefox
Citar            
MensajeEscrito el 29 Nov 2006 06:38 pm
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!!!

Por crew

168 de clabLevel



 

Desde el Pais + Largo del Mundo...CHILITO Lindo

firefox
Citar            
MensajeEscrito el 29 Nov 2006 07:13 pm
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

Por fael

BOFH

2443 de clabLevel

3 tutoriales
2 articulos

 

firefox
Citar            
MensajeEscrito el 29 Nov 2006 07:31 pm

Código :

... type="image" ...


Si no no hay inagen.

Por ryuz

350 de clabLevel

2 tutoriales

 

L'H

firefox
Citar            
MensajeEscrito el 29 Nov 2006 08:22 pm
RYUZ...si cambio por "IMAGE", el boton BORRAR pierde la funcion de RESERT (borrar)...

Por crew

168 de clabLevel



 

Desde el Pais + Largo del Mundo...CHILITO Lindo

firefox
Citar            
MensajeEscrito el 29 Nov 2006 08:36 pm
Pues usa CSS. O mira como lo hacen aquí

Por ryuz

350 de clabLevel

2 tutoriales

 

L'H

firefox
Citar            
MensajeEscrito el 29 Nov 2006 09:02 pm
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!!!

Por crew

168 de clabLevel



 

Desde el Pais + Largo del Mundo...CHILITO Lindo

firefox
Citar            
MensajeEscrito el 29 Nov 2006 10:04 pm
jejeje.... bien facil, cuenstion de usar el coco :lol: :lol: :lol:


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.

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 30 Nov 2006 02:43 pm
Gracias BUZU....pero tengo un detalle resulta que el JAVAScript me funciona solamente en el EI y no en el MOZILLA....

Por crew

168 de clabLevel



 

Desde el Pais + Largo del Mundo...CHILITO Lindo

firefox
Citar            
MensajeEscrito el 30 Nov 2006 04:44 pm
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

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 30 Nov 2006 08:53 pm
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; }

Por NEO_JP

BOFH

5825 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Bastard Operators From Hell Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 30 Nov 2006 09:02 pm
amigo mio.... tienes toda la razon.... rayos... el buzu y sus malos consejos jejejeje bueno, todos nos equivocamos,

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 04 Dic 2006 05:33 am
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.

Por NEO_JP

BOFH

5825 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Bastard Operators From Hell Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 04 Dic 2006 05:13 pm
tienes toda la razon....

Por buzu

163 de clabLevel



 

Los Angeles, California

firefox
Citar            
MensajeEscrito el 11 Abr 2009 03:09 am
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

Por EliaNosft

13 de clabLevel



Genero:Masculino  

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.