로그인 양식 웹사이트 구축-CSS 튜토리얼-php.cn

Build a Login Form Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 로그인 양식을 공유하게 되어 기쁩니다. 이 프로젝트는 사용자가 자신을 인증하는 데 사용할 수 있는 깔끔하고 기능적인 로그인 인터페이스를 구축하려는 사람들에게 적합합니다. 전문적인 사용자 인증 환경을 조성하면서 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 파일을 열어 로그인 양식을 확인하세요.

용법

양식을 엽니다 웹 브라우저에서
입력 필드에 자격 증명을 입력하세요.
유효성 검사 및 오류 처리를 테스트하려면 양식을 제출하세요.
입력 필드가 올바르게 채워지지 않은 경우 오류 메시지를 확인하세요.

코드 설명

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를 적용하여 사용자 인증의 중요한 구성 요소인 로그인 양식을 개발했습니다. 이 프로젝트가 여러분이 자신만의 로그인 또는 인증 양식을 만드는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!