您好,读者,欢迎来到我的新博客,今天我将告诉您如何使用 Html、CSS 制作有效的登录和注册表单。正如您所看到的许多类型的登录和注册表单,但这个是透明的。如您所知,登录表单用于输入身份验证凭据以访问受限页面或表单。登录表单包含用户名字段和密码字段。提交登录表单时,其底层代码会检查凭据是否真实,从而使用户可以访问受限页面。

如您所知,注册表单是任何网站不可或缺的一部分。根据您的业务性质,注册表单可用于生成潜在客户、为您的时事通讯收集电子邮件以及获取新客户。 ... 注册表单对于增加基于许可的订户列表至关重要。

如果您想要制作此登录和注册表单背后的代码,您可以阅读整个博客并使用下面给出的链接观看登录和注册表单的预览。

视频预览

视频预览即将推出。

您也可以订阅我的频道以获取最新更新。

🔗 链接-Codeflix

请订阅我朋友的频道-放松的声音和音乐

我的第二个频道 放松的声音和音乐

Html

如您所知,超文本标记语言或 HTML 是设计用于在 Web 浏览器中显示的文档的标准标记语言。它可以通过级联样式表 (CSS) 等技术和 JavaScript 等脚本语言来辅助。

Web 浏览器从 Web 服务器或本地存储接收 HTML 文档,并将文档呈现为多媒体网页。 HTML 从语义上描述了网页的结构,并且最初包含了文档外观的提示。

HTML 元素是 HTML 页面的构建块。使用 HTML 结构,图像和其他对象(例如交互式表单)可以嵌入到呈现的页面中。 HTML 通过为诸如标题、段落、列表、链接、引号和其他项目等文本表示结构语义,提供了一种创建结构化文档的方法。 HTML 元素由标记描述,使用尖括号编写。直接将内容引入页面等标签。其他标签如

包围并提供有关文档文本的信息,并且可能包括其他标签作为子元素。浏览器不显示 HTML 标签,而是使用它们来解释页面的内容。

源代码

现在让我们不要再浪费时间了,开始吧。

注意! - 仔细阅读所有内容,输入错误会产生错误的结果。

步骤1

创建一个名为 index.html 的文件并编写以下代码。

带有 CSS 链接的基本代码。

<!DOCTYPE html>
<!-- Created By Codeflix -->
<html lang="en" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>Transparent Login Form HTML CSS</title>
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>

进入全屏模式 退出全屏模式

第二步

在这里,我们添加了背景图像。我会在我的视频预览中发送图片下载🔗链接。

    <div class="bg-img">

进入全屏模式 退出全屏模式

第三步

此代码用于登录表单。

      <div class="content">
        <header>Login Form</header>
        <form action="#">
          <div class="field">
            <span class="fa fa-user"></span>
            <input type="text" required placeholder="Email or Phone">
          </div>
          <div class="field space">
            <span class="fa fa-lock"></span>
            <input type="password" class="pass-key" required placeholder="Password">
            <span class="show">SHOW</span>
          </div>

进入全屏模式 退出全屏模式

第4步

稍后我们将在博客中重置密码。


        <div class="pass">
            <a href="index 2.html">Forgot Password?</a>
          </div>

进入全屏模式 退出全屏模式

步骤5

此代码用于登录按钮。

 <div class="field">
<input type="submit"value="LOGIN">
          </div>
        </form>

进入全屏模式 退出全屏模式

第6步

此代码用于下一个(或登录方式)部分。

    <div class="login">Or login with</div>
        <div class="links">
          <div class="google">
            <i class="fab fa-google"><span>Google</span></i>
          </div>
          <div class="facebook">
            <i class="fab fa-facebook-f"><span>Facebook</span></i>
          </div>
        </div>

进入全屏模式 退出全屏模式

步骤 7

我们稍后将在此博客中制作注册页面。

<div class="signup">Don't have account? 
<a href="index{signup}.html">Signup Now</a>
        </div>
      </div>
    </div>

