pjghi

这个屌丝很懒，什么也没留下！

热门标签

article

简易登录页面实现_html登录页面代码

作者：pjghi | 2024-01-30 19:33:09

踩

html登录页面代码

导言

本文将介绍一个简单的登录页面的实现，使用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>
1
2
3
4
5
6
7
8
9
10
11

在上述代码中，我们使用<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

我们定义了.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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

我们定义了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>

<!-- 其他登录选项... -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

每个登录选项的表单都使用了<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175

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

首先，引入了必要的样式和依赖库。通过<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类。

总体来说，这段代码通过使用HTML和CSS实现了一个简单的登录页面，利用JavaScript实现了选项卡的切换和内容的显示和隐藏。用户可以选择不同的登录选项，并填写相应的用户名和密码进行登录。

效果展示

在这里插入图片描述

总结

通过以上代码的实现，我们创建了一个简单的登录页面，具有选项卡切换和表单提交功能。使用HTML、CSS和JavaScript，我们能够控制页面的结构、样式和交互行为，为用户提供良好的登录体验。

在博客中，你可以进一步扩展这些知识点，并提供更多的示例和解释，使读者能够深入了解和应用这些技术。同时，你还可以讨论如何改进该登录页面，添加验证和错误处理等功能，提高用户体验和安全性。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/48620

简易登录页面实现_html登录页面代码

导言

HTML基础知识

CSS样式和布局

JavaScript交互

表单处理和提交

代码展示

效果展示

总结

[HTML]Web前端开发技术3（HTML5、CSS3、JavaScript ）超链接，target，scrolling,marginwidth,frameborder,iframe——喵喵画网页

【python selenium报错】selenium.common.exceptions.WebDriverException: Message: ＜html＞三种解决方案！

HTML+CSS+JS网页设计期末课程大作业京剧文化水墨风书画_html+css中国脸谱文化网

前端登录界面网站设计模板--HTML+CSS

前端富文本编辑器原理——从javascript、html、css开始入门_前端富文本编辑器

前端随笔：HTML/CSS/JavaScript和Vue_vue前端语言css

[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载保存到手机_uniapp页面生成图片

[HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页

go语言html界面,[译] sciter: 使用 HTML/CSS 构建 Golang 图形界面程序

面试 HTML 框架八股文十问十答第一期

炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】_html登录页面代码

《HTML 简易速速上手小册》第1章：HTML 入门（2024 最新版）

《HTML 简易速速上手小册》第2章：HTML 的标签和元素（2024 最新版）