开发者们大家好!我很高兴分享我的最新项目:登录表单。该项目非常适合那些希望构建一个干净且功能齐全的登录界面的人,用户可以使用该界面来验证自己的身份。这是使用 HTML、CSS 和 JavaScript 增强前端开发技能的好方法,同时创建专业的用户身份验证体验。
登录表单是一个网络应用程序,旨在为用户提供安全且用户友好的方式登录网站。它采用现代且响应式的设计,允许用户输入凭据并访问站点的受保护区域。该项目演示了如何创建功能齐全且美观的登录表单。
以下是项目结构的概述:
Login-Form/ ├── index.html ├── style.css └── script.js
要开始该项目,请按照以下步骤操作:
克隆存储库:
git clone https://github.com/abhishekgurjar-in/Login-Form.git
打开项目目录:
cd Login-Form
运行项目:
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
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 开发方面持续学习之旅的一部分。
以上是建立一个登录表单网站的详细内容。更多信息请关注PHP中文网其他相关文章!