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

柏箱2024-10-04 11:16

目录

head部分

内联样式部分

body部分

login-form类的div

[myModal类的div id](#myModal类的div id)

script部分

总的代码

界面与操作演示

css 复制代码 
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>

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

cpp 复制代码 
<html lang="en">

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

head部分

css 复制代码 
<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>
cpp 复制代码 
<head>

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

cpp 复制代码 
    <meta charset="UTF-8">

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

cpp 复制代码 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

cpp 复制代码 
 <title>Login Page</title>

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

内联样式部分

cpp 复制代码 
    <style>

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

cpp 复制代码 
        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: 背景颜色。

cpp 复制代码 
        .form-group label {
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

form-group label 样式（类）：

width: 宽度。

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

padding-right: 右边距。

cpp 复制代码 
        .form-group input {
            flex-grow: 1;
        }

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

cpp 复制代码 
        /* 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: 背景颜色。

cpp 复制代码 
        /* 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: 宽度。

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

.close 类的样式：

color: 字体颜色。

float: right: 浮动到右边。

font-size: 字体大小。

font-weight: 字体粗细。

cpp 复制代码 
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

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

color: 字体颜色。

text-decoration: 文本装饰。

cursor: 鼠标光标。

cpp 复制代码 
    </style>
</head>

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

body部分

css 复制代码 
<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>
cpp 复制代码 
<body>

表示body部分的开始。

login-form类的div

cpp 复制代码 
    <div class="login-form">

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

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

cpp 复制代码 
        <h2>Login</h2>

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

cpp 复制代码 
  <form id="loginForm">

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

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

cpp 复制代码 
            <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）。

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

label: 标签。

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

css 复制代码 
            <button type="submit">Login</button>

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

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

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

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

css 复制代码 
        </form>

结束登录表单。

cpp 复制代码 
    </div>

结束 .login-form 类的 div。

myModal类的div id

css 复制代码 
    <!-- Modal -->
    <div id="myModal" class="modal">

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

css 复制代码 
        <!-- Modal content -->
        <div class="modal-content">

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

css 复制代码 
            <span class="close">&times;</span>

定义关闭按钮。

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

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

css 复制代码 
            <p>登录成功</p>

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

css 复制代码 
        </div>

结束模态框的内容区。

cpp 复制代码 
    </div>

结束模态框的 div。

script部分

css 复制代码 
 <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>
css 复制代码 
    <script>

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

css 复制代码 
        // Get the modal
        var modal = document.getElementById("myModal");

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

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

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

css 复制代码 
var btn = document.getElementById("loginForm").querySelector("button");

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

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

css 复制代码 
var span = document.getElementsByClassName("close")[0];

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

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

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

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

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

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

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

css 复制代码 
span.onclick = function() {
    modal.style.display = "none";
}

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

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

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

css 复制代码 
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

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

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

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

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

css 复制代码 
    </script>

结束 <script> 标签。

css 复制代码 
</body>

结束 <body> 部分。

css 复制代码 
</html>

结束整个 HTML 文档。

总的代码

css 复制代码 
<!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>

界面与操作演示

相关推荐
fruge4 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia13 分钟前
vue中如何关闭eslint检测？
前端·javascript·vue.js
~甲壳虫14 分钟前
说说webpack中常见的Plugin？解决了什么问题？
前端·webpack·node.js
光影少年33 分钟前
vue2与vue3的全局通信插件，如何实现自定义的插件
前端·javascript·vue.js
As977_34 分钟前
前端学习Day12 CSS盒子的定位（相对定位篇“附练习”）
前端·css·学习
susu108301891136 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾38 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking38 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu40 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym44 分钟前
Webpack性能优化指南：从构建到部署的全方位策略
前端·webpack·性能优化
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play