使用html写一个能发起请求的登录界面

news2024/11/27 6:19:11

目录

head部分

内联样式部分

body部分

login-form类的div

myModal类的div id

script部分

总的代码

界面与操作演示

<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>

这是文档类型声明，告诉浏览器这是一个 HTML文档。 

<html lang="en">

这是 HTML 文档的根元素，lang="en" 表明文档的主要语言是英语。

head部分

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .login-form {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: white;
            width: 300px;
        }
        .form-group {
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
        }
        .form-group label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }
        .form-group input {
            flex-grow: 1;
        }
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<head>

表示head部分的开始，这里包含元信息，如字符集、视口设置和样式等信息。

    <meta charset="UTF-8">

指定文档的字符编码为 UTF-8（一种常用的多字节编码格式）

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

设置视口的宽度等于设备的宽度，并且初始缩放比例为 1，使得网页在移动设备（手机端和pc端都能正常显示）上也能正确显示。

 <title>Login Page</title>

title标签用于设置网页的标题，显示在浏览器标签上。

内联样式部分

    <style>

style表示内联样式表部分的开始，这里定义了页面的样式，里面会有很多类（类似于c++中的类）帮助我们设置字体的大小，格式等。

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

body用于设置整个页面的样式：

font-family: 页面使用的字体。

display: flex: 使用弹性盒子布局（使字体或者图标动态变化，使它们在任何屏幕尺寸下都能表现良好。）

justify-content: center: 内容居中对齐。

align-items: center: 垂直居中对齐。

height: 100vh: 高度为视口高度。

background-color: 背景颜色。

        .form-group label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

form-group label 样式（类）：

width: 宽度。

text-align: right: 文本右对齐。

padding-right: 右边距。

        .form-group input {
            flex-grow: 1;
        }

flex-grow: 1: 填充剩余空间。

        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

.modal 类的样式：

display: none: 默认不显示。

position: fixed: 固定定位。

z-index: 层叠级别。

left, top: 位置。

width, height: 宽高。

overflow: 溢出处理。

background-color: 背景颜色。

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

.modal-content 类的样式：

background-color: 背景颜色。

margin: 外边距。

padding: 内边距。

border: 边框样式。

width: 宽度。

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

.close 类的样式：

color: 字体颜色。

float: right: 浮动到右边。

font-size: 字体大小。

font-weight: 字体粗细。

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

定义 .close 类的悬停和聚焦状态样式：

color: 字体颜色。

text-decoration: 文本装饰。

cursor: 鼠标光标。

    </style>
</head>

style表示内联样式部分的结束，head表示head部分的结束。

body部分

<body>
    <div class="login-form">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>登录成功</p>
        </div>

    </div>
<body>

表示body部分的开始。

login-form类的div

    <div class="login-form">

<div> 标签是一种常用的容器标签，用于对文档中的部分或整个内容进行分块，并对其应用样式或进行布局。

这里div表示接下来开始是.login-form 类的 div

        <h2>Login</h2>

h2表示这是一个二级标题，其中Login会显示在网页上。

  <form id="loginForm">

在HTML中，<form> 标签用于创建一个表单，用户可以通过这个表单提交信息。

id 属性是 <form> 标签的一个重要属性，它用于唯一标识一个表单元素，在一个文档中只出现一次而class可以多次使用。

            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>

定义用户名输入框（属于form-group类）：

label: 标签。for 属性的值 "username" 与后面的 <input> 的 id 属性值相匹配，表示这个标签与 <input> 字段相关联。

input: 输入框，用于接收用户输入的文本数据，type里的text表示要输入文本name="username" 用于在表单提交时标识这个输入字段的数据。要求必填（required）。

            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>

label: 标签。

input: 输入框，类型为密码，要求必填。

            <button type="submit">Login</button>

提交按钮，用于提交表单。

<button> 标签用于创建一个按钮，用户可以点击这个按钮来触发某种操作。

submit：表示这是一个提交按钮，当用户点击这个按钮时，会触发表单的提交。

Login是文本，用户看到的按钮上的内容。

        </form>

结束登录表单。

    </div>

结束 .login-form 类的 div。

myModal类的div id

    <!-- Modal -->
    <div id="myModal" class="modal">

