Rumah > Artikel > hujung hadapan web > html+JQuery登录实例
html+JQuery登录实例
- 墨辰丷asal
- 2018-05-16 10:10:572707semak imbas
本篇文章主要介绍用html和JQuery制作登录网页的实例，感兴趣的朋友参考下，希望对大家有所帮助。
代码如下：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="../pagejs/bootstrap.min.js" ></script>
<script type="text/javascript" src="../pagejs/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="../pagecss/bootstrap.min.css"/>
<script type="text/javascript">
function showmsg(msgdata) {
$("#msginfo").hide();
$("#msginfo").html("<b>" + msgdata + "</b>");
$("#msginfo").show(1000);
}
$().ready(function() {
$("#login").click(function() {
var user = $("#inputEmail").val(); var pwd = $("#inputPassword").val(); if (user == "" || pwd == "") {
showmsg("please input email and password"); return;
}
$.post("login.do", {
email:user,
pwd:pwd
}, function(data, status){
if (data == "loginok") {
location.href = "welcome.jsp";
} else {
showmsg(data);
}
});
});
}) </script></head><body><p class="container">
<p class="row clearfix">
<p class="col-md-12 column">
<ul class="breadcrumb">
<li>
<a href="../index.html">Home</a>
</li>
<li class="active">
LOGIN </li>
</ul>
</p>
</p></p><p class="container">
<p class="row clearfix">
<p class="col-md-2 column">
<p style="height:100px;clear:both"></p>
<img alt="140x140" src="../image/icon.jpg" class="img-circle" style="width:160px;height:160px" />
</p>
<p class="col-md-6 column">
<p class="page-header">
<h1>
Welcome to Sp4 System </h1>
</p>
<form class="form-horizontal" role="form" id="login_form" action="login.do" method="post">
<p class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
<p class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" name="email" />
</p>
</p>
<p class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<p class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" name="pwd" />
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-10">
<p class="checkbox">
<label><input type="checkbox" />Remember me</label>
</p>
</p>
</p>
<p class="form-group">
<p class="col-sm-offset-2 col-sm-2">
<button id="login" type="button" class="btn btn-default">Sign in</button>
</p>
<p class="col-sm-8">
<h4 id="msginfo"></h4>
</p>
</p>
</form>
</p>
<p class="col-md-4 column">
</p>
</p></p></body>
</html>相关推荐：
Atas ialah kandungan terperinci html+JQuery登录实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html+css+js下拉列表小三角Artikel seterusnya：html标签中lang的作用