Este código mostra uma tela de login com nome e senha com vários efeitos:
– Muda cor de fundo e borda do campo e da linha do campo onde passa o mouse;
– Seleciona automaticamente o campo onde o mouse está;
– Exibe uma descrição de cada campo ao passar o mouse.
– Seleciona automaticamente o campo onde o mouse está;
– Exibe uma descrição de cada campo ao passar o mouse.
Você somente precisa deixar todos os arquivos na mesma pasta (login.htm, login.css, login.js, user.jpg, key.jpg, aut.jpg).
O formulário envia os dados para a página logar.html, mas você pode mudar isso editando a linha “”;
Você pode mudar cores e outros parâmetros diretamente no arquivo login.css.
O formulário envia os dados para a página logar.html, mas você pode mudar isso editando a linha “”;
Você pode mudar cores e outros parâmetros diretamente no arquivo login.css.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
<!-- logar.htm --!>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Sistema de Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="login.css" rel="stylesheet" type="text/css">
<script src="login.js" type="text/javascript"></script>
</head>
<body class="geral">
<strong></strong><div id="form" align="center" class="formlogin">
<form action="logar.html" method="post" name="login" id="login">
<div class="margem">
<div id="user_div" onMouseOver="ativarcampo(this)" onMouseOut="liberarcampo(this)">
<span id="user_div_span" class="dica">Digite sua identificação de usuário!</span>
<img src="user.jpg" name="user_img" width="24" height="24" border="0" align="middle">
<input name="user_div_field" type="text" size="50" maxlength="50" id="user" onMouseOver="this.focus()" class="cxtext">
</div>
<div id="pwd_div" onMouseOver="ativarcampo(this)" onMouseOut="liberarcampo(this)">
<span id="pwd_div_span" class="dica">Digite sua senha de acesso!</span>
<img src="key.jpg" name="user_img" width="24" height="24" border="0" align="middle">
<input name="pwd_div_field" type="password" size="50" maxlength="50" id="pwd" onMouseOver="this.focus()" class="cxtext">
</div>
<div id="enter_img_div" onMouseOver="ativarcampo(this)" onMouseOut="liberarcampo(this)">
<span id="enter_img_div_span" class="dica">Clique uma vez aqui para realizar
sua autenticação!</span> <img src="aut.jpg" name="enter_img" width="24" height="24" border="0" align="middle" onClick="javascript:document.login.submit()">
</div>
</div>
</form>
</div>
</body>
</html>
<!-- logar.css --!>
.geral {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
color: #3333FF;
text-decoration: none;
background-color: #0000;
text-align: justify;
vertical-align: middle;
word-spacing: normal;
white-space: normal;
}
.formlogin {
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FF0000;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
width: 500px;
height: 100px;
}
.dica {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic;
font-weight: lighter;
border: thin dashed #FF9900;
height: auto;
width: auto;
display: none;
position: absolute;
top: 150px;
left: 10px;
}
.margem {
margin: 20px;
}
.cxtext {
border: 1px solid #FF9900;
background-color: #C0C0C0;
}
<!-- logar.js --!>
// JavaScript Document
function ativarcampo(div){
div.style.backgroundColor="#FF9999";
div.style.border="thin dotted #FF0000";
var id_span=div.id+"_span";
var obj_span=document.getElementById(id_span);
obj_span.style.display="block";
var id_field=div.id+"_field";
var obj_field=document.getElementById(id_field);
obj_field.style.backgroundColor="#FFFFCC";
}
function liberarcampo(div){
div.style.backgroundColor="";
div.style.border="";
var id_span=div.id+"_span";
var obj_span=document.getElementById(id_span);
obj_span.style.display="none";
var id_field=div.id+"_field";
var obj_field=document.getElementById(id_field);
obj_field.style.backgroundColor="#C0C0C0";
}
|
Nenhum comentário:
Postar um comentário