Anan5a/login.html

## login.html
<!DOCTYPE html>
<html lang="en">
  <head>
	<title>Login..</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">

	<link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
	<div class="container">
	  <!--Panel begin-->
	  <div class="panel panel-success">
		<div class="panel-heading">
		  <h3 class="panel-title">Login to your account</h3>
		</div><!--./heading+title-->
		<div class="panel-body">
		  <div class="container">
			<form role="form" action="#" method="POST"><!--start form-->
			  <div class="form-horizontal">
				<div class="form-group">

				  <input type="text" class="form-control" name="user-id" id="user-id" placeholder="User ID" required>

				  <p class="bg-danger error-user"></p>
				</div><!--./form-group-->
				<div class="form-group">
				  <input type="password" class="form-control" name="user-password" id="user-pass"  placeholder="Password" required>
				  <p class="bg-danger error-password"></p>
				</div><!--./form-group-->
				<div class="form-group">
				  <input id="checkbox" type="checkbox" name="remember">
				  <label for="checkbox">Remember me</label>
				</div><!--./form-group+checkbox-->
				<div class="form-group">
				  <button type="submit" class="btn btn-primary pull-right" id="login">Login</button>
				</div><!--./form-groip-->
			  </div><!--./form-horizontal-->
			</form><!--end form-->
		  </div><!--./container-->
		</div><!--./panel-body-->
	  </div><!--./panel-->
	</div>


	  <div class="input-group-addon hidden">
		<span class="glyphicon glyphicon-ok-circle"></span>
	  </div>

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(document).ready(function(){

	$("#login").click(function(e){
		var id=$("#user-id").val();

		$.get(
		"login.php",
	    {name:id},
		function(response){
			alert(response);
		}
		);
		e.preventDefault();

	});


});

</script>

  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Login..</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0">

	<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
	<div class="container">
	<!--Panel begin-->
	<div class="panel panel-success">
	<div class="panel-heading">
	<h3 class="panel-title">Login to your account</h3>
	</div><!--./heading+title-->
	<div class="panel-body">
	<div class="container">
	<form role="form" action="#" method="POST"><!--start form-->
	<div class="form-horizontal">
	<div class="form-group">

	<input type="text" class="form-control" name="user-id" id="user-id" placeholder="User ID" required>

	<p class="bg-danger error-user"></p>
	</div><!--./form-group-->
	<div class="form-group">
	<input type="password" class="form-control" name="user-password" id="user-pass" placeholder="Password" required>
	<p class="bg-danger error-password"></p>
	</div><!--./form-group-->
	<div class="form-group">
	<input id="checkbox" type="checkbox" name="remember">
	<label for="checkbox">Remember me</label>
	</div><!--./form-group+checkbox-->
	<div class="form-group">
	<button type="submit" class="btn btn-primary pull-right" id="login">Login</button>
	</div><!--./form-groip-->
	</div><!--./form-horizontal-->
	</form><!--end form-->
	</div><!--./container-->
	</div><!--./panel-body-->
	</div><!--./panel-->
	</div>


	<div class="input-group-addon hidden">
	<span class="glyphicon glyphicon-ok-circle"></span>
	</div>

	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
	<script>
	$(document).ready(function(){

	$("#login").click(function(e){
	var id=$("#user-id").val();

	$.get(
	"login.php",
	{name:id},
	function(response){
	alert(response);
	}
	);
	e.preventDefault();

	});


	});

	</script>

	</body>
	</html>