開発者の皆さん、こんにちは！私の最新プロジェクトであるログイン フォームを共有できることを嬉しく思います。このプロジェクトは、ユーザーが自分自身を認証するために使用できるクリーンで機能的なログイン インターフェイスを構築したい人に最適です。これは、プロフェッショナルなユーザー認証エクスペリエンスを作成しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる優れた方法です。
ログイン フォームは、ユーザーが Web サイトにログインするための安全で使いやすい方法を提供するように設計された Web アプリケーションです。最新の応答性の高いデザインにより、ユーザーは資格情報を入力し、サイトの保護された領域にアクセスできます。このプロジェクトでは、機能的で見た目にも美しいログイン フォームを作成する方法を示します。
プロジェクト構造の概要は次のとおりです:
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">
<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>
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;
}
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 開発における私の継続的な学習の一環として開発されました。
以上がログインフォーム Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
