一、登录模板的结构
HTML登录模板一般由表单元素构成。表单元素使用form标签进行包裹，并通过属性action和method指定表单提交的URL地址和提交方式，通常使用post方式提交表单。
<form action="submit_url" method="post">
<!-- 表单元素 -->
</form>
表单元素中最核心的是输入框、密码框和提交按钮。
<input type="text" name="username" id="username" placeholder="请输入用户名"> <input type="password" name="password" id="password" placeholder="请输入密码"> <button type="submit">登录</button>
以上代码中，input元素使用type属性指定输入框和密码框。name属性定义字段名，id属性定义字段的HTML ID。placeholder属性定义输入框和密码框的提示文本。button元素中使用type属性指定按钮类型，如submit表示提交按钮。
二、登录模板的样式
登录模板的样式使用CSS来管理，可以通过class和ID指定不同的样式。使用class可以方便地为多个元素设置同样的样式，使用id则表示唯一的元素，可以为其设置特定的样式。
/* class样式 */
.input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px;
width: 200px;
margin-bottom: 10px;
}
/* id样式 */
#login-btn {
background-color: #007bff;
border: none;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
以上代码中，input元素使用class属性指定样式，#login-btn则使用ID属性指定样式。通过设置边框、边框半径、内边距、宽度、外边距等属性来美化输入框外观，而通过设置背景色、边框、颜色、内边距、字体大小等属性来美化按钮外观。
三、登录模板的JavaScript验证
登录模板通常需要对用户输入进行验证，以保证数据的准确性和安全性。通过JavaScript可以很方便地实现输入验证。
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "") {
alert("请输入用户名");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
return true;
}
<form action="submit_url" method="post" onsubmit="return validate()">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<input type="password" name="password" id="password" placeholder="请输入密码">
<button type="submit">登录</button>
</form>
以上代码定义了一个名为validate的函数来对输入进行验证。该函数首先获取输入框和密码框中的值，然后对其进行非空判断，若为空，则弹出提示信息。最后返回true或false，以决定表单是否需要提交。
在form元素中添加onsubmit属性可以为表单添加提交事件，而通过return validate()就可以调用validate函数进行输入验证。
四、完整代码示例
<!DOCTYPE html>
<html>
<head>
<title>登录模板</title>
<meta charset="utf-8">
<style>
/* 输入框样式 */
.input {
border: 1px solid #ccc;
border-radius: 5px;
padding: 8px;
width: 200px;
margin-bottom: 10px;
}
/* 按钮样式 */
#login-btn {
background-color: #007bff;
border: none;
color: #fff;
padding: 10px 20px;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="submit_url" method="post" onsubmit="return validate()">
<input type="text" name="username" id="username" class="input" placeholder="请输入用户名">
<input type="password" name="password" id="password" class="input" placeholder="请输入密码">
<button type="submit" id="login-btn">登录</button>
</form>
<script>
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "") {
alert("请输入用户名");
return false;
}
if (password == "") {
alert("请输入密码");
return false;
}
return true;
}
</script>
</body>
</html>
