Cambiar campos de formularios al hacer click

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Seguro que en alguna ocasión habréis visto formularios en el que al posicionarnos sobre un campo, la caja de texto cambia de estilo, ya sea porque cambia el color de fuente, tamaño, se añade o desaparece una imagen de fondo…

Estos son los pasos para conseguir que el estilo de los campos de un formulario cambien al hacer click sobre ellos:

Primero creamos un simple formulario con dos campos: usuario y mensaje:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″></p>
</form>

Mediante CSS ponemos el fondo de un color, para ello añadimos entre la etiqueta <head> o en la hoja de estilos el código:

<style type=”text/css”>
.input_sinfoco{
background: #EAF2FA;
border: 3px solid #464646;
}
</style>

Hacemos referencia añadiremos la llamada a dicha clase en los campos de texto con la etiqueta class:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″></p>
</form>

Para tener en cuenta el comportamiento cuando el usuario hace click en el campo de texto, utilizaremos la función onFocus de Javascript, añadiendo en cada uno de los campos:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco'”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco'”></p>
</form>

Añadimos también el estilo CSS para cuando nos posicionamos en el campo, en este caso llamado input_foco

<style type=”text/css”>
.input_sinfoco{
background: #B6B61C;
border: 3px solid #9B9B18;
}
.input_foco{
background: #E7AE10;
border: 3px solid #9B9B18;
}
</style>

Para finalizar.

Añadimos el estado on_blur utilizado cuando el campo pierde el foco.

Para ello utilizamos la función onBlur de Javascript:

<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco'” onblur=”this.className=’input_sinfoco'”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco'” onblur=”this.className=’input_sinfoco'”></p>
</form>

Con esto ya tendremos listo nuestro formulario. Ahora sólo falta insertar el código en nuestra página y comprobar su correcto funcionamiento.

El código completo del ejemplo es el siguiete:

<html>
<head>
<title>Cambiar campos de formularios al hacer click</title>
<style type=”text/css”>
.form{
width: 300px;
margin: 100px;
padding: 25px;
font-family: Helvetica, Arial, ‘Lucida Sans Unicode’;
font-size: 16px;
color: #9B9B18;
border: 3px solid #9B9B18;
/*background: #FED52B;*/
}
.input_sinfoco{
background: #B6B61C;
border: 3px solid #9B9B18;
}
.input_foco{
background: #E7AE10;
border: 3px solid #9B9B18;
}
</style>
</head>
<body>
<div>
<h1><strong>Cambiar campos de formularios al hacer click</strong></h1>
<h2>Estilos en campos</h2>
<form action=”#” method=”POST”>
<p>Usuario:</p>
<p><input type=”text” name=”usuario” maxlength=”30″ size=”30″ onFocus=”this.className=’input_foco'” onblur=”this.className=’input_sinfoco'”></p>
<p>Mensaje:</p>
<p><input type=”mensaje” name=”mensaje” maxlength=”300″ size=”300″ onFocus=”this.className=’input_foco'” onblur=”this.className=’input_sinfoco'”></p>
</form>
</div>
</body>
</html>

Sé la primera persona en comentar

Deja un comentario

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

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.