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.

tao-login-form-giong-wordpress-admin-voi-css3-va-jquery

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.

Tags: css3 login form php

Chuyên Mục: Javascript, PHP

Bài viết được đăng bởi webmaster

Bài liên quan

Tạo Folder tabs với CSS3 và jQuery

Hôm nay mình sẽ cùng với các bạn tạo các thẻ tab để phân chia nội dung, đây là một trong những phần mà các trang web hay dùng tới. Để tạo thẻ tab thì cũng không có gì là quá phức tạp , chỉ cần sử dụng vài dòng jQuery cơ bản và định dạng cho đẹp với CSS3 là xong. Xem Demo | Download ...

Tạ Quốc Bảo viết 20:10 ngày 04/10/2018

Flat Login Form với CSS3 và jQuery

Mẫu thiết kế login form mà mình giới thiệu cho các bạn trong bài viết này sẽ chứa cả form cho phép người dùng đăng ký thành viên, với hiệu ứng chuyển form được làm bằng CSS3 rất sinh động và đẹp mắt. Với mẫu này, các bạn có thể học thêm được rất nhiều các thuộc tính CSS3 cũng như cách tạo hiệu ứng ...

Trần Trung Dũng viết 20:08 ngày 04/10/2018

Tạo menu bao phủ màn hình với CSS3 và jQuery

Hiện nay, có khá nhiều trang web có những thiết kế táo bạo và không theo kiểu truyền thống, một trong những điều thay đổi nhiều nhất là cách bố trí menu trên trang web. Để các bạn có thể theo kịp những kiểu thiết kế này, mình xin chia sẻ cho các bạn một mẫu menu với hiệu ứng cực pro, giúp các bạn ...

Trần Trung Dũng viết 20:08 ngày 04/10/2018

Tạo trang giới thiệu ấn tượng với CSS3 và jQuery

Nếu các bạn đang cần tìm một mẫu thiết kế web dùng để giới thiệu công ty hoặc sản phẩm nổi bật nào đó thì thử dùng mẫu 3D Curtain Template mà mình chia sẻ trong bài viết này xem sao. Mẫu này được xây dựng từ những hiệu ứng động của CSS3 và được điều khiển bởi jQuery. Xem Demo | Download ...

Vũ Văn Thanh viết 20:06 ngày 04/10/2018

Tạo button input combo cực lạ với CSS và jQuery

Mình đã giới thiệu cho các bạn nhiều button trong các bài viết trước, hôm nay mình sẽ chia sẻ cho các bạn một button đặc biệt, với button này, các bạn có thể có được 2 chức năng cùng một lúc. Hãy cùng thử tìm hiểu xem button này làm được những gì nhé. Xem Demo | Download HTML Đầu ...

Hoàng Hải Đăng viết 20:04 ngày 04/10/2018
0