ログインフォーム Web サイトを構築する-CSSチュートリアル-php.cn

ログインフォーム Web サイトを構築する

WBOY

リリース： 2024-09-03 14:08:02

オリジナル

615 人が閲覧しました

Build a Login Form Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクトであるログインフォームを共有できることを嬉しく思います。このプロジェクトは、ユーザーが自分自身を認証するために使用できるクリーンで機能的なログインインターフェイスを構築したい人に最適です。これは、プロフェッショナルなユーザー認証エクスペリエンスを作成しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる優れた方法です。

プロジェクト概要

ログインフォームは、ユーザーが Web サイトにログインするための安全で使いやすい方法を提供するように設計された Web アプリケーションです。最新の応答性の高いデザインにより、ユーザーは資格情報を入力し、サイトの保護された領域にアクセスできます。このプロジェクトでは、機能的で見た目にも美しいログインフォームを作成する方法を示します。

特徴

レスポンシブレイアウト: ログインフォームはさまざまな画面サイズに適応し、デスクトップとモバイルデバイスの両方で最適な表示エクスペリエンスを提供します。
インタラクティブな要素: フォーム検証やエラーメッセージなど、ユーザーのログインプロセスをガイドする機能が含まれています。
クリーンなデザイン: ログインフィールドを視覚的に魅力的で使いやすい形式で表示します。

使用されている技術

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
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、ログインフォームを表示します。

使用法

Web ブラウザでフォームを開きます。
入力フィールドに資格情報を入力します。
フォームを送信して、検証とエラー処理をテストします。
入力フィールドが正しく入力されていない場合は、エラーメッセージを表示します。

コードの説明

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 を適用することで、ユーザー認証の重要なコンポーネントとして機能するログインフォームを開発しました。このプロジェクトが、あなたが独自のログインフォームまたは認証フォームを作成するきっかけとなることを願っています。コーディングを楽しんでください!