当前位置：首页 > 文章列表 > 文章 > 前端 > 建立一个登录表单网站

建立一个登录表单网站

来源：dev.to 2024-11-22 16:50:51 0浏览收藏

大家好，今天本人给大家带来文章《建立一个登录表单网站》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

建立一个登录表单网站

介绍

开发者们大家好！我很高兴分享我的最新项目：登录表单。该项目非常适合那些希望构建一个干净且功能齐全的登录界面的人，用户可以使用该界面来验证自己的身份。这是使用 html、css 和 javascript 增强前端开发技能的好方法，同时创建专业的用户身份验证体验。

项目概况

登录表单是一个网络应用程序，旨在为用户提供安全且用户友好的方式登录网站。它采用现代且响应式的设计，允许用户输入凭据并访问站点的受保护区域。该项目演示了如何创建功能齐全且美观的登录表单。

特征

响应式布局：登录表单适应不同的屏幕尺寸，在桌面和移动设备上提供最佳的查看体验。
交互式元素：包括表单验证和错误消息等功能，以指导用户完成登录过程。
简洁的设计：以视觉上有吸引力且易于使用的格式呈现登录字段。

使用的技术

html：提供登录表单的结构。
css：设置表单样式以创建现代且响应式的设计。
javascript：管理交互元素，包括表单验证和错误处理。

项目结构

以下是项目结构的概述：

login-form/
├── index.html
├── style.css
└── script.js

index.html：包含登录表单的 html 结构。
style.css：包含 css 样式以创建引人入胜且响应式的设计。
script.js：管理表单的交互元素，例如验证。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/login-form.git

打开项目目录:
```
cd login-form
```
运行项目:
- 在网络浏览器中打开index.html 文件以查看登录表单。

用法

在网络浏览器中打开表单。
在输入字段中输入您的凭据。
提交表单来测试验证和错误处理。
查看错误消息如果输入字段未正确填写。

代码说明

超文本标记语言

index.html 文件定义了登录表单的结构，包括用户名和密码的输入字段以及提交按钮。这是一个片段：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
    <title>login form</title>
  </head>
  <body>
    <div class="container">
      <div id="loginform">
        <img src="./logo/user_13078032.png" alt="user logo" />
        <h1>login form</h1>
      </div>
      <div class="form_area">
        <h4 class="title">register now</h4>
        <form>
          <div class="form_group">
            <label for="email" class="sub_title">email</label>
            <input type="email" id="email" class="form_style" />
          </div>
          <div class="form_group">
            <label for="password" class="sub_title">password</label>
            <input
              type="password"
              id="password"
              class="form_style"
              pattern="(?=.*\d)(?=.*[a-z])(?=.*[a-z]).{8,}"
              title="must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
              required
            />
          </div>
          <div>
            <button class="btn">register</button>
          </div>
        </form>
      </div>
    </div>

    <div id="message">
      <h3>password must contain the following:</h3>
      <p id="letter" class="invalid">a <b>lowercase</b> letter</p>
      <p id="capital" class="invalid">a <b>capital (uppercase)</b> letter</p>
      <p id="number" class="invalid">a <b>number</b></p>
      <p id="length" class="invalid">minimum <b>8 characters</b></p>
    </div>

    <div class="footer">
      <p>made with ❤️ by abhishek gurjar</p>
    </div>
  </body>
</html>

css

style.css 文件设置登录表单的样式，确保其具有视觉吸引力和响应能力。以下是一些关键样式：

@import url("https://fonts.googleapis.com/css?family=poppins:400,500,600,700,800,900");

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
  background: #102770;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 15px;
}

#loginform img {
  width: 100px;
  height: 100px;
}

#loginform h1 {
  padding-bottom: 40px;
  color: white;
}

.form_area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  border-radius: 25px;
  background-color: #ecf0f1;
  border: 10px solid rgba(0, 0, 0, 0.05);
}

.title {
  font-weight: 900;
  font-size: 1.5em;
  margin-top: 20px;
}

.sub_title {
  font-weight: 600;
  margin: 5px 0;
}

.form_group {
  display: flex;
  flex-direction: column;
  margin: 20px;
  align-items: baseline;
}

.form_style {
  outline: none;
  width: 250px;
  font-size: 15px;
  border-radius: 4px;
  padding: 12px;
  border: none;
}

.form_style:focus {
  border: 1px solid #8e8e8e;
}

.btn {
  background-color: #000000;
  color: white;
  margin: 20px 0;
  padding: 15px;
  width: 270px;
  font-size: 15px;
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.btn:hover {
  background-color: rgb(41, 40, 40);
}

#message {
  display: none;
  text-align: center;
  color: #ffffff;
}

#message p {
  padding: 10px 35px;
  font-size: 18px;
}

.valid {
  color: green;
}

.valid:before {
  content: "✔";
  margin-right: 10px;
}

.invalid {
  color: red;
}

.invalid:before {
  content: "✖";
  margin-right: 10px;
}

.footer {
  color: white;
  margin: 20px;
  text-align: center;
}

javascript

script.js 文件包含表单验证的功能。这是一个简单的演示片段：

let passInput = document.getElementById("password");
let letter = document.getElementById("letter");
let capital = document.getElementById("capital");
let number = document.getElementById("number");
let length = document.getElementById("length");

passInput.onfocus = function() {
  document.getElementById("message").style.display = "block";
};

passInput.onblur = function() {
  document.getElementById("message").style.display = "none";
};

passInput.onkeyup = function() {
  let lowerCaseLetters = /[a-z]/g;
  if (passInput.value.match(lowerCaseLetters)) {
    letter.classList.remove("invalid");
    letter.classList.add("valid");
  } else {
    letter.classList.remove("valid");
    letter.classList.add("invalid");
  }

  let upperCaseLetters = /[A-Z]/g;
  if (passInput.value.match(upperCaseLetters)) {
    capital.classList.remove("invalid");
    capital.classList.add("valid");
  } else {
    capital.classList.remove("valid");
    capital.classList.add("invalid");
  }

  let numbers = /[0-9]/g;
  if (passInput.value.match(numbers)) {
    number.classList.remove("invalid");
    number.classList.add("valid");
  } else {
    number.classList.remove("valid");
    number.classList.add("invalid");
  }

  if (passInput.value.length >= 8) {
    length.classList.remove("invalid");
    length.classList.add("valid");
  } else {
    length.classList.remove("valid");
    length.classList.add("invalid");
  }
};

现场演示

您可以在此处查看登录表单项目的现场演示。

结论

构建登录表单对于创建功能齐全且用户友好的身份验证界面来说是一次很棒的体验。该项目强调了表单验证和简洁设计在现代 web 开发中的重要性。通过应用 html、css 和 javascript，我们开发了一个登录表单，作为用户身份验证的关键组件。我希望这个项目能够激励您构建自己的登录或身份验证表单。快乐编码！