建立一个登录表单网站

百变鹏仔 4周前 (09-19) #CSS

文章标签建立一个

介绍

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

项目概况

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

特征

使用的技术

项目结构

以下是项目结构的概述：

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

安装

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

克隆存储库：

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

打开项目目录:
```
cd login-form
```
运行项目:

用法

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

代码说明

超文本标记语言

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">        @@##@@        <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，我们开发了一个登录表单，作为用户身份验证的关键组件。我希望这个项目能够激励您构建自己的登录或身份验证表单。快乐编码！

制作人员

这个项目是我在 web 开发方面持续学习之旅的一部分。

作者

文章推荐

建立一个登录表单网站

介绍

项目概况

特征

使用的技术

项目结构

安装

用法

代码说明

超文本标记语言

css

javascript

现场演示

结论

制作人员

作者

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写