Iluminar formularios con CSS y Javascript

24 de junio de 2003

Como modificar propiedades de color de fondo de objetos de un formulario al pasar el ratón por encima.

El leer el artículo sobre iluminación de tablas, celdas, filas me parece muy interesante y necesario en algunas labores de programación de páginas webs. Interesado en dicho artículo y con ayuda de Programación en Javascript II, que también se publica en este site, se muestra este pequeño trabajo.

Paso 1:

Los colores de fondo de las cajas de texto y algunas otras propiedas se manipulan más a menudo utilizando hojas de estilo. En este primer paso lo hacemos bastante simple. Poner este script en el head <head> xxx </head>

<script>
function form_uno(num_form,num_elem_form,color_entrada) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=color_entrada;
document.forms[num_form].elements[num_elem_form].focus();
}
function form_dos(num_form,num_elem_form,color_default) {
document.forms[num_form].elements[num_elem_form].style.backgroundColor=color_default;
}
</script>

Paso 2:

Agregamos el código de la siguiente manera:

<form method="post" action="" name="miformulario">
<p>
<input type="text" name="campo1" onMouseOver="form_uno(0,0,'Lavender');" onMouseOut="form_dos(0,0,'ffffff');" class="cajon" >
<br>
<input type="text" name="campo2" onMouseOver="form_uno(0,1,'red');" onMouseOut="form_dos(0,1,'ffffff');" class="cajon">
<br>
<textarea name="campo3" onMouseOver="form_uno(0,2,'blue');" onMouseOut="form_dos(0,2,'ffffff');" class="cajon"></textarea>
<br>
<select name="campo4" onMouseOver="form_uno(0,3,'cccccc');" onMouseOut="form_dos(0,3,'ffffff');" class="cajon">
<option value="1">uno</option>
<option value="2">dos</option>
<option value="3">tres</option>
<option value="4">cuatro</option>
<option value="5">cinco</option>
</select>
</form>

El resultado es el siguiente:

Hasta este punto vemos que nuestro formulario se ve bastante convencional, para mejorar un poco nuestra presentación se debe incluir código de estilo, como el que sigue:

Paso 3:

Poner este script en el head <head> xxx </head>:

<style type="text/css">

</style>

Paso 4:
Lo que queda solamente es hacer el enlace de los objetos del formulario con el respectivo estilo que deseamos. Entonces el código quedaría así como sigue y el resultado se ve en el siguiente cuadro.

<form method="post" action="" name="miformulario2">
<input type="text" name="campo12" onMouseOver="form_uno(1,0,'Lavender');" onMouseOut="form_dos(1,0,'FFFFF0');" class="cajon" >
<br>
<input type="text" name="campo22" onMouseOver="form_uno(1,1,'red');" onMouseOut="form_dos(1,1,'FFFFF0');">
<br>
<textarea name="textarea" onMouseOver="form_uno(1,2,'blue');" onMouseOut="form_dos(1,2,'FFFFF0');" class="cajon"></textarea>
<br>
<select name="select" onMouseOver="form_uno(1,3,'cccccc');" onMouseOut="form_dos(1,3,'FFFFF0');" class="cajon">
<option value="1">uno</option>
<option value="2">dos</option>
<option value="3">tres</option>
<option value="4">cuatro</option>
<option value="5">cinco</option>
</select>
<input type="submit" name="Submit" value="Enviar" class="boton">
</form>

El resultado 2 es el siguiente:

Las funciones form_uno y form2 se explican a continuación:

function form_uno(num_form,num_elem_form,color_entrada)

Los 2 primeros parámetros corresponden a números que representan a un formulario (num_form) puedes fijarte que el primer formulario se llama miformulario y el segundo miformulario2, en vez de emplear estos nombres se emplean valores númericos, el siguiente parámetro representa un objeto de dicho formulario (num_elem_form) y el tercer parámetro representa un valor de un color o su respectivo nombre.
El cuerpo de cada función corresponden a la manipulación de las propiedades de los objetos de los formularios.

Referencia: Para entender mejor parte del código java script se recomienda leer el manual Programación en Javascript II.

Definitivamente este código se puede mejorar y un pequeño ejemplo de esto lo pueden observar en:
http://www.ayacuchoenlinea.com/copechi/inscripcion.html

Richar Mendoza

Webmaster de AyacuchoEnLinea, Universidad San Cristóbal

Manual

Taller de Javascript

Inhibir radio button con Javascript

Autozoom de texto con Javascript