在目前的互聯(lián)網(wǎng)應(yīng)用中，登錄界面是非常常見的功能。它是用戶與系統(tǒng)進(jìn)行溝通的入口，也是系統(tǒng)進(jìn)行身份驗(yàn)證的重要手段。如何設(shè)計(jì)一個(gè)美觀而實(shí)用的登錄界面，一直是開發(fā)者們頭疼的問題。本文將介紹如何使用HTML和jQuery來實(shí)現(xiàn)一個(gè)簡單的登錄界面。
<html>
<head>
<meta charset="UTF-8">
<title>登錄界面</title>
<script src="https://cdn.bootcss.com/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="login-form">
<form id="form" method="post">
<div class="form-group">
<label>用戶名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label>密碼</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<input type="checkbox" id="remember">
<label for="remember">記住我</label>
</div>
<div class="form-group">
<button type="submit">登錄</button>
</div>
</form>
</div>
<script>
$(function() {
if ($.cookie('username') && $.cookie('password')) {
$('#username').val($.cookie('username'));
$('#password').val($.cookie('password'));
$('#remember').prop('checked', true);
}
$('#form').submit(function() {
var username = $('#username').val();
var password = $('#password').val();
if ($('#remember').prop('checked')) {
$.cookie('username', username, { expires: 7 });
$.cookie('password', password, { expires: 7 });
} else {
$.removeCookie('username');
$.removeCookie('password');
}
alert('登錄成功');
return false;
});
});
</script>
</body>
</html>上述代碼包含了HTML和jQuery的內(nèi)容。首先，我們聲明了一個(gè)form元素，并設(shè)置了兩個(gè)輸入框用于輸入用戶名和密碼。我們還添加了一個(gè)記住我選框和一個(gè)登錄按鈕。隨后，我們使用了jQuery.cookie插件，在submit事件中存儲了用戶名和密碼，并實(shí)現(xiàn)了登錄的提示效果。