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>
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>
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
Informe de Richar Mendoza*
Webmaster de AyacuchoEnLinea, Universidad San Cristóbal
URL: http://www.ayacuchoenlinea.com
Usuarios que han visto este tema también han visto...
- CSS Dock Menu
- Como quitar los subrayados a los links
- Dandole estilo a los botones
- CSS dock menu
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.