JMiur [E]

En general, los elementos de los formularios no son sencillos de personalizar, No es que sea muy necesario hacerlo pero, a veces queremos experimentar un poco.

Un formulario es un elemento que permite que interactuemos con una página web y se crea con la etiqueta <FORM> </FORM>. Esta, es un contenedor y se usa para colocar cosas dentro de ella; en ese sentido es similar a una etiqueta DIV excepto que tiene algunos atributos extras que nos permiten indicar el tipo de acción a realizar:

action="direccionURL" es "el lugar" donde se procesa la información
method="VALOR" es la forma en que funciona; puede ser POST o GET.

Dentro de ese formulario hay diferentes etiquetas que podemos usar; son los controles, eso que vemos; donde ingresamos o seleccionamos dato, donde establecemos opciones o damos órdenes. Muchos de esos controles se crean con la etiqueta: <INPUT> </INPUT> donde lo único que varía para diferenciarlas es el atributo type. Por ejemplo:

<input type="text" ... />
<input type="checkbox" ... />
<input type="radio" ... />
<input type="submit" ... />
<input type="image" ... />

El tipo submit es el que usamos para crear botones; submit envia la información a donde nos lo indican los atributos de FORM pero, también podemos utilizar una variante para tener botones que ejecuten rutinas de JavaScript propias:
<input type="button" value="elTexto" />
Por ejemplo, mostrar y ocultar elementos:


Una alternativa para los botones es la etiqueta BUTTON que funciona igual pero nos ofrecen más posibilidades gráficas y además, a diferencia de INPUT, los navegadores no les dan propiedades por defecto así que es mucho mas sencillo personalizarlas:
<button type="submit"> contenido </button>


La posibilidad de agregar contenido también hace la diferencia ya que en su interior, no sólo podemos incluir textos simples sino textos formateados o imágenes:
<button type="submit"> 
Es es un <strong>Texto</strong> formateado
</button>

<button type="submit">
<img src="unaImagen" /> 
</button>
Un ejemplo de esta flexibilidad es la posibilidad de usar CSS para crear una clase que unifique el estilo de los botones:






button.demoB { /* el botón en si mismo */
background: URL(imagenIzquierda) no-repeat right;
border: 0;
margin: 0;
padding: 0 3px 0 0;
overflow: visible; /* para eliminar el padding en IE */
text-align: center;
}
button.demoB span { /* el texto del botón */
color: #FFFFFF;
display: block;
height: 23px;
font: bold 11px/23px Arial, Helvetica, sans-serif;
background: URL(imagenDerecha) no-repeat left top;
padding: 0 5px 0 8px;
position: relative;
text-transform: uppercase;
white-space: nowrap;
}

24 comentarios:

jesgo  

Excelente, como siempre. ¿Cómo se podría poner una [form] pero con el botón invisible de forma que pulsando en otra imagen haga la función "submit" que se pretende?.
pd. empiezo a hacer pruebas con el tema del degradado...
Gracias. Un saludo.

Responder
Fender Stratokaster  

En verdad me emocionó (no exagero) haber cambiado el gif de “Pantalla Completa” por un botón decente, pero pronto llegó el desencanto al probarlo en el Explorer.

¿Qué puedo hacer para que también funcione en ese mugroso navegador, JMiur?

Saludos.

Responder
JMiur  

jesgo:
¿Esa imagen donde quieres hacer click está fuera del formulario? Si está dentro es muy sencillo de resolver porque un botón puede ser una imagen.

Fender:
Fíjate si esto te ayuda a superar el desencanto :)

Agrega este estilo al botón:

<button
style="border: 1px solid #797B7F;
background-color: #EFEDED;
text-decoration: none; height: 25px;" ......... >

Todo junto, claro.

No será 100% igual pero estará mas cerca.

Responder
Anónimo  

POST y GET ambos envian informacion, la diferencia es que uno la muestra en la url y el otro no.

;-)

Responder
jesgo  

La imagen está fuera del formulario.

Responder
lvp.ad  

Hola Jmiur! Me gustaría añadir un botón, que al pulsarlo se desplegara una lista con todos los banners quetego enlazando a otras webs, por lo tanto son imágenes que al pulsar en ellas te llevan a otra web no? y eso, que me gustaría tener todas dentro de un botón, el cual al pulsarlo desplegara la lista...

saludos!

Responder
Jony  

