简易登录页面实现

news2024/9/22 3:02:41

导言

本文将介绍一个简单的登录页面的实现，使用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>

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

  1. 首先，引入了必要的样式和依赖库。通过<link>标签引入了Bootstrap的CSS文件，这样页面的样式可以使用Bootstrap框架提供的样式。

  2. 在<body>标签中，有一个.container类的<div>元素，用于包含整个登录页面的内容。该<div>具有一些样式，如设置最大宽度、居中对齐、背景色和阴影等。

  3. 页面的标题是一个<h2>标签，显示为"Login"，居中对齐。

  4. 在.tab类的<div>中，有三个登录选项的按钮，分别对应"Student"、“Teacher"和"Admin”。这些按钮有一个共同的.tablinks类，其中一个按钮默认具有active类。通过点击这些按钮，可以切换显示不同的登录选项。

  5. 在.tab-content类的<div>中，分别包含了"Student"、"Teacher"和"Admin"三个登录选项的表单。这些表单在初始状态下都是隐藏的，通过JavaScript函数openTab()来控制显示和隐藏。

  6. 每个登录选项的表单都包含一个输入用户名的文本框和一个输入密码的密码框，以及一个"Login"按钮。文本框和密码框都有一个required属性，表示必填项。

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

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

效果展示

在这里插入图片描述

总结

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/736019.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python创建多个logging日志文件

python创建多个logging日志文件

为每一个计算过程创建一个单独的日志文件&#xff0c;并写入对应的结果&#xff0c;同时保留控制台输出的功能&#xff0c;控制台输出与日志文件记录可以分开单独控制。 import os import loggingdef creat_logger(log_path,logging_name,suf_name):if not os.path.exists(log…
阅读更多...
NC65 输出打印模板设置流程

NC65 输出打印模板设置流程

NC65 输出打印模板设置流程 一、添加打印模板 1、可以在单据模板初始化设置中生成打印模板&#xff08;这里以结算单为例&#xff09; 输入模板编码和名称&#xff0c;然后按确定即可。 此时&#xff0c;去输出模板初始化节点查看&#xff0c;就可以查看到刚才生成的打印模…
阅读更多...
第五章 中央处理器 第六节指令流水线

第五章 中央处理器 第六节指令流水线

5.6.1 指令流水线的概念 5.6.2 指令流水线的影响因素和分类
阅读更多...
MySQL基础（五）视图、存储过程和存储函数、变量

MySQL基础（五）视图、存储过程和存储函数、变量

目录 常见的数据库对象 ​编辑 视图 创建视图 改变视图 优缺点 存储过程与存储函数 创建存储过程 创建存储函数 存储过程和存储函数的区别 存储过程和函数的查看、修改、删除 查看 修改 删除 存储过程的优缺点 优点 缺点 变量 系统变量 查看系统变量 修改…
阅读更多...
h5页面如何与原生交互

h5页面如何与原生交互

本文讲述h5页面跟原生通信&#xff0c;比如在app内&#xff0c;调用相机&#xff0c;获取相册内的图片&#xff0c;在app内拉起微信小程序等等&#xff0c;h5页面没有这么多权限能够直接调用移动端的原生能力&#xff0c;这个时候就需要与原生进行通讯&#xff0c;传递一个信号…
阅读更多...
链表、列表、列表项

链表、列表、列表项

链表、列表、列表项 FreeRTOS 列表与列表项 List_t //List_t 列表typedef struct xLIST{listFIRST_LIST_INTEGRITY_CHECK_VALUE //校验值volatile UBaseType_t uxNumberOfItems; // 列表中的列表项数量:用于记录列表中列表项的个数&#xff08;不包含 xListEnd&#xff0…
阅读更多...
AcWing 1497：树的遍历

AcWing 1497：树的遍历

【题目来源】https://pintia.cn/problem-sets/994805342720868352/exam/problems/994805485033603072https://www.acwing.com/problem/content/description/1499/【题目描述】 一个二叉树&#xff0c;树中每个节点的权值互不相同。 现在给出它的后序遍历和中序遍历&#xff0c;…
阅读更多...
Verilog 基础知识(一) Verilog 基础语法与注意事项

Verilog 基础知识(一) Verilog 基础语法与注意事项

基础知识 0.1 模块(Module) Verilog中的module可以看成一个具有输入输出端口的黑盒子&#xff0c;该黑盒子有输入和输出接口(信号)&#xff0c;通过把输入在盒子中执行某些操作来实现某项功能。(类似于C语言中的函数) 图1 模块示意图 0.1.1 模块描述 图1 所示的顶层模块(top…
阅读更多...
1.Git使用技巧-常用命令2

1.Git使用技巧-常用命令2

1.Git使用技巧-常用命令2 文章目录 1.Git使用技巧-常用命令2一、本地仓库整理二、查看本地仓库查看过滤 二、逆向操作1. 检出覆盖本地文件 workspace -> NULL1.1 删除workspace 文件 2. 本地仓库回滚3. 远程仓库1. 远程仓库未基于代码做修改 逆操作总结 三、删除1. 删除远程…
阅读更多...
基于 Jieba 和 Word2vec 的关键词词库构建

