DotNetcr.com
Si deseas hacer un intercambio de links con DotNetcr, escríbenos aquí
Recibe las actualizaciones vía RSS
Te invitamos a unirte en nuestras redes
   http://www.facebook.com/DotNetcr
   http://www.twitter.com/dotnetcr

Estilizando Formularios

Por CSSboulevar | 9/17/2006 | Visitas 20,643 | Voto 1.00
Una de las preguntas más frecuentes cuando se habla de diseño bajo css es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos.
Categorías : CSS - Themes
Una de las preguntas más frecuentes cuando se habla de diseño bajo css es como se pueden estilizar los formularios ya que en muchas ocasiones es la parte de un sitio que no queda de acuerdo al estilo del resto de los elementos. Por esto, en esta, mi primera colaboración para CSS Boulevar decidí que sería buena idea escribir al respecto.

En realidad la estilización de formularios es más simple de lo que parece, sin embargo, se necesitan de un par de trucos para adquirir la apariencia que se quiere la cual aún está limitada por ciertas características que no todos los navegadores actuales soportan.

Para comenzar, lo primero que tenemos que hacer es hacer el diseño de como vamos a querer que se vea nuestro formulario. Desde este punto vamos a tener que tomar en cuenta muchs consideraciones que veremos más adelante y que para este caso no tomé en cuenta a propósito por tratarse de un ejemplo en el que hay que resaltar estas limitaciones.

Aquí podemos ver una imagen del diseño inicial.


El Marcado

El código (X)HTML de este ejemplo no tiene mayor ciencia, unicamente se trata de un formulario con 4 campos, algo típico de un sistema de comentarios, queda algo como lo siguiente:

<form name="formulario" id="formulario" method="">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" class="campo" />
<label for="email">E-mail:</label>
<input type="text" id="email" class="campo" />
<label for="url">URL:</label>
<input type="text" id="url" class="campo" />
<label for="comentario">Comentario:</label>
<textarea id="comentario" class="campo"></textarea>
<br />
<input type="submit" id="boton_enviar" name="enviar" value="Enviar" />
</form>


Lo único que hay que resaltar es la falta de definición del tamaño de los campos de texto, esto lo haremos por medio de CSS asi que no es necesario definirlos por el momento
Estilizando

Aplicar estilos a formularios no es diferente de hacerlo con cualquier otro elemento, para empezar, unicamente vamos a agregar color al fondo de la página para ver como esta nuestro formulario inicialmenteen este primer paso.

body {
background: #A0CE00;
}


Como podemos ver nuestro formulario esta desordenado y no se ve nada bien. Lo primero que vamos a hacer es organizaro, para facilitar despues el resto del proceso. Vamos a desplegar las etiquetas como block para que se simulen los cambios de linea además de definir un poco el estilo general del formulario.

form {
padding: 50px;
background: #84AA00;
width: 250px;
}

label {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
display: block;
}

.campo {
margin-bottom: 20px;
}


Asi es como se ve nuestro formulario actualmente, ya está organizado pero se sigue viendo simple y el siguiente paso sera cambiarlo.

La primer parte importante para estilizar las cajas de texto es esconder lo que tenemos por default, esto nos va a permitir mas libertad ya que en realidad el truco nada más se trata de reemplazar las cajas con una imagen. Para que las cajas se escondan, si perder funcionalidad vamos a fundirlas con el color de fondo cambiando tanto los bordes como el fondo.

.campo {
width: 254px;
height: 30px;
margin-bottom: 20px;
border: 1px Solid #84AA00;
background: #84AA00;
}

#comentario {
width: 294px;
height: 193px;
}


En este tercer ejemplo, nuestro formulario parece no existir, sin embargo si movemos el cursor un poco vemos que sigue estando ahí.

Ahora si llegó la parte divertida, lo siguiente será añadir las imagenes como fondo, un simple background-image bastará para lograr el efecto.

.campo {
width: 254px;
height: 30px;
margin-bottom: 20px;
border: 1px Solid #84AA00;
background: #84AA00;
background-image: url(f1.jpg);
background-repeat: no-repeat;
padding: 2px;
color: #669966;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

#comentario {
width: 254px;
height: 193px;
background-image: url(f2.jpg);
background-repeat: no-repeat;
}


Extras

Basicamente el formulario esta listo, vamos a agregar un pequeño efecto para que se vea aún mejor. Hice un par de imagenes extra sin sombreado que se utilizan cuando el usuario pasa el cursor sobre la caja de texto.

.campo:hover {
background-image: url(f3.jpg);
}

#comentario:hover {
background-image: url(f4.jpg);
}


Si están utilizando un buen navegador, el efecto se ve sin problema alguno pero en Internet Explorer la situación es diferente ya que como sabemos, no reconoce el uso de hover en elementos que no sean enlaces, sin embargo, no hay ningún problema pues se sigue viendo la imagen inicial.

Aquí está nuestro ejemplo finalizado, pueden combinarlo con otros efectos como la decoración del drop-down menu para lograr formularios que se vean muy bien.

Como mencione al principio, nos encontramos aún con muchos problemas al estilizar formularios, en este ejemplo, podemos ver que las barras de scroll en el area de texto pueden llegar a verse mal y desafortunadamente estas no son estilizables más que en IE. Sin embargo, con un poco de imaginación y un par de sencillos hacks podemos lograr efectos para que los formularios vayan de acuerdo con el estilo del sitio.

Artículo suministrado por CSSBoulevar
Area de Comentarios
Por Anónimo - Fecha: 2011/12/28 01:45 PM
I thought I'd have to read a book for a dioscvrey like this!
Por Anónimo - Fecha: 2011/12/29 06:09 AM
l8qs5g , [url=http://xspxhfseovmx.com/]xspxhfseovmx[/url], [link=http://prkzsgucdgtv.com/]prkzsgucdgtv[/link], http://oisdgkksbtrr.com/
Por Anónimo - Fecha: 2011/12/31 08:14 AM
7YvPBc , [url=http://cfkpjfbolwhs.com/]cfkpjfbolwhs[/url], [link=http://cdkpqwxfotnl.com/]cdkpqwxfotnl[/link], http://nubbxdpdeegq.com/
Por Anónimo - Fecha: 2015/07/18 03:21 AM
Me he leido todo este hilo y estoy alucinando en cooelrs, no llevo mucho tiempo en esto, no me refiero a este sitio, sino a lo de los negocios en internet y en ninguno he visto que por el hecho de comprar, alquilar o lo que sea, referidos, te garantizen que estos a su vez van a traer otros referidos, es mc3a1s en los PTC y demc3a1s ni siquiera te garantizan que van a hacer click ni una sola vez, y si se dan de baja te aguantas y si quieres te compras o alquilas otro y no protestes, que a mi por hacerlo me dieron de baja en uno.Alfred, c2bfsi compras referidos es porque a tc3ad te cuesta trabajo hacerlos directamente? entonces tienes que entender que a los demc3a1s les pase lo mismo, asc3ad que dales tiempo, que esto no es un trabajo de fichar de 8 a 18 y puede ser que ellos todavc3ada no hayan entendido bien como funciona y lo esten asimilando antes de poder explicarlo.SaludosA Favor o En contra: 0 0
Por Anónimo - Fecha: 2015/07/21 01:27 PM
26 enero, 2013Hola Daniel. Creo que tu respuesta este1 reopdnsida en la que le acabo de dar a Nicolas. Utilizando el atributo name= loquesea[] en todos los checkboxes, y un valor diferente para cada uno, cuando proceses el formulario, por ejemplo en PHP, tendre1s un array que contiene sf3lo los que han sido marcados.< input type="checkbox" name="listado[]" value="1" />< input type="checkbox" name="listado[]" value="2" />< input type="checkbox" name="listado[]" value="3" />< input type="checkbox" name="listado[]" value="4" />Supongamos que sf3lo se han marcado los checkboxes con valor 2 y 4, en PHP tendredas que recoger los valores de un array con un for o foreach:< ?php$mi_listado = $_POST['listado'];$total = count($mi_listado);for($i=0; $i < $total; $i++){ echo $mi_listado[$i] . ' ';//Muestra: 2 4}?> http://khkyszksb.com [url=http://aoicpbyxa.com]aoicpbyxa[/url] [link=http://zndxliqsdu.com]zndxliqsdu[/link]
Por Anónimo - Fecha: 2015/12/17 01:45 PM
yani10 diciembre, 2012Hola Fran, nesiceto mostrar una imagen debajo del input si a este le han hecho click, use jquery pero no puedo ponerle un ocndicional.. y opte por java script pero no se como mostrar la imagen.te paso los codigo$( input ).click(function() {$( #log ).html( );});//me muestra perfecto la imagen en su respectiva div pero no puedo indicarla q se ponga debajo del checkedfunction habilitaDeshabilita(form){ if (form.boletin.checked == true) { .. } if (form.boletin.checked == false) { .. }}no se como mostrar la imagenEspero puedas ayudarme . Saludos!
Por Anónimo - Fecha: 2015/12/19 02:46 AM
26 enero, 2013Hola yani. Prueba el me9todo , que muestra u ouctla los elementos marcados.Por ejemplo, con este cf3digo, al hacer clic en un elemento con el atributo class igual a miCheck, muestra u ouctla un elemento con atributo class igual a miImagen$(".miCheck").click(function () {$(".miImagen").toggle("slow"); http://ktpoaojlsi.com [url=http://pawqhyzbsch.com]pawqhyzbsch[/url] [link=http://fwrsjoesd.com]fwrsjoesd[/link]
Por Anónimo - Fecha: 2015/12/20 02:20 PM
Lo me1s cf3mico es que ese plugin y ese texto lo ercisbed yo, pero lo mande por mail a todos, el que lo terminf3 posteando fue martin jajajaja, quiero mis creditos correspondientes! http://lzyqfnvza.com [url=http://olccvbmxg.com]olccvbmxg[/url] [link=http://gplbjtg.com]gplbjtg[/link]
Ingrese su Comentario
Comentario
Para poder votar debe estar registrado en DotNetcr.com
Solo queda registrado el primer voto enviado
Voto


Últimos Recursos
ricardo leppe t
pedrojavier
CALIN
willipinru
richard
ragomez
PER 238
MEX 236
CRI 188
COL 118
ESP 105
ARG 88