开始模态框（弹窗）的 div，ID 为 myModal。

        <!-- Modal content -->
        <div class="modal-content">

开始模态框的内容区。类为modal-content。

            <span class="close">&times;</span>

定义关闭按钮。

<span> 标签是一个内联元素，用于对文档中的部分内容进行分组，并应用样式或进行JavaScript操作。

&times; 是一个HTML实体，表示乘号（×），在这里用作关闭按钮的图标。

            <p>登录成功</p>

定义模态框内的消息文本。

        </div>

结束模态框的内容区。

    </div>

结束模态框的 div。

script部分

 <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("loginForm").querySelector("button");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.addEventListener('click', function(event) {
            event.preventDefault();  // 阻止表单默认提交行为
            modal.style.display = "block";
        });

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>
    <script>

开始 <script> 标签，用于编写 JavaScript 代码。

        // Get the modal
        var modal = document.getElementById("myModal");

定义一个变量modal，获取模态框元素。

这行代码使用 document.getElementById 方法获取页面中 ID 为 "myModal" 的元素，并将其赋值给变量 modal。

getElementById 方法返回页面中具有指定 ID 的元素。

var btn = document.getElementById("loginForm").querySelector("button");

这行代码首先获取 ID 为 "loginForm" 的元素，然后使用 querySelector 方法查找第一个 <button> 元素，并将其赋值给变量 btn。

querySelector 方法返回匹配指定 CSS 选择器的第一个元素。

var span = document.getElementsByClassName("close")[0];

这行代码使用 document.getElementsByClassName 方法获取类名为 "close" 的所有元素，并选取第一个元素赋值给变量 span。

getElementsByClassName 方法返回一个包含所有具有指定类名的元素的 HTMLCollection 对象。

btn.addEventListener('click', function(event) {
    event.preventDefault();  // 阻止表单默认提交行为
    modal.style.display = "block";
});

这代码为按钮添加了一个点击事件监听器。

当用户点击按钮时，事件监听器中的回调函数会被执行。

event.preventDefault() 方法阻止了按钮默认的提交行为。

modal.style.display = "block"; 将模态框的 display CSS 属性设置为 "block"，使其可见。

span.onclick = function() {
    modal.style.display = "none";
}

这行代码为关闭按钮添加了一个点击事件监听器。

当用户点击关闭按钮时，事件监听器中的回调函数会被执行。

modal.style.display = "none"; 将模态框的 display CSS 属性设置为 "none"，使其不可见。

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

这行代码为整个窗口添加了一个点击事件监听器。

当用户在窗口的任意位置点击时，事件监听器中的回调函数会被执行。

event.target 返回实际触发事件的目标元素。

如果点击的目标元素是模态框本身，则关闭模态框。

    </script>

结束 <script> 标签。

</body>

结束 <body> 部分。

</html>

结束整个 HTML 文档。

总的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
        }
        .login-form {
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: white;
            width: 300px;
        }
        .form-group {
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
        }
        .form-group label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }
        .form-group input {
            flex-grow: 1;
        }
        /* Modal styles */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto; /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="login-form">
        <h2>Login</h2>
        <form id="loginForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Login</button>
        </form>
    </div>

    <!-- Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>登录成功</p>
        </div>

    </div>

    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("loginForm").querySelector("button");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.addEventListener('click', function(event) {
            event.preventDefault();  // 阻止表单默认提交行为
            modal.style.display = "block";
        });

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>
</html>

界面与操作演示

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

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

相关文章

jmeter学习（1）线程组与发送请求

jmeter学习（1）线程组与发送请求

1、线程组 执行顺序 &#xff1a;setUp线程组 > 线程组 > tearDown线程组 2、 发送请求 可以发送http、java、dubbo 请求等 下面讲解发送http 1&#xff09;Http请求默认值 作用范围是该线程组下的所有HTTP请求&#xff0c;如果http请求设置的与默认值冲突&#xff0…
阅读更多...
前端规范工程-3：CSS规范（Stylelint）

前端规范工程-3：CSS规范（Stylelint）

样式规范工具&#xff08;StyleLint&#xff09; Stylelint 是一个灵活且强大的工具&#xff0c;适用于保持 CSS 代码的质量和一致性。结合其他工具&#xff08;如 Prettier 和 ESLint&#xff09;&#xff0c;可以更全面地保障前端代码的整洁性和可维护性。 目录 样式规范工具…
阅读更多...
oracle virtualBox 拖动文件到虚拟机内报错

