소개
안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 로그인 양식을 공유하게 되어 기쁩니다. 이 프로젝트는 사용자가 자신을 인증하는 데 사용할 수 있는 깔끔하고 기능적인 로그인 인터페이스를 구축하려는 사람들에게 적합합니다. 전문적인 사용자 인증 환경을 조성하면서 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
로그인 후 복사
-
프로젝트 디렉토리 열기:
-
프로젝트 실행:
- 웹 브라우저에서 index.html 파일을 열어 로그인 양식을 확인하세요.
용법
-
양식을 엽니다 웹 브라우저에서
-
입력 필드에 자격 증명을 입력하세요.
-
유효성 검사 및 오류 처리를 테스트하려면 양식을 제출하세요.
-
입력 필드가 올바르게 채워지지 않은 경우 오류 메시지를 확인하세요.
코드 설명
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;
}
로그인 후 복사
자바스크립트
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");
}
};
로그인 후 복사
라이브 데모
여기에서 로그인 양식 프로젝트의 라이브 데모를 확인할 수 있습니다.
결론
로그인 양식을 구축하는 것은 기능적이고 사용자 친화적인 인증 인터페이스를 만드는 데 있어서 좋은 경험이었습니다. 이 프로젝트는 현대 웹 개발에서 양식 유효성 검사와 깔끔한 디자인의 중요성을 강조합니다. HTML, CSS, JavaScript를 적용하여 사용자 인증의 중요한 구성 요소인 로그인 양식을 개발했습니다. 이 프로젝트가 여러분이 자신만의 로그인 또는 인증 양식을 만드는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!
크레딧
이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.
작가
위 내용은 로그인 양식 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
