如何使登录表单重定向

huangapple
go评论138阅读模式
英文:

How do i make a login form redirect

问题

我是新手网页开发者，我创建了一个带有用户名和密码的登录表单，但我不知道如何在用户名和密码正确时将其重定向到新的HTML文件，就像这样：window.location="welcome.html"；有人可以帮忙吗？

HTML：对于这个，我确实使用了教程，但它没有告诉我如何设置用户名和密码系统。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Login</title>
  8.     <link rel="stylesheet" href="style.css">
  9.     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  10. </head>
  11. <body>
  12.   <div class="container">
  13.     <div class="curved-shape"></div>
  14.     <div class="form-box Login">
  15.       <h2>Login</h2>
  16.       <form action="#" method="post" id="login-form">
  17.         <div class="input-box">
  18.           <input type="text" id="username" name="username">
  19.           <label for="username">Username</label>
  20.           <i class='bx bxs-user'></i>
  21.         </div>
  22.         <div class="input-box">
  23.           <input type="password" id="password" name="password">
  24.           <label for="password">Password</label>
  25.           <i class='bx bxs-lock-alt'></i>
  26.         </div>
  27.         <div class="input-box">
  28.           <button class="btn" type="submit">Login</button>
  29.         </div>
  30.       </form>
  31.     </div>
  32.     <div class="info-content Login">
  33.       <h2>WELCOME BACK!</h2>
  34.       <p>This is a site developed by Zechariah Echols!</p>
  35.     </div>
  36.   </div>
  37.   <script src="script.js"></script>
  38. </body>
  39. </html>

CSS：

  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7.     font-family: 'Poppins', sans-serif;
  8.     color: #fff;
  9. }
  11. /* ... （CSS的其余部分） */

我期望当用户名为“pugls”且密码为“PugWareX”时，它会将您重定向到一个新的HTML窗口。

英文:

Guys im new to web development and i made a login form with a username and a password but i dont know how to get it so when the password and the username are correct it takes u to a new html file like this window.location="welcome.html"; can somebody help.
Html: for this i did use a tutorial ik but it doesnt tell u how to setup the username and password system

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Login&lt;/title&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  9. &lt;link href=&#39;https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css&#39; rel=&#39;stylesheet&#39;&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;div class=&quot;container&quot;&gt;
  13. &lt;div class=&quot;curved-shape&quot;&gt;&lt;/div&gt;
  14. &lt;div class=&quot;form-box Login&quot;&gt;
  15. &lt;h2&gt;Login&lt;/h2&gt;
  16. &lt;form action=&quot;#&quot;&gt;
  17. &lt;div class=&quot;input-box&quot;&gt;
  18. &lt;input type=&quot;text&quot;&gt;
  19. &lt;label for=&quot;&quot;&gt;Username&lt;/label&gt;
  20. &lt;i class=&#39;bx bxs-user&#39;&gt;&lt;/i&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;input-box&quot;&gt;
  23. &lt;input type=&quot;text&quot; id=&quot;pswd&quot;&gt;
  24. &lt;label for=&quot;&quot;&gt;Password&lt;/label&gt;
  25. &lt;i class=&#39;bx bxs-lock-alt&#39;&gt;&lt;/i&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;input-box&quot;&gt;
  28. &lt;button class=&quot;btn&quot; type=&quot;submit&quot;&gt;Login&lt;/button&gt;
  29. &lt;/div&gt;
  30. &lt;/form&gt;
  31. &lt;/div&gt;
  32. &lt;div class=&quot;info-content Login&quot;&gt;
  33. &lt;h2&gt;WELCOME BACK!&lt;/h2&gt;
  34. &lt;p&gt;This is a site developed by Zechariah Echols!&lt;/p&gt;
  35. &lt;/div&gt;
  36. &lt;/div&gt;
  37. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  38. &lt;/body&gt;
  39. &lt;/html&gt;