oracle virtualBox 拖动文件到虚拟机内报错

DnD: Error: Drag and drop to guest not possible -- either the guest OS does not support this, or the.... 首先将拖放的双向选项打开 打开CD驱动器 根据操作系统是32还是64安装对应的安装包&#xff0c;amd64为64位系统&#xff0c;x86为32位系统 安装后重启即可向虚拟机…
阅读更多...
【C语言】数组练习

【C语言】数组练习

【C语言】数组练习 练习1&#xff1a;多个字符从两端移动&#xff0c;向中间汇聚练习2、二分查找 练习1&#xff1a;多个字符从两端移动&#xff0c;向中间汇聚 编写代码&#xff0c;演示多个字符从两端移动&#xff0c;向中间汇聚 练习2、二分查找 在⼀个升序的数组中查找指…
阅读更多...
sql语句牛客练习

sql语句牛客练习

文章目录 1. SQL21 浙江大学用户题目回答情况① 错误② 正确 2. SQL22 统计每个学校的答过题的用户的平均答题数① 错误② 正确 3. SQL23 统计每个学校各难度的用户平均刷题数4. SQL25 查找山东大学或者性别为男生的信息① 错误② 正确 5. SQL26 计算25岁以上和以下的用户数量①…
阅读更多...
Wireshark 解析QQ、微信的通信协议｜TCP｜UDP

Wireshark 解析QQ、微信的通信协议｜TCP｜UDP

写在前面 QQ&#xff0c;微信这样的聊天软件。我们一般称为im&#xff0c;Instant Messaging&#xff0c;即时通讯系统。那大家会不会有疑问&#xff0c;自己聊天内容会不会被黑客或者不法分子知道&#xff1f;这种体量的im是基于tcp还是udp呢&#xff1f;这篇文章我们就来探索…
阅读更多...
基于Springboot的在线订餐系统设计与实现(论文+源码)_kaic

基于Springboot的在线订餐系统设计与实现(论文+源码)_kaic

摘 要 当今世界&#xff0c;互联网以及和互联网有关的行业都在不断的发展&#xff0c;也在持续走进人们的生活&#xff0c;在此趋势下人们对于通过互联网解决生活问题的需求愈来愈多&#xff0c;本文考虑到了这些情况后做出了该订餐系统。 本系统选择了MySQL作为主要存储单元…
阅读更多...
搭建k8s集群服务（kubeadm方式）

搭建k8s集群服务（kubeadm方式）

准备工作 操作系统版本&#xff1a;CentOS Linux release 7.9.2009 (Core) 虚拟机硬件配置&#xff1a;2核8G内存&#xff08;最低2G&#xff09;&#xff0c;硬盘最低25G&#xff1b; linux内核版本&#xff08;3.10版本尝试失败&#xff09;&#xff1a;5.4.268-1.el7.elr…
阅读更多...
每日读则推(三)

每日读则推(三)

n.(事件的)发生地点,(活动的)场所 n.雄性大园丁鸟 n.多细枝的,苗条的 v.放大,扩大(声音);增强,加强 Male great bowerbirds build twiggy concert venues that amplify their raucous songs and n.园丁鸟 …
阅读更多...
讲职场：不要经常说消极的话

讲职场：不要经常说消极的话

1、不要经常说消极的话&#xff0c;不要接触让自己力量消失的人 习惯性用强大的语言加持自己&#xff0c;才能立起来 2、只要你下决心钻研一门技术&#xff0c;你就全身心扑在上面&#xff0c;把每一个细节研究透&#xff0c;只有这样&#xff0c;你才能在学会之后&#xff0…
阅读更多...
投资精明之选，国内外低代码平台性价比排行榜

投资精明之选，国内外低代码平台性价比排行榜

本文介绍了国内外10大低代码平台的特点及性价比&#xff0c;包括ZohoCreator、OutSystems等&#xff0c;强调低代码平台通过简化开发过程&#xff0c;提高应用开发效率和质量&#xff0c;适合不同规模企业。选择时考虑企业需求和预算&#xff0c;建议试用后再决策。 一、Zoho C…
阅读更多...
Apache安装后无法启动的问题“不能再本地计算机启动apache”

