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

導入

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

プロジェクト概要

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

特徴

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

使用されている技術

• HTML: ログイン フォームの構造を提供します。
• CSS: フォームをスタイル設定して、モダンでレスポンシブなデザインを作成します。
• JavaScript: フォーム検証やエラー処理などの対話型要素を管理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

Login-Form/
├── index.html
├── style.css
└── script.js

• index.html: ログイン フォームの HTML 構造が含まれます。
• style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
• script.js: 検証など、フォームの対話型要素を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

1. リポジトリのクローンを作成します:
   

   git clone https://github.com/abhishekgurjar-in/Login-Form.git
   

2. プロジェクト ディレクトリを開きます:
   

   cd Login-Form
   

3. プロジェクトを実行します:

   • Web ブラウザでindex.html ファイルを開いて、ログイン フォームを表示します。

使用法

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

コードの説明

HTML

index.html ファイルは、ユーザー名とパスワードの入力フィールドや送信ボタンなど、ログイン フォームの構造を定義します。スニペットは次のとおりです:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    acd8feeb3a0ea7477b979779de32785a
    26faf3d1af674280d03ba217d87e9421
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
    b2386ffb911b14667cb8f0f91ea547a7Login Form6e916e0f7d1e588d4f442bf645aedb2f
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      aceaa8cc7465de093c281ce67939f861
        e372ff8e7ef0a158f0cfb75b8f3c7ce1
        4a249f0d628e2318394fd9b75b4636b1Login Form473f0a7621bec819994bb5020d29372a
      16b28748ea4df4d9c2150843fecfba68
      bcd0e077a4e74a5cf996a27d3f409594
        91a06508ad7699447d37a226f0569c02Register Now0f6dfd1e3624ce5465eb402e300e01ae
        ff9c23ada1bcecdd1a0fb5d5a0f18437
          b9600acbcae46ed1cdd8825e541c0b79
            057cfe8a71fabb55b80b425c9d1a53e5Email8c1ecd4bb896b2264e0711597d40766c
            366f91de1890a91bd4c61d6337cee49d
          16b28748ea4df4d9c2150843fecfba68
          b9600acbcae46ed1cdd8825e541c0b79
            209d759cd66b58fc7c45834f2e99c573Password8c1ecd4bb896b2264e0711597d40766c
            985c764dbaf67f3082c332a7f19903c1
          16b28748ea4df4d9c2150843fecfba68
          dc6dce4a544fdca2df29d5ac0ea9906b
            0346fba700925f13d59069990bdd94c2Register65281c5ac262bf6d81768915a4a77ac0
          16b28748ea4df4d9c2150843fecfba68
        f5a47148e367a6035fd7a2faa965022e
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68

    5eaa4ceadfbb9d829f6aaf137beff062
      684271ed9684bde649abda8831d4d355Password must contain the following:39528cedfa926ea0c01e69ef5b2ea9b0
      d3def2ef45fb5468d11098b963064271A a4b561c25d9afb9ac8dc4d70affff419lowercase0d36329ec37a2cc24d42c7229b69747a letter94b3e26ee717c64999d7867364b1b4a3
      19ac74fb1ae957e0ce100244ae583241A a4b561c25d9afb9ac8dc4d70affff419capital (uppercase)0d36329ec37a2cc24d42c7229b69747a letter94b3e26ee717c64999d7867364b1b4a3
      ad11d40df8382c4ac6e31ff9d372ad80A a4b561c25d9afb9ac8dc4d70affff419number0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
      5f61ea5388eebd151226ff32d1adfbeeMinimum a4b561c25d9afb9ac8dc4d70affff4198 characters0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68

    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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 開発における私の継続的な学習の一環として開発されました。

著者

• アビシェク・グルジャル
  • GitHub プロフィール

以上がログインフォーム Web サイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。