CSS

  1. @import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&amp;display=swap&#39;);
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. font-family: &#39;Poppins&#39;, sans-serif;
  7. color: #fff;
  8. }
  9. body{
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. min-height: 100vh;
  14. background: #25252b;
  15. }
  16. .container{
  17. position: relative;
  18. width: 750px;
  19. height: 450px;
  20. border: 2px solid #ff2770;
  21. box-shadow: 0 0 25px #ff2770;
  22. overflow: hidden;
  23. }
  24. .container .form-box{
  25. position: absolute;
  26. top: 0;
  27. width: 50%;
  28. height: 100%;
  29. display: flex;
  30. justify-content: center;
  31. flex-direction: column;
  32. }
  33. .form-box.Login{
  34. left: 0%;
  35. padding: 0 40px;
  36. }
  37. .form-box h2{
  38. position: relative;
  39. text-allign: center;
  40. }
  41. .form-box .input-box{
  42. position: relative;
  43. width: 100%;
  44. height: 50px;
  45. margin-top: 25px;
  46. }
  47. .input-box input{
  48. width: 100%;
  49. height: 100%;
  50. background: transparent;
  51. border: none;
  52. outline: none;
  53. font-size: 16px;
  54. color: #fff;
  55. font-weight: 600;
  56. border-bottom: 2px solid #fff;
  57. padding-right: 23px;
  58. transition: .5s;
  59. }
  60. .input-box input:focus,
  61. .input-box input:focus{
  62. border-bottom: 2px solid #ff2770;
  63. }
  64. .input-box label{
  65. position: absolute;
  66. top: 50%;
  67. left: 0;
  68. transform: translateY(-50%);
  69. font-size: 16px;
  70. color: #fff;
  71. transition: .5s;
  72. }
  73. .input-box input:focus ~ label,
  74. .input-box input:focus ~ label{
  75. top: -5px;
  76. color: #ff2770;
  77. }
  78. .input-box i{
  79. position: absolute;
  80. top: 50%;
  81. right: 0;
  82. font-size: 18px;
  83. transform: translateY(-50%);
  84. transition: .5s;
  85. }
  86. .input-box input:focus ~ i,
  87. .input-box input:focus ~ i{
  88. top: -5px;
  89. color: #ff2770;
  90. }
  91. .btn{
  92. position: relative;
  93. width: 100%;
  94. height: 45px;
  95. background: transparent;
  96. border-radius: 40px;
  97. cursor: pointer;
  98. font-size: 16px;
  99. font-weight: 600;
  100. border: 2px solid #ff2770;
  101. overflow: hidden;
  102. z-index: 1;
  103. }
  104. .btn::before{
  105. content: &quot;&quot;;
  106. position: absolute;
  107. height: 300%;
  108. width: 100%;
  109. background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
  110. top: -100%;
  111. left: 0;
  112. z-index: -1;
  113. transition: .5s;
  114. }
  115. .btn:hover:before{
  116. top: 0;
  117. }
  118. .info-content{
  119. position: absolute;
  120. top: 0;
  121. height: 100%;
  122. width: 50%;
  123. display: flex;
  124. justify-content: center;
  125. flex-direction: column;
  126. }
  127. .info-content.Login{
  128. right: 0;
  129. text-align: right;
  130. padding: 0 40px 60px 150px;
  131. }
  132. .info-content h2{
  133. text-transform: uppercase;
  134. font-size: 36px;
  135. line-height: 1.3;
  136. }
  137. .info-content p{
  138. font-size: 16px;
  139. }
  140. .container .curved-shape{
  141. position: absolute;
  142. right: 0;
  143. top: -5px;
  144. height: 600px;
  145. width: 850px;
  146. background: linear-gradient(45deg,#25252b,#ff2770);
  147. transform: rotate(10deg) skewY(40deg);
  148. transform-origin: bottom right;
  149. }

I’m expecting it to take u to a new html window when the username is pugls and the password is PugWareX

答案1

得分: 0

以下是翻译好的部分：

首先，在您的 script.js 文件中进行以下更改：

首先，为了通过 JavaScript 轻松访问，给您的输入字段添加 id 属性：

  1. <input type="text" id="usernameInput">
  2. <input type="password" id="passwordInput">

然后，更新您的 JavaScript（script.js）以包括检查凭据和重定向的逻辑：

  1. // 选择登录表单
  2. const loginForm = document.querySelector('.form-box.Login form');
  4. // 向表单添加提交事件监听器
  5. loginForm.addEventListener('submit', function(event) {
  6.   event.preventDefault(); // 防止表单正常提交
  8.   // 从输入字段获取值
  9.   const username = document.getElementById('usernameInput').value;
  10.   const password = document.getElementById('passwordInput').value;
  12.   // 检查凭据是否正确
  13.   if (username === 'pugls' && password === 'PugWareX') {
  14.     // 重定向到欢迎页面
  15.     window.location.href = 'welcome.html';
  16.   } else {
  17.     alert('用户名或密码不正确，请重试。');
  18.   }
  19. });

请注意，代码部分没有进行翻译，只提供了 HTML 和 JavaScript 代码的翻译。

英文:

You can modify your script.js file with the following changes:

First, give your inputs an id attribute for easy access through JavaScript:

  1. &lt;input type=&quot;text&quot; id=&quot;usernameInput&quot;&gt;
  2. &lt;input type=&quot;password&quot; id=&quot;passwordInput&quot;&gt;

Update your JavaScript (script.js) to include the logic for checking the credentials and redirecting:

  1. // Select the login form
  2. const loginForm = document.querySelector(&#39;.form-box.Login form&#39;);
  3. // Add a submit event listener to the form
  4. loginForm.addEventListener(&#39;submit&#39;, function(event) {
  5. event.preventDefault(); // Prevent the form from submitting normally
  6. // Get the values from the input fields
  7. const username = document.getElementById(&#39;usernameInput&#39;).value;
  8. const password = document.getElementById(&#39;passwordInput&#39;).value;
  9. // Check if the credentials are correct
  10. if (username === &#39;pugls&#39; &amp;&amp; password === &#39;PugWareX&#39;) {
  11. // Redirect to the welcome page
  12. window.location.href = &#39;welcome.html&#39;;
  13. } else {
  14. alert(&#39;Incorrect username or password. Please try again.&#39;);
  15. }
  16. });

答案2

得分: -1

以下是您提供的代码的翻译：

  1. const form = document.getElementById("myForm");
  2. form.addEventListener("submit", handleSubmit);
  3. function handleSubmit(event) {
  4.  event.preventDefault();
  5.    login();
  6. }
  7. function login() {
  8.     var username = document.getElementById("username").value;
  9.     var password = document.getElementById("pswd").value;
  10.   const labelElement = document.getElementById("erroe-msg");
  11.     if (username == "admin" && password == "1234") {
  12.       alert("1");
  13.         window.location = "welcome.html";
  14.     } else {
  15.       alert("2");
  16.       labelElement.textContent = "无效的用户名或密码";
  17.     }
  18. }
  1. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6.     font-family: 'Poppins', sans-serif;
  7.     color: #fff;
  8. }
  9. body{
  10.   display: flex;
  11.   justify-content: center;
  12.   align-items: center;
  13.   min-height: 100vh;
  14.   background: #25252b;
  15. }
  16. .container{
  17.  position: relative;
  18.   width: 750px;
  19.   height: 450px;
  20.   border: 2px solid #ff2770;
  21.   box-shadow: 0 0 25px #ff2770;
  22.   overflow: hidden;
  23. }
  24. .container .form-box{
  25.   position: absolute;
  26.   top: 0;
  27.   width: 50%;
  28.   height: 100%;
  29.   display: flex;
  30.   justify-content: center;
  31.   flex-direction: column;
  32. }
  33. .form-box.Login{
  34.   left: 0%;
  35.   padding: 0 40px;
  36. }
  37. .form-box h2{
  38.   position: relative;
  39.   text-allign: center;
  40. }
  42. .form-box .input-box{
  43.   position: relative;
  44.   width: 100%;
  45.   height: 50px;
  46.   margin-top: 25px;
  47. }
  48. .input-box input{
  49.   width: 100%;
  50.   height: 100%;
  51.   background: transparent;
  52.   border: none;
  53.   outline: none;
  54.   font-size: 16px;
  55.   color: #fff;
  56.   font-weight: 600;
  57.   border-bottom: 2px solid #fff;
  58.   padding-right: 23px;
  59.   transition: .5s;
  60. }
  61. .input-box input:focus,
  62. .input-box input:focus{
  63.   border-bottom: 2px solid #ff2770;
  64. }
  65. .input-box label{
  66.   position: absolute;
  67.   top: 50%;
  68.   left: 0;
  69.   transform: translateY(-50%);
  70.   font-size: 16px;
  71.   color: #fff;
  72.   transition: .5s;
  73. }
  74. .input-box input:focus ~ label,
  75. .input-box input:focus ~ label{
  76.   top: -5px;
  77.   color: #ff2770;
  78. }
  79. .input-box i{
  80.   position: absolute;
  81.   top: 50%;
  82.   right: 0;
  83.   font-size: 18px;
  84.   transform: translateY(-50%);
  85.   transition: .5s;
  86. }
  87. .input-box input:focus ~ i,
  88. .input-box input:focus ~ i{
  89.   top: -5px;
  90.   color: #ff2770;
  91. }
  92. .btn{
  93.   position: relative;
  94.   width: 100%;
  95.   height: 45px;
  96.   background: transparent;
  97.   border-radius: 40px;
  98.   cursor: pointer;
  99.   font-size: 16px;
  100.   font-weight: 600;
  101.   border: 2px solid #ff2770;
  102.   overflow: hidden;
  103.   z-index: 1;
  104. }
  105. .btn::before{
  106.   content: "";
  107.   position: absolute;
  108.   height: 300%;
  109.   width: 100%;
  110.   background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
  111.   top: -100%;
  112.   left: 0;
  113.   z-index: -1;
  114.   transition: .5s;
  115. }
  116. .btn:hover:before{
  117.   top: 0;
  118. }
  119. .info-content{
  120.   position: absolute;
  121.   top: 0;
  122.   height: 100%;
  123.   width: 50%;
  124.   display: flex;
  125.   justify-content: center;
  126.   flex-direction: column;
  127. }
  128. .info-content.Login{
  129.   right: 0;
  130.   text-align: right;
  131.   padding: 0 40px 60px 150px;
  132. }
  133. .info-content h2{
  134.   text-transform: uppercase;
  135.   font-size: 36px;
  136.   line-height: 1.3;
  137. }
  138. .info-content p{
  139.   font-size: 16px;
  140. }
  141. .container .curved-shape{
  142.   position: absolute;
  143.   right: 0;
  144.   top: -5px;
  145.   height: 600px;
  146.   width: 850px;
  147.   background: linear-gradient(45deg,#25252b,#ff2770);
  148.   transform: rotate(10deg) skewY(40deg);
  149.   transform-origin: bottom right;
  150. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>登录</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
  11. </head>
  13. <body>
  14.   <div class="container">
  15.     <div class="curved-shape"></div>
  16.     <div class="form-box Login">
  17.       <h2>登录</h2>
  18.       <form id="myForm">
  19.         <div class="input-box">
  20.           <input type="text" id="username">
  21.           <label for=""></label>
  22.           <i class='bx bxs-user'></i>
  23.         </div>
  24.         <div class="input-box">
  25.           <input type="text" id="pswd">
  26.           <label for=""></label>
  27.           <i class='bx bxs-lock-alt'></i>
  28.         </div>
  29.         <div class="input-box">
  30.           <button class="btn" type="submit">登录</button>
  31.         </div>
  32.       </form>
  33.       <label id="erroe-msg"></label>
  34.     </div>
  35.     <div class="info-content Login">
  36.       <h2>欢迎回来！</h2>
  37.       <p>这是由Arunachalam开发的网站！</p>
  38.     </div>
  39.   </div>
  40.     <script src="script.js"></script>
  41. </body>
  43. </html>

希望这可以帮助您！如果您有任何其他问题，请随时提问。

英文:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. const form = document.getElementById(&quot;myForm&quot;);
  2. form.addEventListener(&quot;submit&quot;, handleSubmit);
  3. function handleSubmit(event) {
  4. event.preventDefault();
  5. login();
  6. }
  7. function login() {
  8. var username = document.getElementById(&quot;username&quot;).value;
  9. var password = document.getElementById(&quot;pswd&quot;).value;
  10. const labelElement = document.getElementById(&quot;erroe-msg&quot;);
  11. if (username == &quot;admin&quot; &amp;&amp; password == &quot;1234&quot;) {
  12. alert(&quot;1&quot;);
  13. window.location = &quot;welcome.html&quot;;
  14. } else {
  15. alert(&quot;2&quot;);
  16. labelElement.textContent = &quot;Invalid username or password&quot;;
  17. }
  18. }

<!-- language: lang-css -->

  1. @import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&amp;display=swap&#39;);
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. font-family: &#39;Poppins&#39;, sans-serif;
  7. color: #fff;
  8. }
  9. body{
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. min-height: 100vh;
  14. background: #25252b;
  15. }
  16. .container{
  17. position: relative;
  18. width: 750px;
  19. height: 450px;
  20. border: 2px solid #ff2770;
  21. box-shadow: 0 0 25px #ff2770;
  22. overflow: hidden;
  23. }
  24. .container .form-box{
  25. position: absolute;
  26. top: 0;
  27. width: 50%;
  28. height: 100%;
  29. display: flex;
  30. justify-content: center;
  31. flex-direction: column;
  32. }
  33. .form-box.Login{
  34. left: 0%;
  35. padding: 0 40px;
  36. }
  37. .form-box h2{
  38. position: relative;
  39. text-allign: center;
  40. }
  41. .form-box .input-box{
  42. position: relative;
  43. width: 100%;
  44. height: 50px;
  45. margin-top: 25px;
  46. }
  47. .input-box input{
  48. width: 100%;
  49. height: 100%;
  50. background: transparent;
  51. border: none;
  52. outline: none;
  53. font-size: 16px;
  54. color: #fff;
  55. font-weight: 600;
  56. border-bottom: 2px solid #fff;
  57. padding-right: 23px;
  58. transition: .5s;
  59. }
  60. .input-box input:focus,
  61. .input-box input:focus{
  62. border-bottom: 2px solid #ff2770;
  63. }
  64. .input-box label{
  65. position: absolute;
  66. top: 50%;
  67. left: 0;
  68. transform: translateY(-50%);
  69. font-size: 16px;
  70. color: #fff;
  71. transition: .5s;
  72. }
  73. .input-box input:focus ~ label,
  74. .input-box input:focus ~ label{
  75. top: -5px;
  76. color: #ff2770;
  77. }
  78. .input-box i{
  79. position: absolute;
  80. top: 50%;
  81. right: 0;
  82. font-size: 18px;
  83. transform: translateY(-50%);
  84. transition: .5s;
  85. }
  86. .input-box input:focus ~ i,
  87. .input-box input:focus ~ i{
  88. top: -5px;
  89. color: #ff2770;
  90. }
  91. .btn{
  92. position: relative;
  93. width: 100%;
  94. height: 45px;
  95. background: transparent;
  96. border-radius: 40px;
  97. cursor: pointer;
  98. font-size: 16px;
  99. font-weight: 600;
  100. border: 2px solid #ff2770;
  101. overflow: hidden;
  102. z-index: 1;
  103. }
  104. .btn::before{
  105. content: &quot;&quot;;
  106. position: absolute;
  107. height: 300%;
  108. width: 100%;
  109. background: linear-gradient(#25252b, #ff2770, #25252b, #ff2770);
  110. top: -100%;
  111. left: 0;
  112. z-index: -1;
  113. transition: .5s;
  114. }
  115. .btn:hover:before{
  116. top: 0;
  117. }
  118. .info-content{
  119. position: absolute;
  120. top: 0;
  121. height: 100%;
  122. width: 50%;
  123. display: flex;
  124. justify-content: center;
  125. flex-direction: column;
  126. }
  127. .info-content.Login{
  128. right: 0;
  129. text-align: right;
  130. padding: 0 40px 60px 150px;
  131. }
  132. .info-content h2{
  133. text-transform: uppercase;
  134. font-size: 36px;
  135. line-height: 1.3;
  136. }
  137. .info-content p{
  138. font-size: 16px;
  139. }
  140. .container .curved-shape{
  141. position: absolute;
  142. right: 0;
  143. top: -5px;
  144. height: 600px;
  145. width: 850px;
  146. background: linear-gradient(45deg,#25252b,#ff2770);
  147. transform: rotate(10deg) skewY(40deg);
  148. transform-origin: bottom right;
  149. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;UTF-8&quot;&gt;
  5. &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  6. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  7. &lt;title&gt;Login&lt;/title&gt;
  8. &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  9. &lt;link href=&#39;https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css&#39; rel=&#39;stylesheet&#39;&gt;
  10. &lt;/head&gt;
  11. &lt;body&gt;
  12. &lt;div class=&quot;container&quot;&gt;
  13. &lt;div class=&quot;curved-shape&quot;&gt;&lt;/div&gt;
  14. &lt;div class=&quot;form-box Login&quot;&gt;
  15. &lt;h2&gt;Login&lt;/h2&gt;
  16. &lt;form id=&quot;myForm&quot;&gt;
  17. &lt;div class=&quot;input-box&quot;&gt;
  18. &lt;input type=&quot;text&quot; id=&quot;username&quot;&gt;
  19. &lt;label for=&quot;&quot;&gt;Username&lt;/label&gt;
  20. &lt;i class=&#39;bx bxs-user&#39;&gt;&lt;/i&gt;
  21. &lt;/div&gt;
  22. &lt;div class=&quot;input-box&quot;&gt;
  23. &lt;input type=&quot;text&quot; id=&quot;pswd&quot;&gt;
  24. &lt;label for=&quot;&quot;&gt;Password&lt;/label&gt;
  25. &lt;i class=&#39;bx bxs-lock-alt&#39;&gt;&lt;/i&gt;
  26. &lt;/div&gt;
  27. &lt;div class=&quot;input-box&quot;&gt;
  28. &lt;button class=&quot;btn&quot; type=&quot;submit&quot;&gt;Login&lt;/button&gt;
  29. &lt;/div&gt;
  30. &lt;/form&gt;
  31. &lt;label id=&quot;erroe-msg&quot;&gt;&lt;/label&gt;
  32. &lt;/div&gt;
  33. &lt;div class=&quot;info-content Login&quot;&gt;
  34. &lt;h2&gt;WELCOME BACK!&lt;/h2&gt;
  35. &lt;p&gt;This is a site developed by Arunachalam!&lt;/p&gt;
  36. &lt;/div&gt;
  37. &lt;/div&gt;
  38. &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  39. &lt;/body&gt;
  40. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年8月10日 14:36:20
  • 转载请务必保留本文链接：https://go.coder-hub.com/76873143.html
  • authentication
  • css
  • forms
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定