Apache安装后无法启动的问题“不能再本地计算机启动apache”

首先安装 参考这位博主的小白下载和安装Apache的教程&#xff08;保姆级&#xff09; 遇到的问题 在启动的时候遇到问题 说apache不能在本地计算机启动 解决方法 1. 路径检查 首先&#xff01;&#xff01;&#xff01; 请仔细检查你的httpd.conf文件中的Apache路径是否…
阅读更多...
基于Springboot+Vue的汉服交易小程序的设计与实现（含源码+数据库）

基于Springboot+Vue的汉服交易小程序的设计与实现（含源码+数据库）

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 系统定…
阅读更多...
Git版本控制工具--关于命令

Git版本控制工具--关于命令

Git版本控制工具 学习前言 在项目开发中&#xff0c;总是需要多个人同时对一个项目进行修改&#xff0c;如何高效快速地进行修改&#xff0c;且控制各自修改的版本不会和他人的进行重叠&#xff0c;这就需要用到Git分布式版本控制器了 作用 解决了一致性&#xff0c;并发性…
阅读更多...
如何解决 Photoshop 中的“暂存盘已满”错误

如何解决 Photoshop 中的“暂存盘已满”错误

好久没有用Photoshop了&#xff0c;今天想自己修个图&#xff0c;就启动了一下PS&#xff0c;结果出现一个对话框“不能初始化Photoshop&#xff0c;因为暂存盘已经满”。我一直存在C盘焦虑&#xff0c;常年C盘显示都是红色的。上网一查&#xff0c;发现PS启动时暂存盘的空间是…
阅读更多...
YOLOv11改进 | Neck篇 | YOLOv11引入Gold-YOLO

YOLOv11改进 | Neck篇 | YOLOv11引入Gold-YOLO

1. Gold-YOLO介绍 1.1 摘要： 在过去的几年中，YOLO 系列模型已成为实时目标检测领域的领先方法。 许多研究通过修改架构、增加数据和设计新的损失，将基线提升到更高的水平。 然而，我们发现以前的模型仍然存在信息融合问题，尽管特征金字塔网络（FPN）和路径聚合网络（PANet）…
阅读更多...
每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

每日OJ题_牛客_DP13[NOIP2002 普及组]过河卒_路径dp_C++_Java

目录 牛客_DP13[NOIP2002 普及组]过河卒_路径dp 题目解析 C代码1 C代码2 Java代码 牛客_DP13[NOIP2002 普及组]过河卒_路径dp [NOIP2002 普及组] 过河卒_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a; 棋盘上 A点有一个过河卒&#xff0c;需要走到目标 B点。卒行走的…
阅读更多...
总结一下 KNN、K-means 和 SVM【附代码实现】

总结一下 KNN、K-means 和 SVM【附代码实现】

小小总结一下 KNN、K-means 和 SVM 及其 Python 实现 好久没更新了&#xff0c;最近准备秋招&#xff0c;在机器学习中感觉经常被问的几个算法&#xff1a;K近邻算法&#xff08;K-Nearest Neighbors, KNN&#xff09;、K均值聚类算法&#xff08;K-means&#xff09;以及支持…
阅读更多...
【网络通信基础与实践番外三】TCP的三次握手和四次挥手和例题

【网络通信基础与实践番外三】TCP的三次握手和四次挥手和例题

一、TCP连接的三次握手 第一次握手&#xff1a;客户端首先向服务器发送一个特殊的TCP报文&#xff0c;这个报文段首部不包含应用层数据&#xff0c;但是在报文段中有一个SYN标志位被置1。因此这个特殊的报文段也被叫做SYN报文段&#xff0c;然后客户端随机选择一个初始序列号&a…
阅读更多...
【JWT安全】portswigger JWT labs 全解

【JWT安全】portswigger JWT labs 全解

目录 1.利用有缺陷的 JWT 签名验证 ①接受任意签名 lab1:通过未验证的签名绕过 JWT 身份验证 ②接受无签名的token lab2:通过有缺陷的签名验证来绕过 JWT 身份验证 2.暴力破解密钥 ①使用hashcat lab3:通过弱签名密钥绕过 JWT 身份验证 3.JWT 标头参数注入 ①通过 jwk…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023