Pedir presupuesto

Campos de formularios que cambian al hacer clic

Seguro que habréis visto algún que otro formulario en el que al posicionarse en un campo, la caja de texto cambia de estilo (color de fuente, color de fondo, tamaño, etc …).

Hoy vamos a explicar como podemos hacer que un formulario cambie de color de fondo al posicionarnos en él de una manera sencillisima.

Formulario Web

Para empezar vamos a crear un formulario bastante siemple con dos campos: usuario y password:

[html]

Usuario:

Password:

[/html]

Ahora mismo no tiene ningún estilo, asi que vamos a darle un primer cambio, poniéndo el fondo de un color gracias a CSS, para ello vamos a añadir entre las etiquetas head el siguiente código:

[css]

[/css]

Y para hacer referencia, añadiremos la llamada a dicha clase en los campos de texto con la etiqueta class, de la siguiente forma:

[html]

Usuario:

Password:

[/html]

Con este cambio no basta, ya que tenemos que tener en cuenta el comportamiento para cuando el usuario hace clic en el campo de texto, para eso utilizaremos la función onFocus de Javascript, añadiendolo en cada uno de los campos:

[html]

Usuario:

Password:

[/html]

Para que funcione tendriamos que añadir también el estilo css para cuando nos posicionamos en el campo, que en este caso lo hemos llamado input_confoco

[css]

[/css]

Es hora de probarlo.

Si habéis probado un poco este formulario, veréis que falta algo por hacer ¿verdad?. Pues sí, faltaría el estado on_blur que sería cuando el campo pierde el foco. Ya que ahora mismo, si hacemos clic en el primer campo y despues en el segundo, el fondo sigue teniendo el mismo color que en on_focus.

Vamos a arreglarlo con la función onBlur de javascript:

[html]

Usuario:

Password:

[/html]

Ahora si lo probáis, y vais haciendo clic en un campo y en otro veréis como el estilo vuelve al inicial si quitamos el foco.

El código completo del ejemplo con un poco de estilo sería el siguiente:

[html]


Cambiar estilo en campos de formulario al hacer clic


COLORATE

Estilos en campos

Usuario:

Password:



[/html]
Para cualquier duda, ya sabéis, escribir comentarios.

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es