Este código genera un formulario con dos campos de, uno de tipo texto y otro de tipo password y un botón de tipo sumit, Podria ser utilizado como login, pero en esta vez solo le vamos a dar la funcionalidad de cambiar el contorno de los campos al recibir y perder el enfoque.
Obs. El codigo correspondiente a css es recomendable ponerlo en un arhivo externo (.css) asi como tambien el codigo javascript (.js). Aquí lo coloque de esta forma solo para ser mas facil su analisis.
Se puede utilizar una combinación muy variada, con 4 colores básicos.
body
{
background-color:#789898;
}
.fondo, .SinEnfoque
{
background-color:#f9ebae;
}
.top, .bottom
{
background-color:#3c6573;
}
.Enfoque
{
background-color:#e8b54d;
}
Aquí estan otras 2 combinaciones
#193441;
#fcfff5;
#3e606f;
#d1dbbd;
#b64926;
#fff0a5;
#8e2800;
#ffb03b;
Nota: se tienen que cambiar los colores en el orden que aparece en el código.
<html>
<head>
<style type="text/css">
body
{
background-color:#789898;
}
.fondo, .SinEnfoque
{
background-color:#f9ebae;
}
.top, .bottom
{
background-color:#3c6573;
}
.Enfoque
{
background-color:#e8b54d;
}
.fondo, .top, .bottom
{
width:780px;
}
.Enfoque, .SinEnfoque
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
margin-left:20%;
margin-right:20%;
}
</style>
<script language="JavaScript">
function recibirEnfoque(valor){
document.getElementById(valor).className = "Enfoque";
}
function perderEnfoque(valor){
document.getElementById(valor).className = "SinEnfoque";
}
</script>
</head>
<body>
<table align="center">
<tr class = "top"><td><br><br></td></tr>
<tr class = "fondo"><td>
<form action="algo.jsp" name="p" method="post">
<div class = "SinEnfoque" id="i1">
Usuario : <br><input TYPE="TEXT" name="usuario" onFocus="recibirEnfoque('i1');" onBlur="perderEnfoque('i1');">
</div>
<div class= "SinEnfoque" id="i2">
Password :<br><input TYPE="PASSWORD" name="clave" onFocus="recibirEnfoque('i2');" onBlur="perderEnfoque('i2');">
</div>
<br>
<div class = "SinEnfoque">
<input type="submit" value="Continue" />
<div>
</form>
</td></tr>
<tr><td class = "bottom"><br></td></tr>
</table>
</body>
</html>
Obs. El codigo correspondiente a css es recomendable ponerlo en un arhivo externo (.css) asi como tambien el codigo javascript (.js). Aquí lo coloque de esta forma solo para ser mas facil su analisis.
Se puede utilizar una combinación muy variada, con 4 colores básicos.
body
{
background-color:#789898;
}
.fondo, .SinEnfoque
{
background-color:#f9ebae;
}
.top, .bottom
{
background-color:#3c6573;
}
.Enfoque
{
background-color:#e8b54d;
}
Aquí estan otras 2 combinaciones
#193441;
#fcfff5;
#3e606f;
#d1dbbd;
#b64926;
#fff0a5;
#8e2800;
#ffb03b;
Nota: se tienen que cambiar los colores en el orden que aparece en el código.
Comentarios
Publicar un comentario