基于 Jieba 和 Word2vec 的关键词词库构建

最近有空&#xff0c;把论文中用到的技术和大家分享一下&#xff08;以组件化的形式&#xff09;&#xff0c;本篇将讲述如何从大量的语料中获取诸多关键词和构建关键词词库或 xx 关键词词库&#xff08;细分领域&#xff09;。举例以购物网站的在线评论作为语料库&#xff0c;…
阅读更多...
Python实现PSO粒子群优化算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

Python实现PSO粒子群优化算法优化Catboost回归模型(CatBoostRegressor算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…
阅读更多...
Git--多人协作开发

Git--多人协作开发

文章目录 前言一、多人协作一开发目标将dev分支内容合并至master分支 二、多人协作二开发者1操作开发者2操作突发情况内容合并至master分支 三、解决git branch -a打印已被删除的远程分支的方法总结 前言 目前,我们所完成的工作如下 : 基本完成Git的所有本地库的相关操作,git…
阅读更多...
学无止境·MySQL（4-2）（多表查询加强版）

学无止境·MySQL（4-2）（多表查询加强版）

多表练习试题 试题2&#xff08;加强版&#xff09;1、创建表2、表中添加数据3、找出销售部门中年纪最大的员工的姓名4、求财务部门最低工资的员工姓名5、列出每个部门收入总和高于9000的部门名称6、求工资在7500到8500元之间&#xff0c;年龄最大的人的姓名及部门7、找出销售部…
阅读更多...
【Python】面向对象 - 封装 ② ( 访问私有成员 | 对象无法访问私有变量 / 方法 | 类内部访问私有成员 )

【Python】面向对象 - 封装 ② ( 访问私有成员 | 对象无法访问私有变量 / 方法 | 类内部访问私有成员 )

文章目录 一、访问私有成员1、对象无法访问私有变量2、对象无法访问私有方法3、类内部访问私有成员 一、访问私有成员 1、对象无法访问私有变量 在下面的 Python 类 Student 中 , 定义了私有的成员变量 , # 定义私有成员__address None该私有成员变量 , 只能在类内部进行访问 …
阅读更多...
分析图中常见的这种“箭头”，如何用GIS绘制？

分析图中常见的这种“箭头”，如何用GIS绘制？

小伙伴们， 在各种分析图、空间结构图中， 是不是经常看到这种“扇形”的箭头， 同时伴随着一些“引绿入城”等分析语言。 于是，你有没有好奇， 这种箭头是怎么做出来的？ 强大的GIS是否可以绘制出这种箭头？ 还是那句话—— 别问，问就是能！ 其实ArcMap 和 ArcGIS P…
阅读更多...
【大数据实战电商推荐系统】概述版

【大数据实战电商推荐系统】概述版

文章目录 第1章 项目体系框架设计&#xff08;说明书&#xff09;第2章 工具环境搭建&#xff08;说明书&#xff09;第3章 项目创建并初始化业务数据3.1 IDEA创建Maven项目&#xff08;略&#xff09;3.2 数据加载准备&#xff08;说明书&#xff09;3.3 数据初始化到MongoDB …
阅读更多...
41. 同时在线人数问题

41. 同时在线人数问题

文章目录 题目需求思路一实现一学习链接题目来源 题目需求 现有各直播间的用户访问记录表&#xff08;live_events&#xff09;如下。 表中每行数据表达的信息为&#xff1a;一个用户何时进入了一个直播间&#xff0c;又在何时离开了该直播间。 现要求统计各直播间最大同时在…
阅读更多...
Stable Diffusion系列课程上：安装、提示词入门、常用模型（checkpoint、embedding、LORA）、放大算法、局部重绘、常用插件

Stable Diffusion系列课程上：安装、提示词入门、常用模型（checkpoint、embedding、LORA）、放大算法、局部重绘、常用插件

文章目录 一、Stable Diffusion简介与安装二、文生图&#xff08;提示词解析&#xff09;2.1 提示词入门2.2 权重2.3 负面提示词&#xff08; Negative prompt&#xff09;2.4 出图参数设置2.5 新手念咒方法 三、图生图3.1 图生图入门3.2 随机种子解析3.3 图生图拓展 四、模型4…
阅读更多...
MySQL基础篇第3章（运算符）

MySQL基础篇第3章（运算符）

文章目录 1、算术运算符1.1 加法与减法运算符1.2 乘法与除法运算符1.3 求模&#xff08;求余&#xff09;运算符 2、比较运算符2.1 等号运算符2.2 安全等于<>2.3 不等于运算符2.4 空运算符2.5 非空运算符2.6 最小值运算符2.7 最大值运算符2.8 BETWEEN AND运算符2.9 IN运算…
阅读更多...
cmake操作目录

cmake操作目录

目录 cmake如何使用子目录 demo cmake生成build目录结构 如果指定子目录编译文件名字(binaryDir) 如果指定子目录编译的路径(binaryDir) 子目录相关的作用域 demo 子目录中定义project cmake如何使用子目录 如果项目比较小的话,我们将所有源码文件放到一个目录里面是没…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023