Olá pessoal. Tou com uma pequena dúvida eu estava logando normalmente na minha pagina fazendo meu login e senha com o seguinte código:
<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- permite acentuação gráfica -->
<body>
<form method = "POST" action = "login.php">
<p align = "center">Usuário:
<input type = "text" name = "username" size= "15"> </p><p align = "center">
Senha: <input type = "password" name = "senha" size = "15"> </p>
<p align = "center"> <input type = "submit" value = "Logar" name = "Logar"> </p>
</form>
</body>
</html>
Até ai beleza. Mas eu fiz uma tela de login mais bonita dae então não sei como adicionar esse código para essa mesma tela que agora esta com css. aqui vai o código:
<html>
<head>
<meta charset=utf-8/>
<title>Tutorial</title>
<style>
body{
background-color:#11a6d4;
}
#login-box{
background-color: #1992b7;
width: 380px;
height: 260px;
margin: 140px auto 0px;
border-radius:5px;
}
#login-box-interno{
width: 360px;
height: 240px;
background-color: #fdfdfd;
position: absolute;
margin: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
overflow: hidden;
}
#login-box-label{
height: 40px;
text-align: center;
font: bold 14px/45px sans-serif;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #feffe8;
background: -moz-linear-gradient(top, #feffe8 0%, #d6dbbf 100%);
background: -webkit-linear-gradient(top, #feffe8 0%,#d6dbbf 100%);
background: linear-gradient(to bottom, #feffe8 0%,#d6dbbf 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
border-bottom: 1px solid white;
box-shadow: 1px 0px 3px black;
color: #555555;
text-shadow: 1px 0px 1px white;
}
.input-div {
margin: 20px;
padding: 5px;
background-color: #f2f5f7;
border-radius: 3px;
}
.input-div input {
width: 310px;
height: 35px;
padding-left:5px;
font: normal 13px sans-serif;
color: #aeaeae;
border-radius: 3px;
border: 1px solid #bfc4c6;
out-line: none;
}
.input-div:hover{
background-color: #e0f1fc;
}
.input-div: hover input{
border-color: #7dc6dd;
}
#input-senha{
margin-top: 10px;
}
#botoes {
width: 310px;
margin-left:25px;
}
#botao {
float: right;
background-color: red;
padding: 4px 15px;
font: bold 12px sans-serif;
border-radius: 10px;
text-shadow: 0px 1px 0px white;
border: 1px solid #9eb9c3;
background: #edf6f9;
background: -moz-linear-gradient(top, #edf6f9 0%, #cde5ee 100%);
background: -webkit-linear-gradient(top, #edf6f9 0%,#cde5ee 100%);
background: linear-gradient(to bottom, #edf6f9 0%,#cde5ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 );
color: #527988;
box-shadow: 0px 0px 10px #c9c9c9;
}
#botao:hover{
background: #cde5ee;
background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
background: -webkit-linear-gradient(top, #cde5ee 0%,#edf6f9 100%);
background: linear-gradient(to bottom, #cde5ee 0%,#edf6f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 );
cursor: pointer;
}
#lembrar-senha{
font: normal 12px sans-serif;
}
</style>
</head>
<body>
<div id = "login-box">
<div id = "login-box-interno">
<div id = "login-box-label">Login </div>
<div class ="input-div" id= "input-usuario">
<input type = "text" value = "Usuário"/>
</div>
<div class ="input-div" id= "input-senha">
<input type = "text" value = "Senha"/>
</div>
<div id ="botoes">
<div id = "botao"> Login </div>
<div id = "lembrar-senha"><input type = "checkbox"/> Lembrar minha senha</div>
</div>
</div>
</body>
</html>