简易登录页面实现

繁依Fanyi

发布于 2023-10-12 10:41:51

1890

发布于 2023-10-12 10:41:51

文章被收录于专栏：繁依Fanyi 的专栏

导言

本文将介绍一个简单的登录页面的实现，使用HTML、CSS和JavaScript完成。该登录页面具有选项卡切换和表单提交功能。

HTML基础知识

首先，我们来了解一下HTML文档的基本结构：

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>

在上述代码中，我们使用<!DOCTYPE>声明指定文档类型为HTML。然后，在<head>标签中，我们设置了页面的标题，并通过<link>标签引入了Bootstrap的CSS文件，以应用样式。

CSS样式和布局

接下来，我们为登录页面设置了一些样式和布局，使用了Flex布局来实现居中对齐等效果：

<style>
    /* 设置body的样式 */
    body {
        font-family: Arial, sans-serif;
        background-color: #f1f1f1;
    }
    
    /* .container类的样式 */
    .container {
        /* 设置最大宽度、居中对齐、背景色和阴影 */
        max-width: 400px;
        margin: 0 auto;
        background-color: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* 其他样式... */
</style>

我们定义了.container类的样式，设置了其最大宽度、居中对齐、背景色、内边距、边框圆角和阴影等。

JavaScript交互

为了实现选项卡切换和内容显示隐藏的功能，我们使用了JavaScript代码：

<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        // 隐藏所有tab-content
        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        // 移除所有tablinks的active类
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        // 显示当前tab-content和添加active类到当前tablink
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

我们定义了openTab()函数，该函数在每个登录选项的按钮的onclick事件中被调用。该函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。

表单处理和提交

登录页面包含了三个不同的登录选项，每个选项都有一个表单用于输入用户名和密码，并提交登录请求：

<!-- 学生登录选项 -->
<div id="student" class="tab-content" style="display: block;">
    <form action="student-login" method="post">
        <div class="form-group">
            <label for="studentUsername">Username:</label>
            <input type="text" id="studentUsername" name="username" required>
        </div>
        <!-- 其他表单元素... -->
        <div class="form-group">
            <button type="submit">Login</button>
        </div>
    </form>
</div>

<!-- 其他登录选项... -->

每个登录选项的表单都使用了<form>标签，通过action和method属性指定了表单的处理URL和提交方式。表单中包含了输入用户名和密码的文本框或密码框，并设置了required属性表示必填项。最后，通过一个提交按钮实现表单的提交。

代码展示

所有代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Login Page</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f1f1f1;
        }

        .container {
            max-width: 400px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .tab {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }

        .tab button {
            background-color: #f2f2f2;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 10px 20px;
            margin-right: 5px;
            border-radius: 5px 5px 0 0;
            font-weight: bold;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        .tab-content {
            display: none;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 0 5px 5px 5px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 8px;
            border-radius: 3px;
            border: 1px solid #ccc;
        }

        .form-group button {
            width: 100%;
            padding: 8px;
            border-radius: 3px;
            background-color: #4267B2;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-group button:hover {
            background-color: #385898;
        }

        .form-group button:active {
            background-color: #2d4771;
            transform: translateY(2px);
        }
    </style>
</head>
<body>
<div class="container">
    <h2>Login</h2>
    <div class="tab">
        <button class="tablinks active" onclick="openTab(event, 'student')">Student</button>
        <button class="tablinks" onclick="openTab(event, 'teacher')">Teacher</button>
        <button class="tablinks" onclick="openTab(event, 'admin')">Admin</button>
    </div>

    <div id="student" class="tab-content" style="display: block;">
        <form action="student-login" method="post">
            <div class="form-group">
                <label for="studentUsername">Username:</label>
                <input type="text" id="studentUsername" name="username" required>
            </div>
            <div class="form-group">
                <label for="studentPassword">Password:</label>
                <input type="password" id="studentPassword" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>

    <div id="teacher" class="tab-content">
        <form action="teacher-login" method="post">
            <div class="form-group">
                <label for="teacherUsername">Username:</label>
                <input type="text" id="teacherUsername" name="username" required>
            </div>
            <div class="form-group">
                <label for="teacherPassword">Password:</label>
                <input type="password" id="teacherPassword" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>

    <div id="admin" class="tab-content">
        <form action="admin-login" method="post">
            <div class="form-group">
                <label for="adminUsername">Username:</label>
                <input type="text" id="adminUsername" name="username" required>
            </div>
            <div class="form-group">
                <label for="adminPassword">Password:</label>
                <input type="password" id="adminPassword" name="password" required>
            </div>
            <div class="form-group">
                <button type="submit">Login</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;

        tabcontent = document.getElementsByClassName("tab-content");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }

        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }

        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>
</body>
</html>

这段代码是一个简单的登录页面的实现。以下是代码的思路：

首先，引入了必要的样式和依赖库。通过<link>标签引入了Bootstrap的CSS文件，这样页面的样式可以使用Bootstrap框架提供的样式。
在<body>标签中，有一个.container类的<div>元素，用于包含整个登录页面的内容。该<div>具有一些样式，如设置最大宽度、居中对齐、背景色和阴影等。
页面的标题是一个<h2>标签，显示为"Login"，居中对齐。
在.tab类的<div>中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。这些按钮有一个共同的.tablinks类，其中一个按钮默认具有active类。通过点击这些按钮，可以切换显示不同的登录选项。
在.tab-content类的<div>中，分别包含了"Student"、"Teacher"和"Admin"三个登录选项的表单。这些表单在初始状态下都是隐藏的，通过JavaScript函数openTab()来控制显示和隐藏。
每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框，以及一个"Login"按钮。文本框和密码框都有一个required属性，表示必填项。
JavaScript部分定义了openTab()函数。该函数被每个登录选项的按钮的onclick事件调用。函数的作用是切换显示不同的登录选项内容，并给当前选中的按钮添加active类，同时移除其他按钮的active类。