04/10/2018, 18:03
Tạo Login Form giống WordPress Admin với CSS3 và jQuery
Nếu các bạn đang hoặc đã dùng WordPress thì có lẽ đã quá quen thuộc với form login khi đăng nhập vào trang Admin. Khi chúng ta nhập sai username hoặc password thì nó sẽ thông báo lỗi đăng nhập cùng với hiệu ứng rung chuyển form. Hôm nay mình sẽ bày cho cho các bạn cách làm ra hiệu ứng tương tự như ...
Nếu các bạn đang hoặc đã dùng WordPress thì có lẽ đã quá quen thuộc với form login khi đăng nhập vào trang Admin. Khi chúng ta nhập sai username hoặc password thì nó sẽ thông báo lỗi đăng nhập cùng với hiệu ứng rung chuyển form. Hôm nay mình sẽ bày cho cho các bạn cách làm ra hiệu ứng tương tự như vậy cho chính website hay blog mà các bạn đang sở hữu.
Xem Demo | Download
Javascript
Đầu tiên các bạn chèn đoạn khai báo sau vào bên trong thẻ <head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
index.php
Kế tiếp chúng ta sẽ chèn form login dùng để người dùng đăng nhập
<form method="post" action="index.php"> <p> <label for="username">Username<br /> <input type="text" id="username" name="username" class="input" value="<?php echo (isset($_POST['username']) ? $_POST['username'] : ') ?>" size="20" tabindex="10" /></label> </p> <p> <label for="password">Password<br /> <input type="password" id="password" name="password" class="input" value="<?php echo (isset($_POST['password']) ? $_POST['password'] : ') ?>" size="20" tabindex="20" /></label> </p> <p class="submit"> <input type="submit" name="submit" id="submit" class="submit-button" value="Log In" tabindex="100" /> <input type="hidden" name="task" value="login" /> </p> </form>
PHP
Sau đó các bạn copy toàn bộ đoạn php bên dưới và đặt nó bên trên form đăng nhập, đoạn php này có tác dụng là kiểm tra thông tin nhập của người dùng và nếu dữ liệu nhập vào không trùng khớp thì hiệu ứng ” rung chuyển ” sẽ xuất hiện.
$errs = ';
$success = ';
if(isset($_POST['task']) && $_POST['task']=='login')
{
$username = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);
if( $username == "" || $password == "") {
$errs = 'Fields are required.';
//add jquery effect to shake our login form ?>
<script type="text/javascript">
$(document).ready(function() {
$(".login form").effect("shake", { times: 3 }, 64);
});
</script>
<?php
} else {
if( $username == "demo" && $password == "demo" ) {
$_SESSION['username'] = "Demo";
$_SESSION['password'] = "demo";
$_SESSION['stat'] = 1; //set status to 1
$success = 'You
e successfully login.';
} else {
$errs = 'Invalid Username or Password.';
//add jquery effect to shake our login form ?>
<script type="text/javascript">
$(document).ready(function() {
$(".login form").effect("shake", { times: 3 }, 64);
});
</script>
<?php
}
}
}
//add a condition if stat variable is already set
if(isset($_SESSION['stat']) == 1) : ?>
<form method="post" action="index.php"><fieldset>
<p><?php echo 'Welcome <strong>' . $_SESSION['username'] .'</strong>'; ?></p>
<input type="submit" class="submit-button" value="Logout" />
<input type="hidden" name="task" value="logout" />
</fieldset></form>
<?php else : ?>
<div class="message">
<?php if($errs != "") { echo '<p class="error">'.$errs.'</p>'; } ?>
<?php if($success != "") { echo '<p class="success">'.$success.'</p>'; } ?>
<?php if(isset($_GET['log']) != "") { echo '<p class="success">You are now logged out.</p>'; } ?>
</div>
CSS
Và để form đăng nhập của chúng ta trông giống như bên WordPress Admin, các bạn sử dụng thêm đoạn css sau :
.login * {
margin: 0;
padding: 0;
}
.title{
font: italic 26px Georgia;
margin-bottom: 20px;
margin: auto;
}
.login{
awidth: 320px;
padding: 20px 0 0;
margin: auto;
}
.login label {
color: #777;
font-size: 14px;
cursor: pointer;
}
.login form {
margin-left: 8px;
padding: 24px 20px 46px;
font-weight: normal;
background: white;
border: 1px solid #E5E5E5;
/* add login box shadow */
-moz-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Mozilla*/
-webkit-box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px; /*for Chrome and Safari*/
box-shadow: rgba(200,200,200,0.7) 0 4px 10px -1px;
}
.login form .input {
font-weight: 200;
font-size: 24px;
line-height: 1;
awidth: 100%;
padding: 3px;
margin-top: 2px;
margin-right: 6px;
margin-bottom: 16px;
border: 1px solid #E5E5E5;
background: #FBFBFB;
outline: none;
/* add input box a inset shadow */
-moz-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Mozilla*/
-webkit-box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2); /*for Chrome and Safari*/
box-shadow: inset 1px 1px 2px rgba(200,200,200,0.2);
}
input.submit-button {
float: right;
border: 1px solid #298CBA;
font-weight: bold;
color: white;
background: #21759B;
text-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0;
padding: 3px 10px;
cursor: pointer;
/* add submit button a rounded corner */
-o-border-radius: 10em; /*for opera*/
-khtml-border-radius: 10em;
-webkit-border-radius: 10em;
border-radius: 10em;
/* add background gradient effet */
/*for Chrome and Safari*/
background: -webkit-gradient(linear, left top, left bottom, from(#298CBA), to(#217096));
/*for Mozilla*/
background: -moz-linear-gradient(top, #298CBA, #217096);
/*for IE*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#298CBA', endColorstr='#217096');
}
input.submit-button:hover { border: 1px solid #000; }
Mình mong là qua bài viết này, các bạn sẽ học thêm được một chiêu mới và áp dụng cho chính website hay blog của mình.
Chuyên Mục: Javascript, PHP
Bài viết được đăng bởi webmaster
