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.
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">
<!--
.cajon {
PADDING-RIGHT: 0.1em;
PADDING-LEFT: 0.1em; PADDING-BOTTOM: 0.1em; FONT: 9pt "Verdana, Tahoma, Arial";
MARGIN-LEFT: 0.1em; PADDING-TOP: 0.1em; BACKGROUND-COLOR: #FFFFF0; TEXT-ALIGN:
left
}
.boton {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000
1px solid; FONT-SIZE: 11px; BACKGROUND: #FFFFF0; BORDER-LEFT: #000000 1px solid;
COLOR: #000000; BORDER-BOTTOM: #000000 1px solid; FONT-STYLE: normal;
FONT-FAMILY: verdana, arial, "trebuchet MS", helvetica,
sans-serif
}
-->
</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. |
Nombre del Tutorial
Visitas
Ir arriba