进入全屏模式 退出全屏模式

Javascript

JavaScript,通常缩写为 JS,是一种符合 ECMAScript 规范的编程语言。 JavaScript 是高级的,通常是即时编译的和多范式的。它具有大括号语法、动态类型、基于原型的面向对象和一流的功能。

除了 HTML 和 CSS,JavaScript 是万维网的核心技术之一。超过 97% 的网站将其用于网页行为的客户端,通常包含第三方库。大多数网络浏览器都有专用的 JavaScript 引擎来执行用户设备上的代码。

作为一种多范式语言,JavaScript 支持事件驱动、函数式和命令式编程风格。它具有用于处理文本、日期、正则表达式、标准数据结构和文档对象模型 (DOM) 的应用程序编程接口 (API)。

ECMAScript 标准不包括任何输入/输出 (I/O),例如网络、存储或图形设施。实际上,Web 浏览器或其他运行时系统为 I/O 提供 JavaScript API。 JavaScript 引擎最初仅用于 Web 浏览器,但它们现在已成为其他软件系统的核心组件,尤其是服务器和各种应用程序。

尽管 JavaScript 和 Java 在语言名称、语法和各自的标准库等方面有相似之处,但两种语言是截然不同的,在

设计。

脚本源代码

使用说明(仔细阅读)

我们将在 index.html 中使用

标签 。如果需要,您也可以创建一个 script.js 文件,并将代码写入其中,不要忘记🔗链接它。

源代码

步骤1

此代码用于密码字段中的显示和隐藏选项,样式...

这还包含 index.html 的结束标签,阅读说明以了解更多信息。 (位于上方)。

  const pass_field = document.querySelector('.pass-key');
  const showBtn = document.querySelector('.show');
  showBtn.addEventListener('click', function(){
   if(pass_field.type === "password"){
     pass_field.type = "text";
     showBtn.textContent = "HIDE";
     showBtn.style.color = "#3498db";
   }else{
     pass_field.type = "password";
     showBtn.textContent = "SHOW";
     showBtn.style.color = "#222";
   }
  });

进入全屏模式 退出全屏模式

# devops # scss
Logo
CI/CD

CI/CD社区为您提供最前沿的新闻资讯和知识内容

更多推荐

Jenkins环境变量、参数及groovy脚本使用介绍。

这是系列中的第三篇文章 使用 Jenkins 将 Django 应用程序部署到 AWS EC2 实例。 Jenkins的温和指南。 在本文中,我们将介绍如何在 Jenkins 中使用变量和参数以及如何使用 groovy 脚本。我们将使用与以前相同的项目。您需要事先阅读过之前的文章。 1.如何在 JenkinsFile 中配置和使用变量。 在编写 JenkinsFile 管道脚本时,您可能需要注入和

avatar CI/CD

Rust 中的 OpenTelemetry 分布式跟踪指南

在本文中,我将分享我将 OpenTelemetry 分布式跟踪添加到 Rust 应用程序的经验。 我将尝试回答以下问题: 如何在 Rust 中检测 Opentelemetry? 如何在 Rust 应用程序中添加手动和自动检测? 如何使用tracing来调试Rust应用? 如何可视化跟踪和跨度? 如何在多线程环境中保存我们的 span 上下文? 在 Rust 中进行跟踪时,你必须知道哪些 crat

avatar CI/CD

Jenkins 管道,用于构建 Django 映像并将其推送到 dockerhub 和 GitHub webhook 集成。

这是系列文章的第四篇 使用 Jenkins 将 Django 应用程序部署到 AWS EC2 实例。詹金斯的温和指南。 在本文中,您将拼凑您所学的所有基础知识,并构建一个完整的 Jenkins 管道,该管道将构建 Django 映像并将其部署到 Dockerhub。您需要事先阅读过之前的文章 1.添加 init 阶段并加载script.groovy文件。 在您的 JenkinsFile 中,添加加

avatar CI/CD