perdona Jmiur! el de arriba soy yo ups...

Responder
JMiur  

Jony:
Si entendí bien la idea, puedes ver este post. Se trataría de tener algún elemento oculto y expandirlo o contraerlo con un botón o una imagen que sirva de enalce.

jesgo:
Una posibilidad sería esta. Imagina que tu formulario es este:

<form name='miFormulario' .......... >
..........
</form>

Es importante que tenga el parámetro name definido.

Luego, desde cualquier enlace se envia con JavaScript. Por ejemplo:

<a href="#" onClick="document.miFormulario.submit();">
<img src="laImagen" />
</a>

La instrucción clave es:
document.miFormulario.submit()

Debería funcionar.

Responder
Dr. Gnomegang  

Hablando de botones...
me sentiría muy honrado si le hecharas un vistazo al nuevo look de mi blog, y a ver que tal la carga....

Saludos!

Responder
JMiur  

Allá voy, Doktor :)

Responder
jesgo  

Jorge,
Funcionó, como no podía ser de otra forma... eres un seguro de vida (bloggero). Lo puedes comprobar en jesgo23 en el widget "Enlázame".
En cuanto a mi consulta de los fondos degradados también arreglado. Lo verás en cualquiera de los posts.
Muchísimas gracias.

Responder
JMiur  

Jesgo:

Me alegro, tenía mis dudas :$

Lo de los fondos quedó perfecto :)

Responder
La Dueña  

Hola, quería saber como hacer para que botón se alinee hacia la derecha.
Saludos!

Responder
JMiur  

Depende de cómo es el resto del código. Una forma simple sería así:

<p style="text-aligh:right;"><input ......... /></p>

Responder
chato  

hola estimadisimo jmiur toda tu informacion me ha servido y gracias, pero como puedo cambiar de color los botones, rojos, negros, azules, etc. otra vez mil grs, espero tu respuesta.

Responder
JMiur  

¿Qué clase de botones? Es que hay muchos, pueden sr imágenes, botones de formularios o enlaces.

Básicamente, el color de fondo se crea con la propeidad de estilo background-color.

Responder
chato  

disculpa el botón es submit y estoy utilizando la sintaxis que recomendaste button type="submit" contenido cierra button pero quisiera modificarlo a negro y que este de dimensiones un poco mas grandes no se si me podrías dar un ejemplo de la sintaxis que debo utilizar.
de antemano grs y como siempre los blogeros podemos contar contigo.

Responder
JMiur  

Si es un control INPUT, podría ser algo así:

<input type="submit" style="background: #COLOR; border:none;width:VALOR;px; ....." />

background: #COLOR; es el color de fondo
border:none; por defecto tienen un borde, puede quitarse
border:1px solid #COLOR; o ponerse calquier otro color
width:VALOR;px; es el ancho

también puede agregarse cualquier propeidad de texto o de fuentes.

Responder
chato  

muchas grs jmiur por contestar mis preguntas tan pronto y otra vez felicidades por de un fan tuyo

Responder
JMiur  

Suerte, Chato . Espero que funcione :D

Responder
MLR77  

JMiur saludos otra vez por aca, creo que tu blog es punto fijo para cualquier blogero aficionado y novato como yo , de veras tienes un muy buen material

Felicitaciones !!!!!!!!

pero tengo un solo problema estoy haciendo una web y no me resulta editar el tamaño del boton ni el tamaño de las letras

si pudieras mirar estan en portalevangelismo.blogspot.com

Responder
JMiur  

¿Cua´les son los botones? En ti blog, no veo que haya ninguna definición dee stilo para eso.

Responder
MLR77  

Saludos Jmiur
Solo te escribo para felicitarte por esta pagina no sabes de cuanta utilidad ha sido, para mi no creo estar dandote la lata con mis agradecimientos , pero la verdad te lo mereces, tu blog ha sido de gran ayuda creo que mas que ayuda para todos nosotros
el blog quedo asi http://portalevangelio.blogspot.com/ los botones no quedaron tan bonitos como en tu ejemplos pero en fin son botones y funcionan como tales jajaja

Quiero que sepas que nuestro grupo de oracion ha orado por ti, para que sigas prestando este valioso servicio Dios te Bendiga, y creo que este blog seguira siendo el eje de la edicion de codigos y esas cosas

Gracias, gracias , gracias

Responder
JMiur  

Gracas por el comentario, MLR77 :-)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR