Cuando uno diseña un sitio WEB, muchas veces deja de lado embellecer los formularios. ¿Porque? ni idea, pero esta claro cuando uno hace una navegacion por las distintas paginas web. Aunque, hay que admitir que esta practica esta cada dia mas en desuso y los nuevos diseñadores se toman muy en serio darle un lindo formato a los formularios.

Como siempre que trabajamos con diseño visual, lo recomendable es utilizar una hoja de estilo (CSS) para separar de esta manera el codigo del diseño. Ahora si, manos a la obra y a poner lindos nuestros formularios.

Algunas etiquetas tipicas de un formulario son asi:

<input type="text" name="nombre" id="nombre" /> (Campo de texto)
<select name="pais"id="pais"> (Campo Select)
<input name="enviar" type="submit" id="enviar" value="Enviar" /> (Boton de Envio)

Sabiendo estos puntos, sera mas facil poder darles un diseño a esos campos de texto, botones, selects y otros. Para ello, solo debemos agregar una clase en nuestra hoja de estilo, la cual se veria de esta manera.

input .normal{
font-family: Tahoma, Verdana, Arial;
font-size: 14px;
color: #FFFFFF;
background-color: #10689C;
border:#000000 solid thin;
}

Con esa clase, todos los campos de texto, que utilizan la clase "normal" (mas abajo esta el ejemplo de como se veria el codigo) se verian de la misma forma, con el mismo color de fondo y demas datos de diseño. Para el caso del select, podemos usar algo asi:

select {
font-family: Tahoma, Verdana, Arial;
font-size: 12px; color: #FFFFFF;
background-color: #10689C;
border:#000000 solid thin;
}

Y para los botones, podemos utilizar un estilo distinto para cada uno de ellos, solo debemos llamar cada clase de manera distinta, un ejemplo seria asi:

input.boton {
font-family: Tahoma, Verdana, Arial;
font-size: 12px;
width:100px;
height:30px;
color: #FFFFFF;
background-color: #10689C;
border:#000000 solid thin;
}

Luego, sera muy sencillo aplicar las clases para cada campo del formulario, solo hay que usar la siguiente sintaxis:

<input type="text" name="nombre" id="nombre" class="normal" /> (Campo de texto)
<input type="submit" name="enviar" id="enviar" value="Enviar" class="boton" " >(Boton de envio)

Para el  select, no hay que usar ninguna clase especial, ya que solo hay una etiqueta del tipo select, a diferencia de los inputs, que pueden adoptar varias formas, por ende, cualquier select que tengamos adoptara el diseño que hemos propuesto en la hoja de estilos.

Muy lindo, muy agradable, ¿pero porque no llevar esto un paso mas alla? ¿Porque no podemos darle un diseño al boton cuando esta "quieto" y otro cuando se esta escribiendo la informacion en el campo de texto?

En realidad si se puede y es muy facil, solo necesitamos dos clases que hagan referencia al input, una la llamaremos input normal, cuando no tiene el cursor encima y otra la llamaremos over, que sera cuando el cursor este encima del campo de texto. Nuestro CSS podria quedar asi:

input.normal {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
background-color: #10689C;
border:#000000 solid thin;
}

input.over{
background-color: #36393D;
color: #FFFFFF;
}

Luego, el codigo que debemos colocar en nuestro formulario se veria asi:

<input type="text" name="nombre" id="nombre" class="normal" onFocus="this.className=’over’"  onblur="this.className=’normal’"/>

En pocas palabras, esto significaria que mientras que no este el cursor en el campo de texto, este mantendra la clase "normal", mientras que cuando este el cursor, adoptara la clase "over". Por ultimo, cuando el cursor salga, volvera a la clase "normal"

Es bastante sencillo y se los recomiendo funciona muy bien con IE6 para arriba y con Firefox.

Pruebenlo y me cuentan

salu2

Agrega a:

Hide Sites